Summarize this article with:
JavaScript isn’t always the answer.
Sometimes you need a lightweight image carousel that loads fast and works without external dependencies.
That’s where CSS slideshow examples come in.
Pure CSS sliders use keyframe animations and clever selector tricks to create fully functional slideshows, no scripts required.
They’re smaller, faster, and surprisingly capable.
This guide covers everything from basic auto-play carousels to responsive image sliders with navigation controls.
You’ll find working code examples, learn which technique fits your project, and pick up fixes for common problems like flickering and choppy transitions.
What is a CSS Slideshow
A CSS slideshow is an image carousel built entirely with HTML and CSS.
No JavaScript required.
These pure CSS sliders use CSS keyframes, transitions, and pseudo-classes to cycle through slides automatically or through user clicks.
The technique relies on opacity changes, transform translations, and animation timing to create smooth slide movement.
Common methods include radio button navigation, the checkbox hack, and infinite animation loops.
You get a lightweight, dependency-free component that loads faster than JavaScript alternatives.
Browser support is solid across Chrome, Firefox, Safari, and Edge.
CSS Slideshow examples
Watch Out, It’s an Owl!
See the Pen
Slideshow Owl Carousel + YouTube by pierrinho (@pierrinho)
on CodePen.
This Button’s Got Moves!
See the Pen
Slideshow in a button. by Martyn Knapton (@designmechanic)
on CodePen.
Slide but Make it Classy
See the Pen
Slick Slideshow with blur effect by Fabio Ottaviani (@supah)
on CodePen.
Show Off in 3D
See the Pen
Slideshow 3d showcase by Jerome Renders (@JeromeRenders)
on CodePen.
First Impressions Matter
See the Pen
Mobile First Product Slideshow Widget by Kevin Lesht (@klesht)
on CodePen.
Immerse in Nature with Every Slide
See the Pen
CSS3 Fullscreen Background Slideshow by Chris (@leetech)
on CodePen.
Gallery on the Go
See the Pen
Pure CSS Slideshow Gallery by Roko C. Buljan (@rokobuljan)
on CodePen.
Slide Peek-a-Boo
See the Pen
Slideshow CSS with img preview by Christophe Molina B. (@10tribu)
on CodePen.
Shadowplay Slide
See the Pen
Silhouette zoom slideshow by Mikael Ainalem (@ainalem)
on CodePen.
Epic Fullscreen Views
See the Pen
ScrollMagic Tutorial – Fullscreen Slideshow by Petr Tichy (@ihatetomatoes)
on CodePen.
Bubbles ‘n’ Slides
See the Pen
Bubble Slideshow Component by Erik Jung (@erikjung)
on CodePen.
Slide, Burger, Repeat
See the Pen
Fullscreen slideshow with menu by Hitz Kareaga (@hitzkareaga)
on CodePen.
Apple Goodness on Display
See the Pen
Apple devices slide show by Comehope (@comehope)
on CodePen.
Smooth Moves with Fading
See the Pen
Fading Slideshow by Cliff Pyles (@cliffpyles)
on CodePen.
Parallax Vibes with a Twist’
See the Pen
Slideshow Parallax with TweenMax by Bruno Carvalho (@bcarvalho)
on CodePen.
Tabs Are the New Cool
See the Pen
Hero Slideshow by André Villela (@dedevillela)
on CodePen.
Seeing Double with Dual Panes
See the Pen
Dual Slideshow Demo by Jacob Davidson (@Reklino)
on CodePen.
It’s a Split Decision
See the Pen
Split-screen Slideshow by Sean Free (@seanfree)
on CodePen.
Back to Basics, CSS Style
See the Pen
CSS-only slideshow by Johan Lagerqvist (@lgrqvst)
on CodePen.
Distort, but Make It Artsy
See the Pen
Distorted Gallery by Nikolay Talanov (@suez)
on CodePen.
Slide on Auto… or Not
See the Pen
Auto/Manual Image Slideshow by Matt Fried (@mattfried)
on CodePen.
Nautilus Slideshow
See the Pen
Nautilus Slideshow by Nikolas Payne (@npayne)
on CodePen.
SlideShow Animated
See the Pen
SlideShow Animated by Manu K (@manukn)
on CodePen.
Responsive Vanilla JS Slideshow
See the Pen
Responsive Vanilla JS Slideshow by Arden (@aderaaij)
on CodePen.
Geometrical Birds – Slideshow
See the Pen
Geometrical Birds – slideshow by Mikael Ainalem (@ainalem)
on CodePen.
Cycle Slideshow Slider
See the Pen
Cycle Slideshow Slider by Bram de Haan (@atelierbram)
on CodePen.
Untitled Slider
See the Pen
Untitled Slider by Nathan Taylor (@nathantaylor)
on CodePen.
Tweenmax Slideshow
See the Pen
Tweenmax slideshow by Matheus Verissimo (@astrixsz)
on CodePen.
How Does a CSS Slideshow Work
CSS slideshows work by stacking multiple slides in a container and revealing one at a time.
The magic happens through @keyframes rules that control which slide shows and when.
Each slide gets positioned absolutely within a relative parent container.
Animation properties handle the timing: animation-duration sets how long each slide displays, animation-delay staggers the sequence, and animation-iteration-count keeps it looping.
For manual navigation, radio inputs paired with labels let users click between slides.
The :checked pseudo-class triggers CSS animation changes on the corresponding slide.
Adjacent sibling selectors (~) connect the hidden radio buttons to visible slide elements.
Transitions smooth out the visual changes between states, whether you’re fading opacity or sliding with translateX.
Types of CSS Slideshows
Pure CSS Auto-Play Slideshow
Uses keyframe animations to rotate slides without any user input.
Set animation-duration to control display time per slide, typically 3-5 seconds works well.
Best for hero banners and background image carousels where passive viewing is expected.
CSS Slideshow with Navigation Buttons
Three main approaches here.
Radio input method: Hidden radio buttons with styled labels create clickable navigation dots or arrows.
The :checked selector reveals the active slide.
Checkbox method: Similar principle, useful when you need toggle behavior.
:target selector method: Uses URL fragments to switch slides, good for shareable slide links but adds browser history entries.
CSS Slideshow with Thumbnails
Combines a main display area with smaller clickable preview images.
Thumbnail CSS gallery navigation works through the same radio button technique.
Requires more markup but gives users clear visual control over slide selection.
Fade Transition Slideshow
Slides crossfade by animating opacity from 0 to 1.
Stack all slides in the same position using position: absolute.
Keyframes handle the timing: each slide fades in, holds, then fades out while the next begins its fade-in sequence.
Smooth and elegant, works well for testimonial carousels and product showcases.
Slide Transition Slideshow
Moves slides horizontally or vertically using transform: translateX() or translateY().
Container needs overflow: hidden to clip slides outside the visible area.
Horizontal sliding feels more natural for image sliders; vertical works better for news tickers and content rotators.
Timing functions like ease-in-out or cubic-bezier create natural movement curves.
How to Create a CSS Slideshow
What HTML Structure Does a CSS Slideshow Need
Start with a wrapper div that contains everything.
Inside, place your radio inputs (one per slide), followed by the slides themselves, then navigation labels.
Basic structure:
- Wrapper container with position: relative and overflow: hidden
- Radio inputs with unique IDs, hidden with display: none
- Slide elements containing images or content
- Label elements linked to radio inputs via the for attribute
Keep radio inputs at the same DOM level as slides so sibling selectors work properly.
Which CSS Properties Control Slideshow Animation
Core properties you’ll use constantly:
- animation: shorthand combining name, duration, timing-function, delay, iteration-count, direction
- transition: smooth property changes over time
- transform: translateX, translateY, scale for movement
- opacity: fade effects between slides
Timing functions matter more than people realize.
Linear feels robotic; ease-in-out creates natural acceleration and deceleration.
For custom curves, cubic-bezier lets you fine-tune the motion profile.
How to Add Navigation Controls Without JavaScript
Radio buttons are your best friend here.
Hide them visually, style their associated labels as dots, arrows, or thumbnails.
When a user clicks a label, the corresponding radio gets checked.
Use the general sibling combinator to target slides:
#slide1:checked ~ .slides .slide1 { opacity: 1; }
For previous/next arrows, position labels absolutely and use CSS arrows created with borders or SVG icons.
Indicator dots typically sit centered below the slideshow, styled as small circles that change color on :checked state.
CSS Slideshow Code Examples
Basic Auto-Play CSS Slideshow Code
This example creates a fade animation slideshow that cycles through images automatically.
Each slide fades in, holds for a few seconds, then fades out as the next appears.
The keyframe animation handles all timing without any user interaction needed.
Container uses position: relative with a fixed aspect ratio.
Slides stack via position: absolute with opacity: 0 as default state.
Animation-delay on each slide creates the staggered sequence.
CSS Slideshow with Arrow Navigation Code
Adds clickable left/right arrows for manual slide control.
Radio inputs connect to arrow labels positioned on either side of the slideshow.
The trick: each slide needs two arrows pointing to adjacent slides.
Slide 2’s left arrow targets slide 1’s radio; right arrow targets slide 3’s radio.
Style arrows with CSS hover effects for better user experience.
Semi-transparent backgrounds help arrows stay visible against varying image colors.
Responsive CSS Slideshow Code
Making your image slider work across devices requires media queries and fluid sizing.
Use percentage widths on the container, max-width to prevent excessive scaling on large screens.
Images need width: 100% and object-fit: cover to maintain aspect ratio without distortion.
Navigation elements should scale with viewport units or remain touch-friendly sizes (minimum 44px tap targets).
Consider mobile-first design: start with the mobile layout, then add complexity for larger screens.
Test on actual devices, not just browser resize.
What Are the Differences Between CSS and JavaScript Slideshows
Both approaches get the job done, but the tradeoffs matter depending on your project.
Performance: Pure CSS sliders load faster, no external scripts to parse or execute.
JavaScript carousels add weight, though modern libraries have gotten leaner.
Functionality: JavaScript carousels offer touch/swipe gestures, dynamic slide loading, and complex navigation patterns.
CSS-only solutions can’t detect swipe events or load content via API calls.
Browser support: CSS animations work everywhere modern.
JavaScript solutions sometimes need polyfills for older browsers.
File size: A CSS slideshow adds maybe 2-3KB to your stylesheet.
Swiper.js alone is 140KB+ uncompressed.
Control precision: JavaScript gives frame-by-frame control, pause on hover, keyboard navigation, and callback functions.
CSS offers less granular control but handles most standard use cases.
Web accessibility: Both require effort; neither is accessible by default.
Which CSS Slideshow Technique Is Best
Depends entirely on what you’re building.
Auto-play fade slideshows work best for hero image banners where users passively view content.
Homepage backgrounds, testimonial rotators, ambiance imagery.
Radio button navigation suits product showcases and portfolio galleries where users want control.
E-commerce product sliders, team member displays, feature highlights.
Thumbnail navigation fits when users need visual preview of all slides.
Photo galleries, lookbooks, before/after comparisons.
Horizontal slide transitions feel natural for sequential content.
Step-by-step guides, timeline presentations, story-driven layouts.
Match the technique to user intent, not personal preference.
How to Make a CSS Slideshow Accessible
Most CSS slideshows fail accessibility audits out of the box.
Fix that.
Keyboard navigation: Radio buttons are naturally keyboard-accessible, Tab moves between them, Space/Enter activates.
Keep radio inputs in the DOM; hide them visually with clip or position off-screen, not display: none.
Focus states: Style :focus on navigation elements with visible outlines.
Users navigating by keyboard need to see where they are.
Reduced motion: Respect prefers-reduced-motion media query.
Disable animations or reduce their intensity for users who’ve set this preference.
ARIA labels: Add aria-label to navigation buttons describing their function.
“Go to slide 1” beats “Dot 1″ for screen reader users.
Consider adding role=”region” and aria-roledescription=”carousel” to the container.
Check the web accessibility checklist for complete coverage.
How to Make a CSS Slideshow Responsive
Container needs percentage-based width with max-width constraint.
100% width up to 1200px keeps things readable on all screens.
Images require width: 100% and height: auto, or use object-fit: cover with fixed aspect ratio containers.
Responsive design isn’t just scaling down.
Navigation arrows might need repositioning or resizing on mobile.
Dots should remain tappable (44x44px minimum touch target).
Consider responsive typography for any text overlays on slides.
Viewport units (vw, vh) help scale elements proportionally.
Test on actual phones, tablet emulators miss real-world quirks.
Common CSS Slideshow Problems and Solutions
Why Is My CSS Slideshow Flickering
Usually a rendering issue during animation transitions.
Add will-change: transform or will-change: opacity to animated elements; this hints browsers to optimize rendering.
Also try backface-visibility: hidden on slides, prevents flicker during 3D transforms.
Why Are My Slides Not Transitioning Smoothly
Check your timing function.
Linear timing creates mechanical movement; switch to ease-in-out or custom cubic-bezier curves.
If slides snap instead of animate, you might be missing the transition property or have conflicting animation-fill-mode values; set animation-fill-mode: forwards to hold the final state.
How to Fix CSS Slideshow Overlapping Images
Slides need position: absolute inside a position: relative container.
Without this, slides stack vertically instead of layering.
Z-index controls stacking order; active slide needs highest value.
Set inactive slides to opacity: 0 or transform: translateX(100%) to hide them properly.
Container must have overflow: hidden to clip slides outside the visible frame.
Check that all slides have identical dimensions, mismatched sizes cause layout shifts.
FAQ on CSS Slideshows
Can you make a slideshow with just CSS?
Yes. Pure CSS slideshows use @keyframes animations and the :checked pseudo-class to cycle through slides without JavaScript.
Radio buttons with styled labels handle navigation, while opacity and transform properties create smooth transitions between images.
How do I make a CSS slideshow autoplay?
Set animation-iteration-count to infinite on your keyframe animation.
Use animation-delay on each slide to stagger their appearance, creating an automatic rotation loop that cycles continuously without user interaction.
What is the best CSS property for slide transitions?
Opacity works best for fade effects; transform: translateX() handles horizontal sliding.
Combine with transition or animation properties and timing functions like ease-in-out or cubic-bezier for smooth, natural movement.
How do I add navigation buttons to a CSS slideshow?
Use hidden radio inputs linked to visible label elements styled as arrows or dots.
The :checked selector combined with sibling combinators (~) reveals the corresponding slide when users click navigation controls.
Why is my CSS slideshow flickering?
Flickering usually comes from rendering issues during animation.
Add will-change: transform and backface-visibility: hidden to animated slides. This prompts hardware acceleration and eliminates visual glitches during transitions.
Are CSS slideshows responsive?
They can be.
Use percentage widths, viewport units, and object-fit: cover on images. Adjust navigation sizing with breakpoints to maintain touch-friendly tap targets on mobile devices.
How many slides can a CSS slideshow handle?
No hard limit exists, but performance drops with excessive slides.
More slides mean longer keyframe animations and complex timing calculations. Stick to 5-10 slides for optimal loading speed and smooth playback.
Can CSS slideshows be accessible?
Yes, with effort.
Keep radio inputs in the DOM for keyboard access, add aria-labels to controls, style visible focus states, and respect the prefers-reduced-motion media query for motion-sensitive users.
What is the checkbox hack for CSS slideshows?
The checkbox hack uses hidden checkbox inputs and the :checked pseudo-class to toggle slide visibility.
Labels trigger state changes on click, and sibling selectors apply styles to reveal the targeted slide content.
Should I use CSS or JavaScript for a slideshow?
CSS suits simple auto-play carousels and basic navigation needs with faster load times.
Choose JavaScript when you need swipe gestures, dynamic content loading, or complex interactive elements beyond CSS capabilities.
Conclusion
These CSS slideshow examples prove you don’t need heavy libraries for a functional image carousel.
Pure CSS sliders deliver fast load times, zero dependencies, and solid cross-browser compatibility.
Pick the technique that matches your project: auto-play fade transitions for landing page heroes, radio button navigation for product showcases, thumbnail galleries for portfolio displays.
Don’t skip accessibility.
Add keyboard support, visible focus states, and respect prefers-reduced-motion.
When flickering or choppy animations appear, will-change and backface-visibility usually fix the rendering issues.
Start simple with a basic fade slideshow, then layer in navigation controls as needed.
The code stays lean, the user interface stays smooth, and your pages load faster without script overhead.
