Pure CSS Carousels
CSS carousels rotate through slides automatically or on click, built from @keyframes, scroll snapping or the radio-button technique instead of a JavaScript library.
9 free examples, most liked first. Click one to preview it and copy the code.
Peek Card Carousel
by @admin · Cards
Radio Fade Carousel
by @admin · Carousel
Snap Photo Strip
by @admin · Carousel
Scroll Snap Carousel
by @admin · Carousel
Snap Scroll Chip Shelf
by @admin · Carousel
Crossfade Banner Rotator
by @admin · Carousel
Stacked Card Chooser
by @admin · Carousel
Vertical Snap Story Slider
by @admin · Carousel
Fading Quote Rotator
by @admin · Carousel
Learn how it works
Read the step-by-step guide: How to Make a CSS-Only Slider with Scroll Snap
Carousels FAQ
Is it possible to build a carousel without JavaScript?
Yes. Scroll snapping gives swipeable slides, and @keyframes can auto-advance them. The carousel examples here show both.
How do I use these pure CSS carousels?
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.