- Components
- Carousel
Components
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.
Basic usage
A slideshow component for cycling through elements-images or slides of text-like a carousel.
Draggable New
Use "isDraggable": true to enable dragging option. This doesn't work if isSnap is enabled.
Snap point New
Use "isSnap": true to enable scrolling and centering relative to the center of the carousel. You need to add snap-x snap-mandatory classes to hs-carousel and snap-center classes to each hs-carousel-slide.
Auto height New
Use "isAutoHeight": true to enable recalculation of the carousel height on each slide change.
Info New
Add hs-carousel-info inside data-hs-carousel and place hs-carousel-info-current and hs-carousel-info-total inside hs-carousel-info to display information about the current and total number of slides.
Thumbnails (horizontal) New
Carousel with horizontal thumbnails.
Thumbnails (vertical) New
Carousel with vertical thumbnails.
