Image Gallery Displayed in a Carousel

Trying to pick one scheme that displays on a varienty of background colors.

This tailwind example is contributed by Sherry Lynne, on 07-Aug-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid

Carousel Image gallery

Author Sherry Lynne

Tailwind v3.4 150

Fork Fullscreen

<div class="bg-white w-full p-5 min-h-full">
  <h1 class="text-4xl py-3">Image Carousel (on White)</h1>
  <p class="mb-3">Slide # Navigation hides below medium. Note: Ideally each carousel should use similarly sized images - for this example I used different ones to show the effect.</p>
  <div class="carousel w-full py-4 text-black">
    <div class="carousel-buttons flex *:text-sm pb-2 justify-between">
      <button class="button-previous rounded-full block flex-none border m-1 h-9 w-9 bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default"
       aria-selected="false" aria-label="previous slide">
        ❮
      </button>
      <div class="slide-buttons hidden md:flex flex-wrap *:font-medium justify-center *:justify-center *:rounded-full *:border *:m-1 *:h-9 *:w-9">
        <button class="bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default"
          id="tab-btn1" aria-selected="true" aria-controls="carousel1">
          <span class="sr-only">Go to slide: </span>1
        </button>
        <button class="bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default" 
          id="tab-btn2" aria-selected="false" aria-controls="carousel2">
          <span class="sr-only">Go to slide: </span>2
        </button>
        <button class="bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default" 
          id="tab-btn3" aria-selected="false" aria-controls="carousel3">   
          <span class="sr-only">Go to slide: </span>3
        </button>
        <button class="bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default" 
          id="tab-btn4" aria-selected="false" aria-controls="carousel4">
          <span class="sr-only">Go to slide: </span>4
        </button>
      </div>
      <button class="button-next rounded-full block flex-none border m-1 h-9 w-9 bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default"
       aria-selected="false" aria-label="next slide">
      ❯
      </button>
    </div>
    <div class="carousel-slides block relative pb-5 *:border-neutral-300 *:border ">
      <figure tabindex="0" id="carousel1" aria-selected="true" class="hidden aria-selected:block">
        <img src="https://placecats.com/770/500" class="w-full" alt="a cat" />
        <figcaption class="px-4 py-2 bg-white text-sm">
          <p>I'm a single line caption.</p>
        </figcaption>
      </figure>
      <figure tabindex="0" id="carousel2" aria-selected="false" class="hidden aria-selected:block">
        <img src="https://placecats.com/750/500" class="w-full" alt="a cat" />
        <figcaption class="px-4 py-2 bg-white text-sm">
          <p>I'm a caption that is longer and can wrap multiple lines at smaller widths.
        </figcaption>
      </figure>
      <figure tabindex="0" id="carousel3" aria-selected="false" class="hidden aria-selected:block">
        <img src="https://placecats.com/730/500" class="w-full"  alt="still a cat" />
        <figcaption class="px-4 py-2 bg-white/90 text-sm">
          <p>I'm the caption with a <a href="#">hyperlink</a>.</p>
        </figcaption>
      </figure>
      <figure tabindex="0" id="carousel4" aria-selected="false" class="hidden aria-selected:block">
        <img src="https://placecats.com/750/550" class="w-full" alt="last cat" />
        <figcaption class="px-4 py-2 bg-white/90 text-sm">
          <p>I'm the caption</p>
        </figcaption>
      </figure>
    </div>
  </div>
