• components
  • Carousel

components

Tailwind CSS Carousel

Utilize the carousel component to navigate through various elements and images with customized controls, indicators, intervals, and settings.

Require FlyonUI JS
Class Name
Type
Description
carouselComponentA wrapper for a collection of slides. It must contain the overflow-hidden class, it is needed for the slider to work correctly.
carousel-bodyComponentSlides container.
carousel-slideComponentSingle slide.
carousel-prevComponentPrevious slide button.
carousel-nextComponentNext slide button.
carousel-paginationComponentBase class for pagination container.
carousel-dotComponentBase class for pagination indicators.
activeModifierWhen it is applied, the slide becomes visible.
carousel-active:{tw-utility-class}ModifierIt sets Tailwind classes when the active slide is shown.

Basic example

Default

Below example shows the default carousel with three slides.

Indicators

Below example shows the carousel with indicators.

Illustrations

Progress

Below example shows carousel with progress.

Image carousel

Below example shows the carousel with images.

Thumbs gallery

Below example shows the carousel with thumbnails.

Options usage

Current index

Assign the value of the data-carousel attribute as an object. Within this object, set the currentIndex option to index-number for default active slide based on its index. By default, its value is 0.

IsAutoPlay & speed

Set the data-carousel attribute’s value as an object. Inside this object, configure the isAutoPlay option to true to enable auto-play in the carousel. By default, its value is false.

In addition to isAutoPlay, set the speed option to number within the configuration to determine the auto-play speed. The default value for this option is 4000.

IsInfiniteLoop

Within the data-carousel attribute’s value, create an object. Inside this object, set the isInfiniteLoop option to false to deactivate the infinite looping of slides in the carousel. The default value for this option is true.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-carouselActivates a carousel by specifying on an element.——
:currentIndexSpecifies the index of the current slide initially (from 0 to slides quantity).number0
:loadingClassesSpecifies which classes should be removed after the carousel is loaded. CSS classes should be separated with space.stringopacity-0
:isAutoPlayEnables autoplay.booleanfalse
:speedAutoplay animation speed. Available if isAutoplay: true.number4000
:isInfiniteLoopEnables infinite loop.booleantrue

Methods

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)

    Method usage

    Below, we demonstrate how to use the methods. Apply the ID to the carousel container. To test the other method, copy the provided code into your console and click the button.

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

    // This method is used in above example.
const goTo2Btn = document.querySelector('#go-to-2-slide');

goTo2Btn.addEventListener('click', () => {
const carousel = new HSCarousel(document.querySelector('#carouselTarget'));
carousel.goTo(1);
});

    Go to certain slide by button click example (mixed method).

    const carousel = HSCarousel.getInstance('#carouselTarget');
const goTo2Btn = document.querySelector('#go-to-2-slide');

goTo2Btn.addEventListener('click', () => {
carousel.goTo(1);
});