Tailwind CSS Product Media Galleries Blocks

All Blocks
Ecommerce
Product Media Galleries

Product Media Galleries

Product media galleries for thumbnail-led sliders, image grid galleries, and alternating product story sections.

Vertical Product Gallery with Thumbnail Rail Pro

Vertical gallery pairs a large product preview carousel with a scrollable thumbnail rail and floating previous and next controls.

<div data-hs-carousel='{
                        "loadingClasses": "opacity-0"
                      }' class="relative">
                      <div class="hs-carousel flex flex-col sm:flex-row gap-3 sm:gap-5">
                        
                        <div class="flex-none order-2 sm:order-1">
                          <div class="hs-carousel-pagination sm:h-175 flex flex-row sm:flex-col gap-3 pb-1.5 sm:pb-0 overflow-x-auto sm:overflow-x-hidden sm:overflow-y-auto sm:[&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218196423-da6ee214f4cc?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1598343175492-9e7dc0e63cc6?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218190297-df1c6af07965?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218162086-fba879e8c17a?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218167744-4b6371f208c2?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1598343165919-ba35c5a7743e?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218178546-6a870b48be2e?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1606846859455-1af0b84947f3?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                          </div>
                        </div>

<div class="relative grow overflow-hidden h-137.5 sm:h-175 order-1 sm:order-2 bg-surface rounded-lg">
                          <div class="hs-carousel-body absolute inset-y-0 inset-s-0 flex flex-nowrap opacity-0">
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218196423-da6ee214f4cc?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1598343175492-9e7dc0e63cc6?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218190297-df1c6af07965?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218162086-fba879e8c17a?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218167744-4b6371f208c2?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1598343165919-ba35c5a7743e?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218178546-6a870b48be2e?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1606846859455-1af0b84947f3?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                          </div>

<div class="absolute bottom-0 inset-e-0 pb-4 pe-4">
                            <div class="flex items-center gap-2">
                              <button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default 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 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 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 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>
                          </div>
                          
                        </div>
                        
                      </div>
                    </div>

Horizontal Product Gallery with Thumbnail Strip Pro

Horizontal gallery stacks a large product preview carousel above a swipeable thumbnail strip with corner-mounted navigation controls.

<div data-hs-carousel='{
                        "loadingClasses": "opacity-0"
                      }' class="relative">
                      <div class="hs-carousel flex flex-col gap-3 sm:gap-5">
                        
                        <div class="relative grow overflow-hidden h-137.5 sm:h-175 bg-surface rounded-lg">
                          <div class="hs-carousel-body absolute inset-y-0 inset-s-0 flex flex-nowrap opacity-0">
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218196423-da6ee214f4cc?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1598343175492-9e7dc0e63cc6?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218190297-df1c6af07965?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218162086-fba879e8c17a?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218167744-4b6371f208c2?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1598343165919-ba35c5a7743e?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218178546-6a870b48be2e?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-slide">
                              <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1606846859455-1af0b84947f3?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                          </div>

<div class="absolute bottom-0 inset-e-0 pb-4 pe-4">
                            <div class="flex items-center gap-2">
                              <button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-focus 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 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-focus 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>
                          </div>
                          
                        </div>

<div class="flex-none">
                          <div class="hs-carousel-pagination flex flex-row gap-3 pb-1.5 sm:pb-0 overflow-x-auto sm:overflow-x-hidden sm:overflow-y-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218196423-da6ee214f4cc?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1598343175492-9e7dc0e63cc6?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218190297-df1c6af07965?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218162086-fba879e8c17a?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218167744-4b6371f208c2?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1598343165919-ba35c5a7743e?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1603218178546-6a870b48be2e?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                              <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1606846859455-1af0b84947f3?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>

Alternating Product Story Image and Text Rows Pro

Alternating story section repeats two-column image and copy rows with rounded media blocks and offset text panels.

<div class="py-10 space-y-10">
                      
                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-3">
                        <div>
                          <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1606846848485-ea9d78f09ebe?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                        </div>

<div class="sm:min-h-80 flex flex-col justify-center sm:ps-6 sm:p-10">
                          <h3 class="font-medium text-lg sm:text-xl text-foreground">
                            Everyday, year round comfort
                          </h3>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                            The temperature regulating lining keeps you warm in the winter, comfortable in the summer, and feeling good year round.
                          </p>
                        </div>
                        
                      </div>
                      
  
                      
                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-3">
                        <div class="sm:order-2">
                          <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1598342990854-b3f9742c9e49?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                        </div>

<div class="order-1 sm:min-h-80 flex flex-col justify-center sm:pe-6 sm:p-10 sm:ps-0">
                          <h3 class="font-medium text-lg sm:text-xl text-foreground">
                            A slipper that's here to stay
                          </h3>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                            Made with a premium felt upper and a durable "anywhere" sole, they're the slippers you'll be wearing for years to come.
                          </p>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                            What's more, the neoprene heel cradle holds them in place for a secure fit.
                          </p>
                        </div>
                        
                      </div>
                      
  
                      
                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-3">
                        <div>
                          <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1603218178546-6a870b48be2e?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                        </div>

<div class="sm:min-h-80 flex flex-col justify-center sm:ps-6 sm:p-10">
                          <h3 class="font-medium text-lg sm:text-xl text-foreground">
                            Slippers with sole
                          </h3>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                            And by that we mean a cleverly designed, versatile, easy to clean TPU sole which takes you indoors to out.
                          </p>
                        </div>
                        
                      </div>
                      
                    </div>

Product Image Grid Gallery Pro

Two-column product gallery grid arranges rounded detail shots in a balanced image layout for image-first product pages.

<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                      
                      <div class="relative">
                        <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                      </div>

<div class="relative">
                        <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1603218196423-da6ee214f4cc?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                      </div>

<div class="relative">
                        <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1598343175492-9e7dc0e63cc6?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                      </div>

<div class="relative">
                        <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1603218190297-df1c6af07965?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                      </div>

<div class="relative">
                        <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1603218162086-fba879e8c17a?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                      </div>

<div class="relative">
                        <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1598343170675-de52f3251f9c?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                      </div>
                      
                    </div>