</div>
<div class="bg-indigo-950 w-full p-5 text-white">
  <h1 class="text-4xl py-3">Image Carousel (on Navy)</h1>
  <p class="mb-3">Same styles as above, since I was aiming for one design that works on a variety of backgrounds.</p>
  <div class="carousel w-full py-4 text-black">
    <div class="carousel-buttons flex *:text-sm pb-2 justify-between">
      <button class="button-previous rounded-full block flex-none border m-1 h-9 w-9 bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default"
       aria-selected="false" aria-label="previous slide">
        ❮
      </button>
      <div class="slide-buttons hidden md:flex flex-wrap *:font-medium justify-center *:justify-center *:rounded-full *:border *:m-1 *:h-9 *:w-9">
        <button class="bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default"
          id="tab-btn1" aria-selected="true" aria-controls="carousela">
          <span class="sr-only">Go to slide: </span>1
        </button>
        <button class="bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default" 
          id="tab-btn2" aria-selected="false" aria-controls="carouselb">
          <span class="sr-only">Go to slide: </span>2
        </button>
        <button class="bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default" 
          id="tab-btn3" aria-selected="false" aria-controls="carouselc">   
          <span class="sr-only">Go to slide: </span>3
        </button>
        <button class="bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default" 
          id="tab-btn4" aria-selected="false" aria-controls="carouseld">
          <span class="sr-only">Go to slide: </span>4
        </button>
      </div>
      <button class="button-next rounded-full block flex-none border m-1 h-9 w-9 bg-neutral-100 border-neutral-300 text-sky-700 hover:text-sky-400 aria-selected:border-sky-400 aria-selected:bg-white aria-selected:text-sky-400 aria-selected:cursor-default"
       aria-selected="false" aria-label="next slide">
      ❯
      </button>
    </div>
    <div class="carousel-slides block relative pb-5 *:border-neutral-300 *:border">
      <figure tabindex="0" id="carousela" aria-selected="true" class="hidden aria-selected:block">
        <img src="https://placecats.com/750/500" class="w-full" alt="a cat" />
        <figcaption class="px-4 py-2 bg-white text-sm">
          <p>I'm a single line caption.</p>
        </figcaption>
      </figure>
      <figure tabindex="0" id="carouselb" aria-selected="false" class="hidden aria-selected:block">
        <img src="https://placecats.com/750/550" class="w-full" alt="a cat" />
        <figcaption class="px-4 py-2 bg-white text-sm">
          <p>I'm a caption that is longer and can wrap multiple lines at smaller widths.
        </figcaption>
      </figure>
      <figure tabindex="0" id="carouselc" aria-selected="false" class="hidden aria-selected:block">
        <img src="https://placecats.com/730/500" class="w-full"  alt="still a cat" />
        <figcaption class="px-4 py-2 bg-white text-sm">
          <p>I'm the caption with a <a href="#">hyperlink</a>.</p>
        </figcaption>
      </figure>
      <figure tabindex="0" id="carouseld" aria-selected="false" class="hidden aria-selected:block">
        <img src="https://placecats.com/770/500" class="w-full" alt="last cat" />
        <figcaption class="px-4 py-2 bg-white text-sm">
          <p>I'm the caption</p>
        </figcaption>
      </figure>
    </div>
  </div>
</div>
<div class="p-5 w-full"></div>
<script>
  // Select DOM elements
  const carousels = Array.from(document.querySelectorAll('.carousel'));
  for (const carousel of carousels) {
    const slideContainer = carousel.querySelector(':scope > .carousel-slides');
    const btnContainer = carousel.querySelector(':scope > .carousel-buttons');
    const slideItems = Array.from(slideContainer.querySelectorAll(':scope > figure'));
    const prevBtn = btnContainer.querySelector(':scope > button.button-previous');
    const nextBtn = btnContainer.querySelector(':scope > button.button-next');
    const carouselBtns = Array.from(btnContainer.querySelectorAll(':scope > .slide-buttons > button'));
    const targetFigure = Array.from(slideContainer.querySelectorAll(':scope > figure[aria-selected="true"]'))[0];
    let currentIdx = slideItems.indexOf(targetFigure);

showSlide(0);
  }
</script>

Related Examples

3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10k
responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.2k
Slider
Responsive slider

Abhiraj

1 year ago

3k
slider /carousel
simple slider or carousel

Omer fils ELENGA

1 year ago

1.7k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

2k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

945
Galerie Interactive
Galerie Interactive

Omer fils ELENGA

8 months ago

472
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Image Grid
The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

R Thapa

3 years ago

15.4k
Image gallery using grid
basic image gallery that displays images in a responsive grid, with an overlay and a "View" button that appears on hover. You can further customize and enhance it to fit your design and functionality requirements.

Prajwal Hallale

3 years ago

10.7k
image gallery
image gallery [lightbox]

Anonymous

3 years ago

20.7k
Clean Image Grid Gallery
A clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.

JUGENDRA GANGWAR

2 months ago

237