20 CSS Image Sliders

The canonical zero-JS pattern is the radio-button hack (Demo 01 in this collection). Place hidden radio inputs — one per slide — before a flex track container, all sharing the same name attribute. Make the track 400% wide with each slide 25%. For each checked radio, use the general-sibling combinator (the tilde) to apply a matching translateX transform on the track. Dots are label elements pointing at each radio via the for attribute — clicking a label checks the radio, which triggers the transform. Because transform is GPU-composited, the slide transition never triggers layout or paint, so it is Core Web Vitals safe (INP under 200ms, no CLS). For prev/next arrows use the has selector to detect which radio is checked and reveal the correct pair of labels for wrap-around navigation. Keyboard support is free because the inputs are real form controls — Tab focuses them, arrow keys navigate. Add aria-label on each dot label so screen readers announce them as Slide 1 of 4, Slide 2 of 4, and so on. The whole widget is under 60 lines of CSS with zero JavaScript, zero dependencies, and zero framework lock-in. This is the pattern to use when Core Web Vitals or bundle size matter — SaaS marketing pages, e-commerce product cards, real-estate listings above the fold. If you need more than about 8 slides, switch to Demo 02 scroll-snap carousel instead (radios do not scale past 8-10 slides without repetitive CSS).

scroll-snap is the CSS-only touch carousel pattern (Demo 02 here). Set the viewport container to scroll-snap-type x mandatory with overflow-x auto, then each slide gets scroll-snap-align center. When the user drags, swipes, or scrolls, the browser natively snaps the closest slide to center — no JS scroll listener, no requestAnimationFrame, no gesture library. This is the correct choice for mobile product image carousels, thumbnail strips, story-style horizontal scrollers, and media galleries. The browser handles inertia, deceleration, snap-back, and touch momentum — all things a hand-coded JS slider gets wrong on iOS Safari. For pagination dots, wrap each slide in an anchor with href pointing to the slide id (like href hash slide-2) and give each slide a matching id — clicking the dot triggers browser-native smooth scroll-behavior scrolling to that slide. To show active state on dots, use the target pseudo-class (the anchor the URL points to) or IntersectionObserver plus a tiny active class swap (still under 10 lines of JS). Where scroll-snap loses to radio-hack sliders: no true infinite loop (would need JS to clone slides), no autoplay without JS. Where it wins: variable-width slides, more than 8 slides, touch-first mobile experiences, and screen reader compatibility (the native scroll region announces to AT). Combine with contain paint on each slide for GPU-accelerated compositing on older devices.

Demo 03 uses a native range input synced to a CSS custom property via a single oninput line — the only JS in this collection. Structure: a container with two absolutely-positioned images stacked, the top image (the after image) clipped by clip-path inset 0 var pos 0 0 where the pos custom property is the range value in percent. When the range moves, the oninput handler updates the pos custom property, revealing more or less of the before image beneath. The vertical divider bar uses left calc 100% minus var pos on a before pseudo-element. This pattern is the highest-CPM use case in this collection: $30-50 for dental and cosmetic before/after, $25-40 for plastic surgery, $15-30 for photo retouching, and $10-20 for home renovation. For accessibility, label the range input Comparison position and add aria-valuetext announcing After 50%, Before 50% so screen readers understand the interaction. The Pointer Events API is unnecessary — the native range input handles mouse, touch, and keyboard (arrow keys move 1%, Home and End jump to 0 and 100%). Add prefers-reduced-motion reduce with transition none on the clip-path so vestibular-sensitive users do not get an animated reveal. For image-heavy pages, add loading lazy plus decoding async plus fetchpriority high on the primary image so LCP stays under the 2.5s Core Web Vitals threshold. This is the pattern dental practices, cosmetic surgeons, roofing contractors, and photo editors search for constantly.

Demo 19 uses the CSS Carousel spec (Chrome 135+, Safari Technology Preview, Firefox behind a flag as of 2027-Q1) which introduces native pseudo-elements for carousel controls: scroll-marker (auto-generated pagination dots), scroll-marker-group (the dot container), and scroll-button left plus scroll-button right (native prev/next arrows). Setup: give the scroll container scroll-marker-group after and each item a scroll-marker pseudo-element with empty content. The browser generates the dots automatically, tracks which slide is centered, and highlights the active marker with scroll-marker target-current. Arrow buttons scroll to the next or previous scroll-snap position — no JS event handler needed. This is the future of CSS carousels: the entire pagination and prev/next system in about 10 lines of CSS with zero JavaScript, full keyboard support, and native screen reader announcements. For engines that do not support it yet, fall back to Demo 02 scroll-snap-only pattern (still works, just no auto-generated dots) — use the supports at-rule to gate the enhancement. Ship both: CSS Carousel spec for cutting-edge engines, scroll-snap fallback for the rest. This is the pattern to watch for the next 12 months as browser support expands: Chrome shipped it in v135, Safari Technology Preview has it, Firefox has it behind the layout css scroll-marker enabled flag. When it hits about 80% support, this becomes the default recommendation over every other carousel pattern.

