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

Cycle through images or content slides with a basic carousel.

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-s-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 inset-e-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.2.0"></script>
                            </body>
                          </html>

Pagination

Add pagination dots so users can see the current slide and jump between slides.

Autoplay

Use "isAutoPlay": true to advance slides automatically on an interval.

Infinite loop

Use "isInfiniteLoop": true to keep the carousel looping from the last slide back to the first.

RTL

Use "isRTL": true for right-to-left slide movement and controls.

Multiple slides

Show multiple slides in view at the same time.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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 inset-s-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 inset-s-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 keep the active slide centered in the viewport.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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 inset-s-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 inset-s-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 drag slides with the pointer. This does not work when isSnap is enabled.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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 inset-s-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 inset-s-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>

Created with Preline MCP New

Combine centered slides, draggable interaction, infinite looping, and custom pagination to showcase multiple UI screens.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-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 overflow-x-hidden bg-white p-2 dark:bg-neutral-900">
                          <div id="hs-carousel-mcp-showcase" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:w-6 hs-carousel-active:bg-stone-800 dark:hs-carousel-active:bg-neutral-200 size-2.5 rounded-full bg-stone-200 dark:bg-neutral-700 cursor-pointer transition-all duration-300", "currentIndex": 1, "isCentered": true, "isInfiniteLoop": true, "isDraggable": true, "slidesQty": {"xs": 1,"md": 1.7}}'>
                            <div class="hs-carousel relative aspect-[1.78/1] w-full overflow-visible md:aspect-[3.15/1]">
                              
                              <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 inset-s-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-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">First slide</span>
                                  </div>
                                </div>
                                <div class="hs-carousel-slide px-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface-1 p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">Second slide</span>
                                  </div>
                                </div>
                                <div class="hs-carousel-slide px-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface-2 p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">Third slide</span>
                                  </div>
                                </div>
                                <div class="hs-carousel-slide px-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface-3 p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">Fourth slide</span>
                                  </div>
                                </div>
                                <div class="hs-carousel-slide px-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface-4 p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">Fifth slide</span>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="mt-5 flex items-center justify-center gap-x-4">
                              <button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default inline-flex size-9 items-center justify-center rounded-full bg-stone-100 text-stone-800 shadow-2xs transition hover:bg-stone-200 focus:outline-hidden focus:bg-stone-200 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
                                <span class="sr-only">Previous</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
                              </button>

<div id="hs-carousel-mcp-showcase" class="relative" data-hs-carousel='{"loadingClasses": "opacity-0", "dotsItemClasses": "hs-carousel-active:w-6 hs-carousel-active:bg-stone-800 dark:hs-carousel-active:bg-neutral-200 size-2.5 rounded-full bg-stone-200 dark:bg-neutral-700 cursor-pointer transition-all duration-300", "currentIndex": 1, "isCentered": true, "isInfiniteLoop": true, "isDraggable": true, "slidesQty": {"xs": 1,"md": 1.7}}'>
                            <div class="hs-carousel relative aspect-[1.78/1] w-full overflow-visible md:aspect-[3.15/1]">
                              
                              <div class="hs-carousel-body flex flex-nowrap absolute top-0 bottom-0 inset-s-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-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">First slide</span>
                                  </div>
                                </div>
                                <div class="hs-carousel-slide px-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface-1 p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">Second slide</span>
                                  </div>
                                </div>
                                <div class="hs-carousel-slide px-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface-2 p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">Third slide</span>
                                  </div>
                                </div>
                                <div class="hs-carousel-slide px-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface-3 p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">Fourth slide</span>
                                  </div>
                                </div>
                                <div class="hs-carousel-slide px-5">
                                  <div class="flex h-full justify-center rounded-xl bg-surface-4 p-6">
                                    <span class="self-center text-sm font-medium text-foreground transition duration-700">Fifth slide</span>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

Auto height

Use "isAutoHeight": true to recalculate the carousel height for each slide.

Snap scrolling

Use "isSnap": true with snap-x snap-mandatory on hs-carousel and snap-center on each hs-carousel-slide to snap slides into place.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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>

Slide counter

Add hs-carousel-info with hs-carousel-info-current and hs-carousel-info-total to display the current slide and total count.

<div class="hs-carousel-info inline-flex justify-center px-4 absolute bottom-3 inset-s-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.2.0"></script>
                            </body>
                          </html>

Thumbnails (horizontal)

Use horizontal thumbnails below the carousel as alternate slide controls.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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 inset-s-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 inset-s-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 inset-s-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)

Use a vertical thumbnail rail when the layout has room for side-by-side navigation.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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 inset-s-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 inset-s-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 inset-e-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.2.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 inset-s-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 inset-s-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 inset-e-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

Use the destroy method to remove a carousel instance and initialize it again when needed.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" 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 inset-s-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 inset-s-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 inset-e-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.2.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 inset-s-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 inset-s-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 inset-e-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>