Tailwind CSS Gallery Sliders Blocks

All Blocks
Marketing
Gallery Sliders

Gallery Sliders

Tailwind CSS media and image sliders for featured product moments, immersive galleries, and showcase carousels.

Image Card Slider with Overlay Labels Pro

Large image cards move through one slider track with overlay labels and edge-mounted controls.

<div data-hs-carousel='{
          "loadingClasses": "opacity-0",
          "isInfiniteLoop": "true"
        }' class="relative">
        <div class="hs-carousel relative overflow-hidden w-full h-92">
          <div class="hs-carousel-body absolute top-0 bottom-0 inset-s-0 flex flex-nowrap transition-transform duration-700 opacity-0">
            <div class="hs-carousel-slide">
              
              <div class="p-2 bg-plain/10 border border-line-inverse/20 backdrop-blur-xl rounded-2xl">
                <div class="relative h-87">
                  <button type="button" class="block size-full focus:outline-hidden rounded-xl">
                    <img class="size-full object-cover object-center rounded-xl" src="https://images.unsplash.com/photo-1616486701797-0f33f61038ec?q=80&w=780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Card Image">
                  </button>

<div class="inline-block py-1 px-2 bg-plain/30 rounded-full backdrop-blur-xl">
                        <span class="text-sm text-foreground-inverse truncate">
                          G4 Doorbell 2 High
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
            </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-s-4 size-7 inline-flex shrink-0 justify-center items-center gap-x-2 bg-plain text-black rounded-full hover:bg-plain/80 focus:outline-hidden focus:bg-plain/80">
          <span class="text-2xl" aria-hidden="true">
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"></path></svg>
          </span>
          <span class="sr-only">Previous</span>
        </button>
        <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-e-4 size-7 inline-flex shrink-0 justify-center items-center gap-x-2 bg-plain text-black rounded-full hover:bg-plain/80 focus:outline-hidden focus:bg-plain/80">
          <span class="sr-only">Next</span>
          <span class="text-2xl" aria-hidden="true">
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
          </span>
        </button>
      </div>

Open related dashboard page