Components

Carousel

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

Basic example

Default

Below example shows the default carousel with three slides.

First slide

Second slide

Third slide

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.

First slide

Second slide

Third slide

Illustrations

Progress

Below example shows carousel with progress.

First slide

Second slide

Third slide

Fourth slide

Fifth slide

Image carousel

Below example shows the carousel with images.

Thumbs gallery (Horizontal)

Below example shows the carousel with horizontal thumbnails.

Thumbs gallery (Vertical)

Below example shows the carousel with vertical thumbnails.

Multi-Slide Carousel

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

First slide

Second slide

Third slide

Fourth slide

Fifth slide

Sixth slide

Centered

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

First slide

Second slide

Third slide

Fourth slide

Fifth slide

Sixth slide

Draggable Slides

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

First slide

Second slide

Third slide

Fourth slide

Fifth slide

Sixth slide

Snap Point Scrolling

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`.

First slide

Second slide

Third slide

Fourth slide

Fifth slide

Sixth slide

Auto Height

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

First slide

Second slide

Third slide

Info

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.

First slide

Second slide

Third slide

0 / 0

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a carousel.

First slide

Second slide

Third slide

Fourth slide

Fifth slide

Sixth slide

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`.

First slide

Second slide

Third slide

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`.

First slide

Second slide

Third slide

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`.

First slide

Second slide

Third slide

isRTL

The following example demonstrates how to enable RTL mode in a carousel by setting `"isRTL": true`.

First slide

Second slide

Third slide

JavaScript behavior

Methods — Method usage

The `HSCarousel` object is contained within the global `window` object.

First slide

Second slide

Third slide

JavaScript

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

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

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`carousel`	component	A wrapper for a collection of slides. It must contain the `overflow-hidden` class, it is needed for the slider to work correctly.
`carousel-body`	part	Slides container.
`carousel-slide`	part	Single slide.
`carousel-prev`	part	Previous slide button.
`carousel-next`	part	Next slide button.
`carousel-pagination`	part	Base class for pagination container.
`carousel-dot`	style	Base class for rounded pagination indicators.
`carousel-box`	style	Base class for box shape pagination indicators.
`active`	state	When it is applied, the slide becomes visible.
`carousel-active:{tw-utility-class}`	variant	It sets Tailwind classes when the active slide is shown.
`carousel-disabled:{tw-utility-class}`	variant	A modifier that allows you to set Tailwind classes for arrow buttons when the they are `disabled`.
`carousel-dragging:{tw-utility-class}`	variant	A modifier that allows you to set Tailwind classes for `carousel-body` when dragging.