Home
Sherry Lynne
Image Gallery Displayed in a Carousel

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 CSS v3. It is responsive. similar terms for this example are Masonry, Image grid

Carousel Image gallery

Author Sherry Lynne

149

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

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

2 years ago

9.9k
responsive slider carousel
slider carousel

Author:
Abhiraj

1 year ago

3.1k
Slider
Responsive slider

Author:
Abhiraj

1 year ago

3k
slider /carousel
simple slider or carousel

Author:
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.

Author:
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.

Author:
Ayyamperumal S

8 months ago

927
Galerie Interactive
Galerie Interactive

Author:
Omer fils ELENGA

7 months ago

374
gallery
gallery by css

Author:
Hacker Development

1 year ago

1.7k
Image carousel
Uses Flowbite

Author:
Anonymous

1 year ago

3.6k
an off line game of catching afox
an off line game of catching afox

Author:
Bonimater

1 year ago

1.1k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

8 months ago

727
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Author:
Salah eldein

10 months ago

479

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components