Pure CSS Sliders
CSS sliders show images or content one panel at a time and move between them using radio inputs, scroll snapping or keyframes, with no slider plugin.
9 free examples, most liked first. Click one to preview it and copy the code.
Styled Range Slider
by @admin · Slider
Radio Fade Carousel
by @admin · Carousel
Before And After Reveal
by @admin · Slider
Mood Range Slider
by @admin · Slider
Range Slider With Filled Track
by @admin · Slider
Dot Pagination Indicator
by @admin · Navigation
Vertical Snap Story Slider
by @admin · Carousel
Vertical Volume Fader
by @admin · Slider
Before After Toggle
by @admin · Buttons
Learn how it works
Read the step-by-step guide: How to Make a CSS-Only Slider with Scroll Snap
Sliders FAQ
How do I make an image slider with only CSS?
Use scroll-snap on a horizontal container, or radio inputs that switch the visible slide. Both approaches are covered by the slider examples here.
How do I use these pure CSS sliders?
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.