Components
Carousel

Components

Tailwind CSS Carousel

The Carousel Component provides a smooth and interactive way to cycle through content, whether it be images or text, mimicking the captivating motion of a traditional carousel.

Requires JS

Note that this component requires the use of our Carousel plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Basic usage

A slideshow component for cycling through elements-images or slides of text-like a carousel.

Theme:

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 start-2 inline-flex justify-center items-center size-10 bg-layer 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 end-2 inline-flex justify-center items-center size-10 bg-layer 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>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

Pagination

Display carousel slides with pagination dots for enhanced navigation and visual indicators.

Theme:

AutoPlay

Use "isAutoPlay": true to enable the autoplay feature.

Theme:

Infinite loop

Use "isInfiniteLoop": true to enable infinite looping.

Theme:

isRTL

Use "isRTL": true to enable the rtl feature.

Theme:

Multiple slides

Carousel with multiple slides.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-2xl mx-auto mt-2">
                      <div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isAutoPlay": true, "isInfiniteLoop": true, "slidesQty": {"xs": 1,"sm": 3}}' >
                        <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                          
                          <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 -mx-1 opacity-0">
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>
                          
                        </div>

<div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isAutoPlay": true, "isInfiniteLoop": true, "slidesQty": {"xs": 1,"sm": 3}}' >
                        <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                          
                          <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 -mx-1 opacity-0">
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>
                          
                        </div>

Centered

Use "isCentered": true to enable centering relative to the center of the carousel.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-2xl mx-auto mt-2">
                      <div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isCentered": true, "slidesQty": {"xs": 1,"sm": 3}}' >
                        <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                          
                          <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 -mx-1 opacity-0">
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>
                          
                        </div>

<div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isCentered": true, "slidesQty": {"xs": 1,"sm": 3}}' >
                        <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                          
                          <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 -mx-1 opacity-0">
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>
                          
                        </div>

Draggable

Use "isDraggable": true to enable dragging option. This doesn't work if isSnap is enabled.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-2xl mx-auto mt-2">
                      <div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isDraggable": true, "slidesQty": {"xs": 1,"sm": 3}}' >
                        <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                          
                          <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 -mx-1 cursor-grab hs-carousel-dragging:transition-none hs-carousel-dragging:cursor-grabbing opacity-0">
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>
                          
                        </div>

<div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isDraggable": true, "slidesQty": {"xs": 1,"sm": 3}}' >
                        <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                          
                          <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 -mx-1 cursor-grab hs-carousel-dragging:transition-none hs-carousel-dragging:cursor-grabbing opacity-0">
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide px-1">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>
                          
                        </div>

Auto height

Use "isAutoHeight": true to enable recalculation of the carousel height on each slide change.

Theme:

Snap point

Use "isSnap": true to enable scrolling and centering relative to the center of the carousel. You need to add snap-x snap-mandatory classes to hs-carousel and snap-center classes to each hs-carousel-slide.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-2xl mx-auto mt-2">
                      <div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isCentered": true, "slidesQty": {"xs": 1,"sm": 3}, "isSnap": true}' >
                        <div class="hs-carousel relative w-full flex snap-x snap-mandatory overflow-x-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-body flex flex-nowrap gap-2 transition-transform duration-700 min-h-96 opacity-0">
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>
                          
                        </div>

<div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isCentered": true, "slidesQty": {"xs": 1,"sm": 3}, "isSnap": true}' >
                        <div class="hs-carousel relative w-full flex snap-x snap-mandatory overflow-x-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-body flex flex-nowrap gap-2 transition-transform duration-700 min-h-96 opacity-0">
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide snap-center">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>
                          
                        </div>

Info

Add hs-carousel-info inside data-hs-carousel and place hs-carousel-info-current and hs-carousel-info-total inside hs-carousel-info to display information about the current and total number of slides.

Theme:

<div class="hs-carousel-info inline-flex justify-center px-4 absolute bottom-3 start-1/2 -translate-x-1/2 bg-layer text-layer-foreground rounded-lg">
                          <span class="hs-carousel-info-current me-1">0</span>
                          /
                          <span class="hs-carousel-info-total ms-1">0</span>
                        </div>
                        
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

Thumbnails (horizontal)

Carousel with horizontal thumbnails.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-2xl mx-auto mt-2">
                      <div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0"}' >
                        <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                          
                          <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 opacity-0">
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>

