← All elements
<div class="ps"><i style="--a:#f472b6;--b:#7c3aed"></i><i style="--a:#fb923c;--b:#db2777"></i><i style="--a:#34d399;--b:#0284c7"></i><i style="--a:#fbbf24;--b:#ea580c"></i></div>About this carousel
A horizontal strip of tall cards that snap to the centre as you scroll, with a peek of the next card.
How it works
A flex container scrolls horizontally with scroll-snap-type x mandatory, and each card snaps to the centre. Side padding lets the next card peek in, and the scrollbar is hidden.
Ways to customise it
- Add more cards.
- Change the 140px card width.
- Use proximity instead of mandatory.
Good to know
Scrollbars are hidden visually only, and the area is still scrollable by touch, trackpad and keyboard when focusable. Add tabindex 0 if it should be focusable.
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.