Image sliders are LCP (Largest Contentful Paint) killers when built wrong — the hero image is often the LCP element, and if the slider ships 8 hi-res images upfront, the browser fetches all 8 before rendering the first one. Fix this with three techniques. First, loading lazy on every image EXCEPT the first — the first slide image should be loading eager plus fetchpriority high so it renders before LCP is measured. Second, decoding async on every image so decoding does not block the main thread. Third, provide srcset variants with sizes at 400w, 800w, and 1200w so mobile devices fetch the small variant, not the desktop hero at 2400px wide. Lock the aspect ratio with aspect-ratio 16/9 on the image itself to prevent CLS (Cumulative Layout Shift) — without this, the slider container reflows when each image loads, and CLS jumps above the 0.1 threshold. For autoplay sliders (Demo 05), pause the animation when the tab is hidden using document visibilitychange (or just rely on prefers-reduced-motion for the accessibility win). For scroll-driven sliders (Demo 20), the browser natively pauses animation-timeline view when the target is outside the viewport, so no extra work needed. Measure with Chrome DevTools Performance Insights or PageSpeed Insights — aim for LCP under 2.5s, CLS under 0.1, INP under 200ms. Image sliders are a top-3 cause of Poor CWV scores on e-commerce and real-estate sites; getting them right is worth a real ranking bump.

Demo 04 e-commerce product showcase card slider is the pattern that fits Shopify Dawn theme, WooCommerce Storefront, Stripe Checkout product cards, and BigCommerce Cornerstone. The requirements: (1) main product image with 3-5 thumbnails below in a horizontal strip (see Demo 10 for the thumbnail pagination pattern), (2) zoom-on-hover for desktop (Demo 11) with tap-to-fullscreen fallback for mobile, (3) Buy Now or Add to Cart CTA visible without scroll on the product card, (4) swipe support for mobile (scroll-snap from Demo 02), (5) alt-text on every image (SEO plus a11y). For Shopify Liquid, iterate product images in the standard for loop and inject each as a slide with an id derived from image.id. For WooCommerce, wc_get_product_gallery_image_ids returns the array; use wp_get_attachment_image per slide. For Stripe Checkout, images live in the product images array via Stripe API; render server-side into the card template. For structured data, wrap the entire product carousel in an itemscope element with itemtype schema.org Product and mark each image with itemprop image — this makes the product eligible for Google Shopping rich results with an image carousel in the SERP itself. E-commerce product carousels get $3-7 CPM standalone but drive $15-25 CPM when combined with checkout intent (add-to-cart button clicked equals commercial intent). This is the workhorse of e-commerce SEO — every Shopify store owner searches product image slider css at least once. Ship it right, get the long-tail traffic. Compliance: FTC advertising rules require product images to accurately represent the item — no misleading crops, filters, or before/after unless clearly labeled. State AG offices (CA, NY, TX) actively investigate e-commerce sites with deceptive product imagery, so tie your carousel design to your image approval workflow.

Real-estate carousels have specific requirements: (1) hero image spans the full card width edge-to-edge with no cropping (buyers judge by the first photo), (2) 6-25 photos per listing with thumbnail navigation (Demo 10 or Demo 19), (3) photo counter overlay (like 3 of 24) in the corner, (4) full-screen expand on click or tap, (5) exterior first, then kitchen, living, primary bedroom, bathrooms, backyard — semantic ordering that matches how buyers evaluate homes. Demo 06 (full-screen split hero) works for the listing hero card; Demo 08 (split-screen vertical) works for the interior photo tour; Demo 10 (thumbnail grid pagination) is the pattern Zillow, Redfin, and Realtor.com use for the full gallery below the fold. For Airbnb, Vrbo, and Booking.com short-term rentals, add photo categorization — label groups like Exterior, Kitchen, Bedroom 1, Amenities so guests can jump to what matters. For accessibility, every image needs a real descriptive alt attribute like Kitchen with quartz countertops and island seating — not Photo 3. Screen reader users make housing decisions too. For SEO, wrap the entire listing in an itemscope element with itemtype schema.org RealEstateListing and mark each image with itemprop image — this qualifies the listing for Google Search image carousel rich results. Real-estate carousels hit $15-30 CPM in the US (higher in metros — NYC, SF, LA, Seattle, Boston hit $25-50). This is a genuinely high-value pattern to ship well. Compliance: Fair Housing Act (42 U.S.C. section 3604) prohibits discriminatory imagery — do not stage listings to exclude protected classes, and never crop out accessible features (ramps, wide doorways, ground-floor entrances) in favor of cleaner architectural shots. HUD investigates listings whose carousels systematically hide accessibility features.

SaaS landing pages have three carousel patterns worth shipping together. First, logo marquee endless ticker (Demo 18) — the Trusted by Stripe, Vercel, Notion, Linear, Airbnb, Shopify trust strip. Use animation scroll 40s linear infinite on a flex row that is duplicated twice, then translate minus 50% so it loops seamlessly. Grayscale logos at 60% opacity, brand color on hover. Height 40-60px so it does not eat above-the-fold real estate. This is a required trust signal for B2B SaaS — every visitor scans the logo strip in the first 2 seconds. Second, testimonial reviews card slider (Demo 16) — the customer-quote carousel with avatar, name, company, quote, and star rating. Use scroll-snap so users can drag through them; add prev/next arrows for keyboard. Structured data: wrap each quote in an itemscope element with itemtype schema.org Review and itemprop reviewRating — this makes your testimonials eligible for Google rich results carousel. Compliance: FTC 16 CFR section 255 requires testimonials to be genuine (real customer, real experience) — no synthetic reviews, no undisclosed compensation. Add a small verified customer note near each quote. Third, app-style onboarding scroller (Demo 17) — the horizontal 3-4-panel tour Notion, Linear, and Superhuman ship on their welcome route. Each panel is a full-viewport-height feature intro with headline, screenshot, and skip button. Use scroll-snap-type y mandatory for vertical, x mandatory for horizontal. Track completion with a dots row that fills as the user scrolls. This is the pattern that drives SaaS activation — a well-built onboarding scroller lifts trial-to-paid conversion by 15-30% at scale. All three patterns pull SaaS CPMs of $15-25, testimonials touching $25-45 when the SaaS is fintech or B2B enterprise. Ship all three together and they compound as long-tail SEO surfaces.