<div class="hs-carousel-pagination absolute bottom-3 start-0 w-full overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="flex flex-row items-center gap-x-2 px-2">
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer w-35 h-15 hs-carousel-active:border-primary-active">
                                <div class="flex justify-center h-full bg-surface p-2">
                                  <span class="self-center text-xs text-foreground transition duration-700">First slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer w-35 h-15 hs-carousel-active:border-primary-active">
                                <div class="flex justify-center h-full bg-surface-1 p-2">
                                  <span class="self-center text-xs text-foreground transition duration-700">Second slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer w-35 h-15 hs-carousel-active:border-primary-active">
                                <div class="flex justify-center h-full bg-surface-2 p-2">
                                  <span class="self-center text-xs text-foreground transition duration-700">Third slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer w-35 h-15 hs-carousel-active:border-primary-active">
                                <div class="flex justify-center h-full bg-surface-3 p-2">
                                  <span class="self-center text-xs text-foreground transition duration-700">Fourth slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer w-35 h-15 hs-carousel-active:border-primary-active">
                                <div class="flex justify-center h-full bg-surface-4 p-2">
                                  <span class="self-center text-xs text-foreground transition duration-700">Fifth slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer w-35 h-15 hs-carousel-active:border-primary-active">
                                <div class="flex justify-center h-full bg-surface-5 p-2">
                                  <span class="self-center text-xs text-foreground transition duration-700">Sixth slide</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                        </div>

<div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0"}' >
                        <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                          
                          <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 opacity-0">
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">First slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-1 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Second slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-2 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Third slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-3 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Fourth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-4 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Fifth slide</span>
                              </div>
                            </div>
                            <div class="hs-carousel-slide ">
                              <div class="flex justify-center h-full bg-surface-5 p-6">
                                <span class="self-center text-4xl text-foreground transition duration-700">Sixth slide</span>
                              </div>
                            </div>
                          </div>

Thumbnails (vertical)

Carousel with vertical thumbnails.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-2xl mx-auto mt-2">
                        <div data-hs-carousel='{
                          "loadingClasses": "opacity-0"
                        }' class="relative">
                        <div class="hs-carousel flex flex-col sm:flex-row gap-2">
                          <div class="sm:order-2 relative grow overflow-hidden min-h-96 rounded-lg">
                            <div class="hs-carousel-body absolute top-0 bottom-0 start-0 flex flex-nowrap transition-transform duration-700 opacity-0">
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">First slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-1 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Second slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-2 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Third slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-3 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Fourth slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-4 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Fifth slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-5 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Sixth slide</span>
                                </div>
                              </div>
                            </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 start-2 inline-flex justify-center items-center size-10 bg-layer 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 end-2 inline-flex justify-center items-center size-10 bg-layer 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>

<div class="sm:order-1 flex-none">
                            <div class="hs-carousel-pagination max-h-96 flex flex-row sm:flex-col gap-2 overflow-x-auto sm:overflow-x-hidden sm:overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-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 shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer size-20 sm:size-32 hs-carousel-active:border-primary">
                                <div class="flex justify-center items-center text-center size-full bg-surface p-2">
                                  <span class="text-xs text-foreground transition duration-700">First slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer size-20 sm:size-32 hs-carousel-active:border-primary">
                                <div class="flex justify-center items-center text-center size-full bg-surface-1 p-2">
                                  <span class="text-xs text-foreground transition duration-700">Second slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer size-20 sm:size-32 hs-carousel-active:border-primary">
                                <div class="flex justify-center items-center text-center size-full bg-surface-2 p-2">
                                  <span class="text-xs text-foreground transition duration-700">Third slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer size-20 sm:size-32 hs-carousel-active:border-primary">
                                <div class="flex justify-center items-center text-center size-full bg-surface-3 p-2">
                                  <span class="text-xs text-foreground transition duration-700">Fourth slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer size-20 sm:size-32 hs-carousel-active:border-primary">
                                <div class="flex justify-center items-center text-center size-full bg-surface-4 p-2">
                                  <span class="text-xs text-foreground transition duration-700">Fifth slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-pagination-item shrink-0 border border-line-2 rounded-md overflow-hidden cursor-pointer size-20 sm:size-32 hs-carousel-active:border-primary">
                                <div class="flex justify-center items-center text-center size-full bg-surface-5 p-2">
                                  <span class="text-xs text-foreground transition duration-700">Sixth slide</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div data-hs-carousel='{
                          "loadingClasses": "opacity-0"
                        }' class="relative">
                        <div class="hs-carousel flex flex-col sm:flex-row gap-2">
                          <div class="sm:order-2 relative grow overflow-hidden min-h-96 rounded-lg">
                            <div class="hs-carousel-body absolute top-0 bottom-0 start-0 flex flex-nowrap transition-transform duration-700 opacity-0">
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">First slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-1 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Second slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-2 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Third slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-3 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Fourth slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-4 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Fifth slide</span>
                                </div>
                              </div>
                              <div class="hs-carousel-slide">
                                <div class="flex justify-center h-full bg-surface-5 p-6">
                                  <span class="self-center text-4xl text-foreground transition duration-700">Sixth slide</span>
                                </div>
                              </div>
                            </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 start-2 inline-flex justify-center items-center size-10 bg-layer 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 end-2 inline-flex justify-center items-center size-10 bg-layer 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>

