The carousel component can be initialized by using the data-carousel={ static | slide } data attribute and by applying a unique id attribute to the parent element.
Use data-carousel="static" to prevent the carousel sliding by default
Use data-carousel="slide" to infinitely cycle through the items
You can add as many carousel items as you want, but make sure that you add the data-carousel-item data attribute to each of them and set a single item to active by applying the active value to the data attribute.
Use the duration-* and the animation classes from Tailwind CSS to apply custom effects to the carousel items and do not forget to set the hidden class by default to prevent flickering.
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.
You can customize the control elements with the classes from Tailwind CSS anyhow you want.
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.
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.