Tailwind CSS Hero Sliders Blocks

All Blocks
Marketing
Hero Sliders

Hero Sliders

Carousel-led hero sliders and promotional landing intros for ecommerce storefronts, marketplaces, and campaign-driven marketing pages.

A wide hero slider pairs promo copy with large media panels and in-slide navigation controls.

<div class="py-4 sm:py-6 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      <div data-hs-carousel='{
                          "loadingClasses": "opacity-0",
                          "isInfiniteLoop": true,
                          "dotsItemClasses": "hs-carousel-active:bg-plain bg-plain/50 size-3 rounded-full cursor-pointer"
                        }' class="relative">
                        <div class="hs-carousel relative overflow-hidden h-120 lg:h-160 w-full bg-surface rounded-xl">
                          <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">
                              
                              <a class="h-120 lg:h-160 relative block rounded-xl focus:outline-hidden" href="#">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1713492664635-1363f44734ef?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<div class="relative z-10 text-center size-full max-w-lg mx-auto px-12 flex flex-col justify-center items-center">
                                  <p class="text-sm md:text-base uppercase text-foreground-inverse">
                                    iPad cases
                                  </p>

<h2 class="mt-2 font-semibold text-3xl sm:text-4xl lg:text-5xl text-foreground-inverse">
                                    Including the new Pros and Airs.
                                  </h2>

<div class="hs-carousel-slide">
                              
                              <a class="h-120 lg:h-160 relative block rounded-xl focus:outline-hidden" href="#">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1644462982538-ee5ce6abd2db?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<div class="relative z-10 size-full max-w-lg p-8 sm:p-16 flex flex-col">
                                  <h2 class="font-semibold text-3xl sm:text-4xl lg:text-5xl text-inverse">
                                    New styles
                                  </h2>

<p class="mt-3 text-sm md:text-base text-inverse">
                                    From lightweight leathers to the cases, new seasonal favorites are here.
                                  </p>

<div class="hs-carousel-slide">
                              
                              <a class="h-120 lg:h-160 relative block overflow-hidden bg-linear-to-br from-primary-500 to-primary-900 rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/storefront/listing-grid.html">
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 items-center gap-5">
                                  
                                  <div class="p-12 sm:p-16 md:ps-20 md:pe-0 max-w-xl">
                                    <span class="block font-bold uppercase text-2xl sm:text-3xl lg:text-4xl text-foreground-inverse">
                                      Up to
                                    </span>
                                    <span class="block font-bold uppercase text-5xl sm:text-6xl lg:text-7xl xl:text-8xl text-foreground-inverse">
                                      40% off
                                    </span>
                                    <span class="block md:text-end font-bold uppercase text-xl sm:text-2xl lg:text-3xl text-yellow-400">
                                      For everything
                                    </span>

<p class="mt-1 text-foreground-inverse">
                                        Celebrate with up to 40% off everything for a limited time.
                                      </p>

<div class="h-120 lg:h-160 grid grid-cols-2 gap-3 sm:gap-5 -rotate-12">
                                    <div class="flex flex-col gap-3 sm:gap-5">
                                      <div class="p-1.5 bg-layer rounded-2xl lg:rounded-3xl shadow-2xl">
                                        <img class="size-full object-cover rounded-xl lg:rounded-2xl" src="https://images.unsplash.com/photo-1548874468-025d0edfdf8b?q=80&w=320&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>
                                      <div class="p-1.5 bg-layer rounded-2xl lg:rounded-3xl shadow-2xl">
                                        <img class="size-full object-cover rounded-xl lg:rounded-2xl" src="https://images.unsplash.com/photo-1513652990199-8a52e2313122?q=80&w=320&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </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-1 sm:inset-s-4 inline-flex justify-center items-center size-10 bg-plain text-inverse rounded-full shadow-2xs hover:text-primary-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-5" 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"/></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-1 sm:inset-e-4 inline-flex justify-center items-center size-10 bg-plain text-inverse rounded-full shadow-2xs hover:text-primary-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="sr-only">Next</span>
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-5" 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"/></svg>
                          </span>
                        </button>

Open Marketplace homepage

Large slide panels carry the hero media, with copy and actions layered into the same frame.

<div class="pt-4 sm:pt-6 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      <div data-hs-carousel='{
                          "loadingClasses": "opacity-0",
                          "isInfiniteLoop": true
                        }' class="relative">
                        <div class="hs-carousel relative overflow-hidden w-full h-120 md:h-160 bg-surface rounded-xl">
                          <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="h-120 md:h-160 relative">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1713276753136-c386da1ec670?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<div class="relative z-10 text-center size-full max-w-lg mx-auto px-12 flex flex-col justify-center items-center">
                                  <h2 class="font-semibold text-3xl sm:text-4xl lg:text-5xl text-foreground-inverse">
                                    Fall favorites
                                  </h2>

<p class="mt-3 text-sm md:text-base text-foreground-inverse">
                                    Our always-in-season staple, in brand new colors and your favorite fits.
                                  </p>

