← All elements
<div class="vs"><div class="s a">1</div><div class="s b">2</div><div class="s c">3</div><div class="s d">4</div></div>About this carousel
A tall, swipeable stack of slides that snap one at a time vertically, using scroll-snap on the block axis.
How it works
A tall box scrolls on the vertical axis with scroll-snap-type y mandatory, and every slide is the same height as the box with scroll-snap-align start. Swiping or scrolling therefore stops on exactly one slide at a time, like a story feed. The scrollbar is hidden for a clean look.
Ways to customise it
- Change the box and slide height together.
- Edit the gradient on each slide.
- Add more slides by copying an s element.
Good to know
It scrolls with touch, trackpads and the keyboard when focused. Hidden scrollbars can hide that there is more content, so add a hint or dots if needed.
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.