OneTaskBy Tim King · Updated
Card Carousel
Scroll Snap Card Slider in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Card Carousel works
A card carousel is a row of cards, such as products, articles or features, that visitors swipe or step through sideways. Enter your cards, choose how many show at once and whether the next one peeks in, and copy the HTML, CSS and JavaScript.
Card sliders save vertical space on home pages and product pages, letting you show more related items without a long grid. They work well for latest posts, recommended products, case studies and feature highlights.
How the card carousel scrolls
The cards are a list laid out with CSS grid in a single row, and the list scrolls sideways with
scroll-snap-type so each swipe settles neatly on a card. Touch, trackpad and the keyboard all
work natively. The arrow buttons scroll by one full view at a time and are disabled at each end.
Showing part of the next card is a strong visual hint that there is more to see.
Clickable cards
Each card title is a real link, and a stretched pseudo-element makes the whole card clickable without wrapping everything in a link, so screen readers still read a short link name. The focus ring moves to the card outline so keyboard users see which card is selected.
FAQ
How do I use real images?
Replace the coloured .ccar-media block with an <img> that has width: 100%,
aspect-ratio: 16 / 10 and object-fit: cover. Add loading="lazy" so images further along
the carousel only load when needed.
Does the card carousel autoplay?
No. Autoplay makes cards move away while people read them and needs a pause control for accessibility. Visitors browse at their own pace with the arrows or a swipe, which usually gets more clicks.
How does it behave on phones?
Below 640 pixels the carousel shows one card at about 80 percent width, so the next card peeks in and people know to swipe. Change the width in the media query if you want larger or smaller cards.
How is this different from the testimonial carousel?
The testimonial carousel slides quotes. This one is built for linked content cards with an image area, a tag and a heading row with the arrows, which suits products, posts and features.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Testimonial Carousel
Build an accessible swipeable testimonial slider on CSS scroll snap.
Card Builder
Design a card component and copy its HTML and CSS.
Logo Scroller
Build a seamless infinite logo marquee in pure CSS.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Masonry Grid Builder
Pinterest-style masonry layouts in pure CSS.