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.