22 Tailwind CSS Image Carousel
07 / 22

All 22 in 22 Tailwind CSS Image Carousel

  1. 01Tailwind E-commerce Product Gallery Carousel with Thumbnails
  2. 02Tailwind Shop the Look Multi-Item Card Slider with Scroll Snap
  3. 03Tailwind Infinite Logo Scroller Marquee with No JavaScript
  4. 04Tailwind Product Colour Variant Picker Slider
  5. 05Tailwind Full-Screen Hero Slideshow with Auto Cross-Fade
  6. 06Tailwind Testimonial Card Carousel with Star Ratings
  7. 07Tailwind Meet the Team Profile Slider with Circular Portraits
  8. 08Tailwind Portfolio Gallery Slider with Hover Caption Reveal
  9. 09Tailwind Netflix-Style Content Row Carousel with Hover Expand
  10. 10Tailwind Magazine Split-Screen Article Slider
  11. 11Tailwind Onboarding Slider with Native CSS Scroll-Marker Dots
  12. 12Tailwind Vertical Image Carousel with Y-Axis Scroll Snap
  13. 13Tailwind 3D Coverflow Carousel with Perspective Transforms
  14. 14Tailwind Cross-Fade Image Slideshow with Manual Controls
  15. 15Tailwind Dual Opposite-Direction Marquee Slider
  16. 16Tailwind Dot Pagination Carousel with Target and Has Selectors
  17. 17Tailwind Prev / Next Arrow Carousel with Native Scroll Buttons
  18. 18Tailwind Before / After Image Comparison Slider
  19. 19Tailwind Accordion Expanding Image Panel Carousel
  20. 20Tailwind Autoplay Slider with Keyframe Track and Progress Bars
  21. 21Tailwind Zoom-on-Hover Image Gallery Slider
  22. 22Tailwind Parallax Text-Over-Image Story Slider
Pure TailwindMIT licensed

Tailwind Meet the Team Profile Slider with Circular Portraits

A gently gliding rail of circular staff portraits with names and roles — the 'our people' section on about pages. The whole interaction is two group-hover/group-focus-within pairs, which is the port at its most ordinary and most convincing.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tcar-07 w-full min-h-svh grid place-items-center bg-tcar07-bg font-tcar07-sans px-3 py-10" aria-label="Meet the team">
  <ul tabindex="0" role="group" aria-label="Team members, scrollable" class="list-none flex gap-5 w-[min(720px,100%)] overflow-x-auto px-4 pt-4 pb-6 m-0 snap-x snap-mandatory [scroll-padding:16px] [scrollbar-width:thin] [scrollbar-color:var(--color-tcar07-track)_transparent] focus-visible:outline-3 focus-visible:outline-tcar07-acc focus-visible:outline-offset-2 focus-visible:rounded-2xl">
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-1/300/300" width="300" height="300" decoding="async" alt="Portrait of Dana Osei" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Dana Osei</h4><p class="text-[12.5px] text-tcar07-mute m-0">Head of Design</p>
    </li>
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-2/300/300" width="300" height="300" loading="lazy" decoding="async" alt="Portrait of Ravi Menon" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Ravi Menon</h4><p class="text-[12.5px] text-tcar07-mute m-0">Principal Engineer</p>
    </li>
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-3/300/300" width="300" height="300" loading="lazy" decoding="async" alt="Portrait of Elin Broer" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Elin Broer</h4><p class="text-[12.5px] text-tcar07-mute m-0">Product Manager</p>
    </li>
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-4/300/300" width="300" height="300" loading="lazy" decoding="async" alt="Portrait of Tomas Vega" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Tomas Vega</h4><p class="text-[12.5px] text-tcar07-mute m-0">UX Researcher</p>
    </li>
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-5/300/300" width="300" height="300" loading="lazy" decoding="async" alt="Portrait of Yuki Sato" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Yuki Sato</h4><p class="text-[12.5px] text-tcar07-mute m-0">Design Engineer</p>
    </li>
  </ul>
</section>
@import "tailwindcss";

