CSS-only carousel. No js

CSS is so cool

Yes, it is possible, as a simple carousel.

Let's build it

1. First, we need a scrollable area containing some slides, in my case some images:

overflow-x: scroll;

Animated giff with scroll area with images

2. Now we need to make stop the content in the middle, for this, we will use the

scroll-snap-type: x mandatory;

now you will see that no matter how much you try the slide will be in the middle

Animated giff with scroll area with images that stops in the middle

3. Next we need to hide the scrollable bar

.carousel::-webkit-scrollbar {
  display: none;
 }

Animated giff with scroll area with images, with no scroll bar