← All elements
<div class="car"><div class="s s1">One</div><div class="s s2">Two</div><div class="s s3">Three</div><div class="s s4">Four</div></div>About this carousel
A horizontal swipeable carousel whose slides lock into place with scroll-snap-type and scroll-snap-align.
How it works
The container is a flex row with overflow-x: auto. scroll-snap-type: x mandatory tells the browser to stop on slide boundaries, and each slide uses scroll-snap-align: center so it settles in the middle. The scrollbar is hidden, and people swipe or use a trackpad to move between slides.
Ways to customise it
- Change flex: 0 0 100% to a smaller value to show several slides at once.
- Replace the gradients with your own backgrounds.
- Use proximity instead of mandatory for a softer snap.
Good to know
It scrolls with the keyboard when focused and works natively on touch. There are no arrow buttons, so consider adding anchor links to each slide for people who cannot swipe.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.