Default slider
data-carousel="static" to prevent the carousel sliding by default and
data-carousel="slide" to infinitely cycle through the items
Slider with Controls
Use the data-carousel-prev and data-carousel-next data attribute to listen to click events which will trigger the slide event from the carousel component to each direction.
Slider with Indicators
Show the carousel indicators by adding the data-carousel-slide-to={position} to any number or style of indicator elements where the value equals the position of the slider element.
Animation
You can easily customize the duration and animation style of the carousel component by using the duration-* and ease-* utility classes from Tailwind CSS.
Image Slider
-
Adventurer Cheesecake Brownie
-
Adventurer Lemon
-
Adventurer Donut
-
Adventurer Cheesecake Brownie
Image Slider thumbnails
Image carousel
Range Slider
Get started with this default example with values from 1 to 100 and the default value of 50.
Apply the disabled class to disallow the users from further selecting values.
Use the min and max attributes on the range component to set the limits of the range values.
Use the step attribute on the range component to set the increment with which the values will change.
Apply the small, default, and large sizes for the range component by applying the range-sm and range-lg utility classes from Flowbite and Tailwind CSS.
Use the following example to add labels to each value milestone of the range slider component.
