1. Plugins
  2. Carousel


Tailwind CSS Carousel

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



To get started, install Carousel plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                        npm i @preline/carousel


Here is a basic example of a carousel with three slides.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                        <div data-hs-carousel='{
                            "loadingClasses": "opacity-0"
                          }' class="relative">
                          <div class="hs-carousel relative overflow-hidden w-full min-h-64">
                            <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="hs-carousel-slide">
                              <div class="hs-carousel-slide">

                          <button type="button" class="hs-carousel-prev">
                            <span aria-hidden="true">«</span>
                            <span class="sr-only">Previous</span>
                          <button type="button" class="hs-carousel-next">
                            <span class="sr-only">Next</span>
                            <span aria-hidden="true">»</span>


Name Description Options Default value
data-hs-carousel Activate a carousel by specifying on an element.
:currentIndex Specifies the index of the current slide initially (from 0 to slides quantity). number 0
:loadingClasses Specifies which classes should be removed after the carousel is loaded. CSS classes should be separated with space. string opacity-0
:isAutoPlay Enables autoplay. boolean false
:speed Autoplay animation speed. Available if isAutoplay: true. number 4000
:isInfiniteLoop Enables infinite loop. boolean true


Name Description
hs-carousel A wrapper for a collection of slides. It must contain the overflow-hidden class, it is needed for the slider to work correctly.
hs-carousel-body Slides container.
hs-carousel-slide Single slide.
hs-carousel-prev Previous slide button.
hs-carousel-next Next slide button.
hs-carousel-pagination Pagination.
hs-carousel-active: A modifier that allows you to set Tailwind classes when the active slide was shown.


The HSCarousel object is contained within the global window object

Method Description
Public methods
goToPrev() Go to the previous slide.
goToNext() Go to the next slide.
goTo(index) Go to the slide by index. Starts from 0.
recalculateWidth() Recalculate the width of the carousel.
Static methods
HSCarousel.getInstance(target) Returns the element associated to the target.
  • target should be a Node or string (valid selector)

Go to some slide by button click example (public method).

                        const carousel = new HSCarousel(document.querySelector('#carousel'));
                        const goTo2Btn = document.querySelector('#go-to-2-btn');

                        goTo2Btn.addEventListener('click', () => {

Go to some slide by button click example (mixed).

                        const carousel = HSCarousel.getInstance('#carousel');
                        const goTo2Btn = document.querySelector('#go-to-2-btn');
                        goTo2Btn.addEventListener('click', () => {

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Plugins UI Mockups
Check out Preline UI Components