• 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 rounded pagination indicators.
carousel-boxComponentBase class for box shape 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.
carousel-disabled:{tw-utility-class}ModifierA modifier that allows you to set Tailwind classes for arrow buttons when the they are disabled.
carousel-dragging:{tw-utility-class}ModifierA modifier that allows you to set Tailwind classes for carousel-body when dragging.

Basic example

Default

Below example shows the default carousel with three slides.

Indicators

The example below demonstrates a carousel with indicators. Use dotsItemClasses: to style your custom indicators, and apply carousel-active to style the active indicator.

Illustrations

Progress

Below example shows carousel with progress.

Image carousel

Below example shows the carousel with images.

Thumbs gallery (Horizontal)

Below example shows the carousel with horizontal thumbnails.

Thumbs gallery (Vertical)

new

Below example shows the carousel with vertical thumbnails.

Multi-Slide Carousel

new

A carousel component displays multiple slides arranged side-by-side.

Centered

new
Set isCentered:true to align the slides to the center of the carousel.

Draggable Slides

new
Set isDraggable:true to enable the drag feature for slides. This doesn’t work if isSnap is enabled.

Snap Point Scrolling

new
Use "isSnap": true to allow slides to scroll and center relative to the carousel’s center. You need to add snap-x and snap-mandatory classes to carousel and snap-center classes to each carousel-slide.

Auto Height

new
Set isAutoHeight:true to automatically adjust the carousel height with each slide change.

Info

new

Include carousel-info within data-carousel and place carousel-info-current and carousel-info-total inside carousel-info to show the current slide number and the total number of slides.

Destroy/Reinitialize

new
The destroy method is provided to facilitate the destruction of a carousel.

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 true to deactivate the infinite looping of slides in the carousel. The default value for this option is false.

isRTL

new

The following example demonstrates how to enable RTL mode in a carousel by setting "isRTL": 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
:dotsItemClassesDefines the classes to be added to the automatically generated point elements. Separate each CSS class with a space.string—
:isAutoHeightSets the height of the carousel to the height of the current slide.booleanfalse
:isAutoPlayEnables autoplay.booleanfalse
:speedAutoplay animation speed. Available if isAutoplay: true.number4000
:updateDelayAllows you to delay the update function while resizing a window, making it well-suited for image sliders to achieve more accurate image size calculations.number0
:isInfiniteLoopEnables infinite loop.booleanfalse
:isCenteredEnables centered mode, which adds space on the sides to keep slides centered.booleanfalse
:isSnapActivates a mode that lets you scroll the slider’s content along the x-axis, keeping the active slide centered within the slider.booleanfalse
:isDraggableAllows slide navigation via dragging by adding the carousel-dragging:transition-none class to the carousel-body. This feature is not compatible with the isSnap: true setting.booleanfalse
:isRTLTurns on RTL mode.booleanfalse
:hasSnapSpacersAdds extra elements to achieve a steady, centered alignment effect.booleantrue
:slidesQtyEnables setting the number of slides to display based on screen resolution when the parameter is provided as an object. If a number is provided instead, that number of slides will display across all screen resolutions.object {‘xs’ ‘sm’ ‘md’ ’lg’ ‘xl’ ‘2xl’, number: number}, number1

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.
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
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);
});

    Destroy instance.

    const { element } = HSCarousel.getInstance('#carousel-to-destroy', true);
const destroyBtn = document.querySelector('#destroy-btn');

destroyBtn.addEventListener('click', () => {
  element.destroy();
});