@theme {
  --color-tcar07-bg: #eef4f4;
  --color-tcar07-bg: oklch(0.96 0.012 200);
  --color-tcar07-ph: #d7e6e6;
  --color-tcar07-ph: oklch(0.91 0.02 200);
  --color-tcar07-track: #c4dada;
  --color-tcar07-track: oklch(0.86 0.025 200);
  --color-tcar07-ink: #1c3535;
  --color-tcar07-ink: oklch(0.29 0.03 195);
  --color-tcar07-mute: #4f6b6b;
  --color-tcar07-mute: oklch(0.48 0.03 195);
  --color-tcar07-acc: #3f9c9c;
  --color-tcar07-acc: oklch(0.6 0.13 200);
  --font-tcar07-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tcar-07 {
  width: 100%;
  min-height: 100svh;
}

.tcar-07 ::selection {
  background: var(--color-tcar07-acc);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .tcar-07 ul {
    scroll-behavior: auto;
  }
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tcar07-bg: #eef4f4;
  --color-tcar07-bg: oklch(0.96 0.012 200);
  --color-tcar07-ph: #d7e6e6;
  --color-tcar07-ph: oklch(0.91 0.02 200);
  --color-tcar07-track: #c4dada;
  --color-tcar07-track: oklch(0.86 0.025 200);
  --color-tcar07-ink: #1c3535;
  --color-tcar07-ink: oklch(0.29 0.03 195);
  --color-tcar07-mute: #4f6b6b;
  --color-tcar07-mute: oklch(0.48 0.03 195);
  --color-tcar07-acc: #3f9c9c;
  --color-tcar07-acc: oklch(0.6 0.13 200);
  --font-tcar07-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tcar-07 {
  width: 100%;
  min-height: 100svh;
}

.tcar-07 ::selection {
  background: var(--color-tcar07-acc);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .tcar-07 ul {
    scroll-behavior: auto;
  }
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The group moved from the rail to each card. Per-card groups are what let one hovered portrait light its own ring while its neighbours stay put — a single group on the rail would light all five.
  • The accent ring is a fourth shadow layer rather than a border, so the ring appears without changing the element's box and nothing reflows.
  • UI change from the CSS original: the role text darkened from #5c7676 to oklch(0.48 0.03 195). At 12.5px the original measured 3.6:1 against the tinted background; it now clears 4.5:1.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Meet the Team Profile Slider with Circular Portraits
Source: https://codefronts.com/snippets/tailwind-css-image-carousel/tailwind-meet-the-team-profile-slider/

A gently gliding rail of circular staff portraits with names and roles — the 'our people' section on about pages. The whole interaction is two group-hover/group-focus-within pairs, which is the port at its most ordinary and most convincing.
## HTML
```html
<section class="tcar-07 w-full min-h-svh grid place-items-center bg-tcar07-bg font-tcar07-sans px-3 py-10" aria-label="Meet the team">
  <ul tabindex="0" role="group" aria-label="Team members, scrollable" class="list-none flex gap-5 w-[min(720px,100%)] overflow-x-auto px-4 pt-4 pb-6 m-0 snap-x snap-mandatory [scroll-padding:16px] [scrollbar-width:thin] [scrollbar-color:var(--color-tcar07-track)_transparent] focus-visible:outline-3 focus-visible:outline-tcar07-acc focus-visible:outline-offset-2 focus-visible:rounded-2xl">
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-1/300/300" width="300" height="300" decoding="async" alt="Portrait of Dana Osei" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Dana Osei</h4><p class="text-[12.5px] text-tcar07-mute m-0">Head of Design</p>
    </li>
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-2/300/300" width="300" height="300" loading="lazy" decoding="async" alt="Portrait of Ravi Menon" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Ravi Menon</h4><p class="text-[12.5px] text-tcar07-mute m-0">Principal Engineer</p>
    </li>
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-3/300/300" width="300" height="300" loading="lazy" decoding="async" alt="Portrait of Elin Broer" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Elin Broer</h4><p class="text-[12.5px] text-tcar07-mute m-0">Product Manager</p>
    </li>
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-4/300/300" width="300" height="300" loading="lazy" decoding="async" alt="Portrait of Tomas Vega" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Tomas Vega</h4><p class="text-[12.5px] text-tcar07-mute m-0">UX Researcher</p>
    </li>
    <li class="group flex-none basis-[150px] snap-center text-center transition-[scale] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:scale-[1.06] focus-within:scale-[1.06] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-within:scale-100">
      <img src="https://picsum.photos/seed/team-5/300/300" width="300" height="300" loading="lazy" decoding="async" alt="Portrait of Yuki Sato" class="size-[130px] mx-auto rounded-full object-cover border-4 border-white bg-tcar07-ph shadow-[0_14px_30px_-18px_oklch(0.35_0.05_200/0.7)] transition-shadow duration-300 group-hover:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)] group-focus-within:shadow-[0_18px_34px_-14px_oklch(0.35_0.05_200/0.6),0_0_0_4px_var(--color-tcar07-acc)]">
      <h4 class="mt-4 mb-0.5 text-[15px] font-bold text-tcar07-ink">Yuki Sato</h4><p class="text-[12.5px] text-tcar07-mute m-0">Design Engineer</p>
    </li>
  </ul>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tcar07-bg: #eef4f4;
  --color-tcar07-bg: oklch(0.96 0.012 200);
  --color-tcar07-ph: #d7e6e6;
  --color-tcar07-ph: oklch(0.91 0.02 200);
  --color-tcar07-track: #c4dada;
  --color-tcar07-track: oklch(0.86 0.025 200);
  --color-tcar07-ink: #1c3535;
  --color-tcar07-ink: oklch(0.29 0.03 195);
  --color-tcar07-mute: #4f6b6b;
  --color-tcar07-mute: oklch(0.48 0.03 195);
  --color-tcar07-acc: #3f9c9c;
  --color-tcar07-acc: oklch(0.6 0.13 200);
  --font-tcar07-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tcar-07 {
  width: 100%;
  min-height: 100svh;
}

.tcar-07 ::selection {
  background: var(--color-tcar07-acc);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .tcar-07 ul {
    scroll-behavior: auto;
  }
}
```

How this works

Two states, one class list. Every visual change is written on the element that changes, under both group-hover: and group-focus-within:. Writing them as a pair is slightly verbose and completely explicit — you cannot accidentally ship a hover effect the keyboard cannot reach.

Scale, never width. The card scales with transform, so a hovered portrait grows over its neighbours instead of pushing them along the rail.

Portraits are reserved boxes. size-[130px] plus real width/height attributes means five late-loading photographs cannot reflow the row.

Make it yours

  • Portraits per view: the card's basis-[150px].
  • Rounded squares: swap rounded-full for rounded-2xl on the image.
  • Bio reveal: add a caption with group-hover:opacity-100 group-hover:translate-y-0.
  • Ring colour: --color-tcar07-acc.

Gotchas — read before shipping

  • Every group-hover: needs a group-focus-within: twin here, because the card contains no link — focus arrives via the rail, and without the twin keyboard users get nothing.
  • Scale the card, not the image, or the border ring scales with it and reads as a thicker stroke at rest.
  • Real alt per person unless the name sits adjacent in text, in which case mark the portrait decorative rather than duplicating the name.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

scroll-snap, object-fit and :focus-within are universally supported; the floor quoted is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

scroll-snap-typetw ↗object fittw ↗:focus-withintw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →