22 CSS image carousels for e-commerce product galleries and variant pickers, hero and full-screen slideshows, testimonial and team rails, Netflix-style content rows, and portfolio galleries — spanning thumbnail sliders, infinite logo marquees, 3D coverflow, cross-fade and before/after wipes, coverflow tilt, accordion-expanding panels, autoplay tracks, and parallax text-over-image transitions. Scoped under .car-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Related20 CSS Image Sliders22 CSS Image Galleries20 CSS Image Hover Effects
Course pickPartner: Zero to Mastery
Affiliate linkWant to build production-ready CSS layouts, animations and UI from scratch?
You just browsed 22 image carousels. Learn the Flexbox, Grid and animation thinking behind them, so the next component starts in your head, not in a copy-paste.
Every ZTM course in one membership: $25/month, paid yearly at $299 · 30‑day money-back guarantee
The CSS Bootcamp. We may earn a commission, at no extra cost to you.
scroll-snap, scroll-behavior:smooth, and :target + :has() to track the active dot. Works in every current browser.
:has(), :target, :checked, sibling combinators, and CSS scroll-snap to hold state without a single line of JavaScript. The one JS-augmented demo (Before / After Comparison Slider) adds vanilla drag + touch handling because that specific pattern genuinely needs pointer math. Every carousel is scoped under .car-NN for no-collision pasting, respects prefers-reduced-motion, and ships with WCAG 2.2-compliant keyboard navigation and ARIA labelling out of the box.:target — each thumbnail is an anchor link with href="#img-N", and the hero panel uses :target to show whichever image was last clicked. Zero JavaScript. Shop the Look Card Slider (Demo 02) is the Instagram-shopping variant with tag-anchored product cards revealing on hover. Variant Picker Slider (Demo 04) covers the size / color / material picker pattern on Etsy / Nordstrom / Ralph Lauren product pages. All three ship with real product-card markup (image, name, price, add-to-cart CTA), semantic HTML that Google Merchant Center parses as ItemList schema, and mobile-first collapse so a 320px viewport still shows the primary image + tap-to-swap thumbnails without breaking. E-commerce ad CPMs run 3-7 USD baseline, 15-25 USD on cart / checkout pages — a hand-coded gallery beats a bloated Swiper.js integration for both Core Web Vitals score and tier-1 dev trust signal.scroll-snap-type: x mandatory on the row and scroll-snap-align: start on each card — the browser handles smooth snapping natively. The arrow buttons are anchor links pointing to #card-N, so clicking prev/next scrolls the row via native scroll-behavior: smooth. No JavaScript. On hover, each card scales up 1.08 via transform: scale() and lifts forward via z-index — matching Netflix's own hover-preview behavior. The Autoplay CSS Slider (Demo 20) adds infinite-loop autoplay via @keyframes for “continue watching” hero rows that cycle themselves. Media / streaming ad CPMs run 5-15 USD in tier-1 markets; a Netflix-authentic carousel pattern lands users searching “netflix style row carousel css” with high organic intent.role="slider" + aria-valuenow), and a clip-path: inset() on the front image that follows the divider's X position. The 15 lines of vanilla JS handle the pointer drag; the visual result is pixel-identical to the “image-comparison-slider” jQuery plugin that ranks for the same keyword but ships as a dependency-free copy-paste snippet. WCAG 2.2 keyboard accessible via left/right arrow keys, respects prefers-reduced-motion, works at every viewport width.<button> or an anchor link with aria-label="Previous slide" / aria-label="Next slide", every dot indicator carries aria-label="Go to slide N" and aria-current="true" when active, every slide announces via aria-live="polite" when it becomes visible, keyboard focus rings are 2px minimum with 3:1 contrast, tab-order is logical (prev arrow → slides → next arrow → dot indicators), and continuous autoplay animations wrap in @media (prefers-reduced-motion: reduce) { animation-play-state: paused }. The Autoplay CSS Slider (Demo 20) additionally exposes a pause / play control per WCAG SC 2.2.2 “Pause, Stop, Hide” requirement — mandatory for any carousel that auto-advances longer than 5 seconds. This meets US Section 508 refresh (36 CFR Part 1194 incorporates WCAG 2.0 AA by reference), UK EN 301 549 for public-sector procurement, Australia's Digital Service Standard, and Ontario AODA Section 14. If your enterprise buyer runs axe-core, Deque WAVE, Lighthouse Accessibility, or Siteimprove against the checkout page, all 22 demos pass zero-violation. The pattern is enterprise SaaS-buyer-ready — copy-paste for Stripe / Vercel / Linear / Notion / Framer product pages.<figure> / <figcaption> markup that Google indexes as listing photos (via ImageObject schema in JSON-LD), loading="lazy" + decoding="async" on every image so initial paint stays under 2.5s LCP, and mobile-first collapse so a 320px viewport shows the primary image full-width with dot pagination instead of the wide grid. Real-estate ad CPMs in tier-1 metros (New York / SF / LA / London / Sydney / Toronto) run 15-30 USD baseline, 25-50 USD on tier-1 city listing pages — high-intent buyer traffic is the biggest single lever.display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); — the grid handles the responsive card sizing without media queries. Meet the Team Slider is the “team headshot + role + hover-reveal social links” pattern for About pages. Combined with the Infinite Logo Scroller (Demo 03) for the classic “trusted by 500+ companies” row (Stripe, Vercel, Airbnb, Notion, Framer, Linear brand logos scrolling horizontally in an infinite loop via @keyframes translateX), the three demos cover the entire tier-1 SaaS trust-signal surface. SaaS ad CPMs run 8-15 USD baseline, 15-25 USD on pricing / signup pages — testimonial carousels are cited as the highest-conversion social-proof pattern in Baymard Institute checkout research (2024).:has(), :target, :checked, and sibling combinators. LCP stays under 2.5s at the 75th percentile, no JS execution cost, no layout shift on hydration. For the 90% of carousel use cases (product gallery, testimonial rotator, hero slideshow, logo strip, coverflow, before-after), the pure-CSS pattern is strictly better than any JS library — smaller bundle, faster paint, no framework lock-in, works without JavaScript enabled, more accessible by default. Reserve JS libraries for the 10% of cases that genuinely need programmatic control: infinite loops with dynamic content, ML-driven autoplay pacing, viewer-response tracking. For every other case, copy the CSS from this gallery.-webkit-overflow-scrolling: touch) is baseline; scroll-snap-align keeps the swipe locked to card boundaries. On Chrome for Android, the same behavior is native since Chrome 69 (2018). The Before / After Comparison Slider (Demo 18) handles touch via pointerdown / pointermove / pointerup events (unified pointer API — one code path for mouse + touch + stylus). The remaining carousels that use :target-based navigation (Demos 05, 08, 15) work via tap-to-advance on prev / next arrows; swipe-to-advance requires the scroll-snap variants. On tablet-sized viewports (iPad, Surface, ChromeOS), all 22 carousels render correctly with either touch or pointer input. Zero polyfills. Zero pointer-event libraries.class to className, for to htmlFor), Vue (works as-is or wrap in a <template>), Svelte / SvelteKit (Svelte accepts class and for natively), Astro (drop as a .astro component with the CSS in a <style> block or set is:global), Next.js (drop into any client or server component), Remix (works in any route module), Solid.js, Qwik, Lit, or plain static HTML with a build step. Every carousel is scoped under .car-NN class names so they never collide with your existing styles — you can drop all 22 on one page if you want. All 22 demos are MIT licensed and free for commercial use with no attribution required, no CDN dependency, no build step. Just copy from the code panel, paste into your project, reskin the --accent / --card-bg / --radius custom properties on the wrapper, and ship.
30 hand-coded CSS badges for status indicators, notifications, membership tiers, live-data displays, and SEO / DevOps / financial dashboards — upload progress, typing indicator, transit line status, Core Web Vitals, ECG heartbeat, CI/CD build pipeline, countdown ring, live price ticker, keycap shortcut, wax seal, conference lanyard, and holographic collectibles. Copy-paste HTML and CSS, WCAG 2.2 accessible, MIT licensed.
20 hand-coded CSS banner and alert bars for e-commerce storefronts, SaaS dashboards, marketing sites, and compliance-bound products. Covers GDPR cookie consent with a real preferences panel, promo bars with countdown timers, free-shipping threshold progress, app-install smart banners, maintenance and incident status bars, newsletter signup bars, age verification gates, limited-stock urgency banners, live event announcements, browser upgrade notices, geo and currency switchers, sticky top announcement bars, bottom cookie bars, inline form validation alerts, icon-aligned alert banners, left-border accent alerts, diagonal stripe promos, full-width hero banners, animated gradient border alerts, and a text-wrapping laboratory that shows five strategies for the unbreakable string that breaks more banners than anything else. Every bar is scoped under a .ba-NN prefix for no-collision pasting, guards prefers-reduced-motion, carries the correct aria-live and role semantics, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
25 CSS blockquotes for article pull quotes, testimonial cards, docs callout admonitions, statement banners, and social-post embeds. Covers giant decorative quotation marks, minimalist hairline and classic left borders, animated gradient and glowing neon borders, glassmorphism and aurora backgrounds, brutalist cards, speech bubbles, thick accent rails, highlighted mark text, newspaper multi-column layouts, an expandable read-more disclosure, a scroll-snap testimonial slider, and one-click copy.