← All elements
<div class="pk"><div class="k k1">1</div><div class="k k2">2</div><div class="k k3">3</div><div class="k k4">4</div></div>About this card
A swipeable carousel that shows a sliver of the next card, using scroll-snap with a card width smaller than the container.
How it works
The cards are each 72 percent of the container width, so the next card always peeks in from the right, which hints that more can be scrolled. The container is a flex row with scroll-snap-type x mandatory, and every card snaps to the start with a small scroll padding for the first card.
Ways to customise it
- Change 72% to show more or less of the next card.
- Edit the gradients of the cards.
- Add more cards by copying a k element.
Good to know
Swipe and trackpad scrolling work natively. Add visible controls if people may need them. The scrollbar is hidden, so keep the peek as a visual cue.
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.