<div class="mt-5 md:mt-10">
                                    <div class="flex flex-wrap justify-center gap-5 lg:gap-10">
                                      <a class="text-sm md:text-base text-foreground-inverse underline underline-offset-4 hover:text-foreground-inverse/80 focus:outline-hidden focus:text-foreground-inverse/80" href="../../../templates/ecommerce/storefront/listing-grid-with-mini-categories.html">
                                        Shop women's clothing
                                      </a>
                                    </div>
                                  </div>
                                  
                                </div>
                              </div>
                              
                            </div>

<div class="hs-carousel-slide">
                              
                              <div class="h-120 md:h-160 relative">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1603139635700-04637d0d16bd?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<p class="mt-3 text-sm md:text-base text-foreground-inverse">
                                    From lightweight layers to the perfect pair of pants, new seasonal favorites are here.
                                  </p>

<a class="text-sm md:text-base text-foreground-inverse underline underline-offset-4 hover:text-foreground-inverse/80 focus:outline-hidden focus:text-foreground-inverse/80" href="../../../templates/ecommerce/storefront/listing-grid-with-categories.html">
                                        Shop women
                                      </a>
                                    </div>
                                  </div>
                                  
                                </div>
                              </div>
                              
                            </div>

<div class="hs-carousel-slide">
                              
                              <div class="h-120 md:h-160 relative">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1684144064253-bb3b4c8fc700?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-s-1 sm:inset-s-4 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-5" 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"/></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-1 sm:inset-e-4 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="sr-only">Next</span>
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-5" 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"/></svg>
                          </span>
                        </button>

<div class="p-2 absolute bottom-0 inset-x-0 text-center">
                          <div class="py-1 px-2 inline-flex justify-center items-center gap-2 bg-layer rounded-full">
                            <span class="hs-carousel-info text-xs text-foreground">
                              <span class="hs-carousel-info-current inline-block min-w-2 text-center">1</span> / <span class="hs-carousel-info-total inline-block min-w-2 text-center">3</span>
                            </span>
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open Storefront homepage

Rounded Image Hero Carousel Free

Rounded media cards rotate inside a tall hero layout with supporting copy and slider controls.

<div class="px-4 sm:px-6 lg:px-8 py-10">
                  <div data-hs-carousel='{
                      "loadingClasses": "opacity-0"
                    }' class="relative">
                    <div class="hs-carousel relative overflow-hidden w-full h-120 md:h-[calc(100vh-106px)]  bg-surface rounded-2xl">
                      <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="h-120 md:h-[calc(100vh-106px)]  flex flex-col bg-[url('https://images.unsplash.com/photo-1615615228002-890bb61cac6e?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
                            <div class="mt-auto w-2/3 md:max-w-lg ps-5 pb-5 md:ps-10 md:pb-10">
                              <span class="block text-foreground-inverse">Nike React</span>
                              <span class="block text-foreground-inverse text-xl md:text-3xl">Rewriting sport's playbook for billions of athletes</span>
                              <div class="mt-5">
                                <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-xl bg-plain text-inverse hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Read Case Studies
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                        
        
                        
                        <div class="hs-carousel-slide">
                          <div class="h-120 md:h-[calc(100vh-106px)]  flex flex-col bg-[url('https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
                            <div class="mt-auto w-2/3 md:max-w-lg ps-5 pb-5 md:ps-10 md:pb-10">
                              <span class="block text-foreground-inverse">CoolApps</span>
                              <span class="block text-foreground-inverse text-xl md:text-3xl">From mobile apps to gaming consoles</span>
                              <div class="mt-5">
                                <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-xl bg-plain text-inverse hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Read Case Studies
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                        
        
                        
                        <div class="hs-carousel-slide">
                          <div class="h-120 md:h-[calc(100vh-106px)]  flex flex-col bg-[url('https://images.unsplash.com/photo-1629666451094-8908989cae90?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
                            <div class="mt-auto w-2/3 md:max-w-lg ps-5 pb-5 md:ps-10 md:pb-10">
                              <span class="block text-foreground-inverse">Grumpy</span>
                              <span class="block text-foreground-inverse text-xl md:text-3xl">Bringing Art to everything</span>
                              <div class="mt-5">
                                <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-xl bg-plain text-inverse hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Read Case Studies
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 inset-s-0 inline-flex justify-center items-center w-12 h-full text-inverse hover:bg-plain/20 rounded-s-2xl focus:outline-hidden focus:bg-plain/20">
                      <span class="text-2xl" aria-hidden="true">
                        <svg class="shrink-0 size-3.5 md:size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"></path>
                        </svg>
                      </span>
                      <span class="sr-only">Previous</span>
                    </button>
    
                    <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 inset-e-0 inline-flex justify-center items-center w-12 h-full text-inverse hover:bg-plain/20 rounded-e-2xl focus:outline-hidden focus:bg-plain/20">
                      <span class="sr-only">Next</span>
                      <span class="text-2xl" aria-hidden="true">
                        <svg class="shrink-0 size-3.5 md:size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                        </svg>
                      </span>
                    </button>
                    
                  </div>
                </div>

Hero Sliders

Marketplace Promo Hero Slider Pro

Storefront Promo Hero Slider Pro

Rounded Image Hero Carousel Free