40 CSS Slider Examples: Pure CSS Carousels & Image Sliders for 2026
By Alison Brunk
CSS sliders let you show content like images, text, or videos in a sliding or rotating format. They’re often used for image galleries, product showcases, testimonials, featured articles, or banners. Sliders allow you to present multiple items in the same space while keeping the page visually engaging.
In this article, we’ll explore 40 examples of CSS sliders, from basic image sliders to more creative designs.
Check out these 50 creative CSS image effects!
Sliders are just one of the many components you can create with images. Our article on CSS image effects showcases 50 ways you can make these images come alive. Check it out!
40 examples of CSS sliders
Let's check out 40 creative examples of CSS sliders to give you some inspiration for your own projects.
1. Simple pure-CSS carousel
CodePen by Dang Van Thanh
Simple Carousel Pure CSS
Interactive CodePen loads when it gets near the viewport.
2. Real simple slider
CodePen by Chris Coyier
Real Simple Slider
Interactive CodePen loads when it gets near the viewport.
3. CSS-only carousel slider
CodePen by Christian "Schepp" Schaefer
A CSS-only Carousel Slider
Interactive CodePen loads when it gets near the viewport.
4. Responsive slideshow carousel with only HTML and CSS
CodePen by Trung Vo
Responsive Slideshow / Carousel with only HTML5 & CSS3
Interactive CodePen loads when it gets near the viewport.
5. Pure CSS linear carousel
CodePen by Paul Noble
Pure CSS, annotated linear carousel
Interactive CodePen loads when it gets near the viewport.
6. Flickity - wrapAround
CodePen by Dave DeSandro
Flickity - wrapAround
Interactive CodePen loads when it gets near the viewport.
7. Pure CSS image slider
CodePen by Ruediger Stursberg
Pure CSS Featured Image Slider
Interactive CodePen loads when it gets near the viewport.
8. Pure CSS testimonial slider
CodePen by MAHESH AMBURE
Testimonial Slider Pure CSS
Interactive CodePen loads when it gets near the viewport.
9. Scrolly carousel example
CodePen by Robin Rendle
Scrolly carousel: example 6
Interactive CodePen loads when it gets near the viewport.
10. Pure CSS slider with custom effects
CodePen by Nikolay Talanov
Pure css slider with custom effects
Interactive CodePen loads when it gets near the viewport.
First time here? Discover what Prismic can do!
👋 Meet Prismic, your solution for creating performant websites! Developers, build with your preferred tech stack and deliver a visual page builder to marketers so they can quickly create on-brand pages independently!
11. Pure CSS horizontal slide
CodePen by David Conner
Pure CSS Horizontal Slide
Interactive CodePen loads when it gets near the viewport.
12. Pure CSS scroll-snap carousel
CodePen by Jenning
Pure CSS scroll-snap carousel
Interactive CodePen loads when it gets near the viewport.
13. Pure CSS slider
CodePen by Ivan Grozdic
CSS Slider - pure css - #10
Interactive CodePen loads when it gets near the viewport.
14. Crack climbing carousel with CSS :has()
CodePen by Josetxu
Crack Climbing Carousel - CSS :has()
Interactive CodePen loads when it gets near the viewport.
15. Pure CSS multi-direction slider gallery
CodePen by Chris Neale
Multi Direction Slider Gallery (Pure CSS)
Interactive CodePen loads when it gets near the viewport.
16. Responsive faux 3D content scroller
CodePen by Jhey
Responsive Faux 3D Content Scroller ✨
Interactive CodePen loads when it gets near the viewport.
17. CSS Carousel with keyboard controls
CodePen by David Lewis
CSS Carousel with keyboard controls
Interactive CodePen loads when it gets near the viewport.
18. Pure CSS Bug E-commerce interactions
CodePen by Adam Kuhn
Pure CSS Bug ECommerce Interactions
Interactive CodePen loads when it gets near the viewport.
19. Pure CSS slider
CodePen by Kamil
Pure css slider
Interactive CodePen loads when it gets near the viewport.
20. 3D Cube (random) slider
CodePen by Temani Afif
3D Cube (random) slider
Interactive CodePen loads when it gets near the viewport.
21. Circular image slider with N images
CodePen by Temani Afif
Circular image Slider with N images
Interactive CodePen loads when it gets near the viewport.
22. Minimal pure CSS slider
CodePen by Elton Kamami
Minimal pure css slider
Interactive CodePen loads when it gets near the viewport.
23. All-slider CSS
CodePen by Elena
Slider CSS Only
Interactive CodePen loads when it gets near the viewport.
24. Before-after image slider
CodePen by Huw Llewellyn
Before After Image Slider (Vanilla)
Interactive CodePen loads when it gets near the viewport.
25. CSS-only image slider using SVG patterns
CodePen by Damián Muti
CSS-only image slider using SVG patterns
Interactive CodePen loads when it gets near the viewport.
26. Oceanic overlays
CodePen by Shaw
@keyframers 1.7.0 | Oceanic Overlays
Interactive CodePen loads when it gets near the viewport.
27. Yarden
CodePen by semicorpus
Yarden (Design By Olya Marchak)
Interactive CodePen loads when it gets near the viewport.
28. Slider with masked text
CodePen by Ting Chen
Masked Text w/ Navigation (CSS Only)
Interactive CodePen loads when it gets near the viewport.
29. Slider card
CodePen by Batuhan Baş
Slider Card
Interactive CodePen loads when it gets near the viewport.
30. CSS-only cupcake slider
CodePen by Jamie Coulter
CSS Only Cupcake Slider with Sprinkles!
Interactive CodePen loads when it gets near the viewport.
31. Onboarding screens
CodePen by Jebbles
Onboarding Screens
Interactive CodePen loads when it gets near the viewport.
32. Information card slider
CodePen by Andy Tran
Information Card Slider
Interactive CodePen loads when it gets near the viewport.
33. Horizontal parallax sliding slider with Swiper.js
CodePen by digistate
Horizontal parallax sliding slider with Swiper.js
Interactive CodePen loads when it gets near the viewport.
34. Slider transition (WIP)
CodePen by BryanE
Slider Transition (WIP)
Interactive CodePen loads when it gets near the viewport.
35. Smooth 3D perspective slider
CodePen by Alex Nozdriukhin
Smooth 3d perspective slider
Interactive CodePen loads when it gets near the viewport.
36. Fullscreen hero image slider
CodePen by Tobias Bogliolo
jQuery | Fullscreen Hero Image Slider (Swipe Panels Theme)
Interactive CodePen loads when it gets near the viewport.
37. Digging into the world of CSS sliders
CodePen by Nikolay Talanov
Fancy Slider
Interactive CodePen loads when it gets near the viewport.
38. Greensock animated slider
CodePen by Artur Sedlukha
Greensock animated slider
Interactive CodePen loads when it gets near the viewport.
39. Motion blur effect using SVG filters
CodePen by Damián Muti
Motion blur effect using SVG filters
Interactive CodePen loads when it gets near the viewport.
40. UI animation slider
CodePen by Mario
Exploring UI Animation #4
Interactive CodePen loads when it gets near the viewport.
Tools and libraries for creating sliders for websites
While you can build sliders from scratch, using a ready-made tool or library can save time and add extra features. Here are some solutions worth checking out:
Swiper
Swiper is one of the most popular slider libraries available and is trusted by millions of developers and brands. It’s lightweight, fast, and designed to work smoothly on both desktop and mobile devices. It supports native-like touch interactions, making it a great choice for mobile-friendly designs.
One of Swiper’s strengths is how well it integrates with modern frameworks like React, Vue, Svelte, and plain JavaScript. It’s modular, so you can include only the features you need, which helps keep your code lean.
Splide
Splide is a lightweight, flexible, and accessible slider written in TypeScript. It has no dependencies, so it’s fast, clean, and won’t trigger performance issues. At just 29kB (12kB gzipped), Splide is ideal for projects where speed and efficiency are a priority.
Splide allows you to create various sliders simply by adjusting its options. It supports multiple layouts, including vertical sliders, thumbnail navigation, nested sliders, and grid-style slides.
Splide also makes it easy to add features like autoplay with progress bars, lazy loading for images, free-drag scrolling, and right-to-left (RTL) layouts.
Glide.js
Glide.js is a lightweight, dependency-free JavaScript slider and carousel library built with flexibility and speed in mind.
Glide.js is around 28KB (~8KB gzipped) and designed to be modular. To reduce the file size even further, you can remove any modules you don’t need.
The library is extendable, allowing you to plug in your own modules for custom functionality. Features include autoplay, breakpoints, swipe gestures, and keyboard navigation. Whether you need a simple image slider or a fully customized carousel setup, Glide.js gives you the tools to build it without unnecessary extras.
Reveal.js
Technically speaking, Reveal.js isn’t a slider library in the same sense as the others we’ve covered, but it’s so popular in the developer community that it’s worth mentioning.
Reveal.js is an open-source HTML presentation framework that allows you to create slide decks using HTML, CSS, and JavaScript.
It supports themes, transitions, and interactive elements, and you can extend it with plugins or custom code to add features like code syntax highlighting and charts.
Conclusion
We’ve explored different examples of CSS sliders you can use as inspiration for your own projects, along with tools and libraries to help you build them. Whether you choose a simple, CSS-only approach or a feature-rich JavaScript library, the right slider can make your content more engaging and easier to navigate.