Destroy and Reinitialize

Provides destroy method that helps to destroy a carousel.

Theme:

<!DOCTYPE html>
                    <html lang="en" dir="" class="relative min-h-full h-full">
                      <head>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                        <title>Preline UI</title>
                        <link rel="shortcut icon" href="../favicon.ico">
                        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                        <link rel="stylesheet" href="../assets/css/main.min.css">
                      </head>
                      <body class="w-full max-w-2xl mx-auto mt-2">
                    <div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isAutoPlay": true, "isInfiniteLoop": true, "slidesQty": {"xs": 1,"sm": 3}}' >
                      <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                        
                        <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 -mx-1 opacity-0">
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-1 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-2 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-3 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-4 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-5 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                            </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 start-2 inline-flex justify-center items-center size-10 bg-layer 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 end-2 inline-flex justify-center items-center size-10 bg-layer 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="flex flex-wrap gap-2 mt-4">
                      <button type="button" id="hs-destroy-carousel" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                        <svg class="shrink-0 size-3.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="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                        Destroy carousel
                      </button>
                      <button type="button" id="hs-auto-init-carousel" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        <svg class="shrink-0 size-3.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="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
                        Reinitialize carousel
                      </button>
                    </div>
                    
                        <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                          <script>
                            window.addEventListener('load', () => {
                              (function() {
                                const carousel = document.querySelector('#hs-carousel');
                                const destroy = document.querySelector('#hs-destroy-carousel');
                                const autoInit = document.querySelector('#hs-auto-init-carousel');

destroy.addEventListener('click', () => {
                                  const {element} = HSCarousel.getInstance(carousel, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                  autoInit.removeAttribute('disabled');
                                });

autoInit.addEventListener('click', () => {
                                  HSCarousel.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                  destroy.removeAttribute('disabled');
                                });
                              })();
                            });
                          </script>
                      </body>
                    </html>

<div id="hs-carousel" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:bg-primary-active hs-carousel-active:border-primary-active size-3 border border-line-4 rounded-full cursor-pointer", "isAutoPlay": true, "isInfiniteLoop": true, "slidesQty": {"xs": 1,"sm": 3}}' >
                      <div class="hs-carousel relative w-full min-h-96 overflow-hidden">
                        
                        <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 start-0 transition-transform duration-700 -mx-1 opacity-0">
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">First slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-1 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Second slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-2 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Third slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-3 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Fourth slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-4 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Fifth slide</span>
                            </div>
                          </div>
                          <div class="hs-carousel-slide px-1">
                            <div class="flex justify-center h-full bg-surface-5 p-6">
                              <span class="self-center text-sm text-foreground transition duration-700">Sixth slide</span>
                            </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 start-2 inline-flex justify-center items-center size-10 bg-layer 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 end-2 inline-flex justify-center items-center size-10 bg-layer 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>

destroy.addEventListener('click', () => {
                            const {element} = HSCarousel.getInstance(carousel, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                            autoInit.removeAttribute('disabled');
                          });

autoInit.addEventListener('click', () => {
                            HSCarousel.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                            destroy.removeAttribute('disabled');
                          });
                        })();
                      });
                    </script>