The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators based on the JavaScript object from Flowbite.
Default slider
The carousel component can be initialized by using the
Previous
Next
2 data attribute and by applying a unique
Previous
Next
3 attribute to the parent element.
4 to prevent the carousel sliding by default
5 to infinitely cycle through the items
You can add as many carousel items as you want, but make sure that you add the
Previous
Next
6 data attribute to each of them and set a single item to active by applying the
Previous
Next
7 value to the data attribute.Use the
Previous
Next
8 and the animation classes from Tailwind CSS to apply custom effects to the carousel items and don’t forget to set the
Previous
Next
9 class by default to prevent flickering.Toggle full view Toggle tablet view Toggle mobile view
First Slide
Previous
Next
Expand codeControls
Use the
Previous
Next
0 and
Previous
Next
1 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.
Toggle full view Toggle tablet view Toggle mobile view
Previous
Next
Expand codeShow the carousel indicators by adding the
Previous
Next
2 to any number or style of indicator elements where the value equals the position of the slider element.Toggle full view Toggle tablet view Toggle mobile view
Previous
Next
Expand codeAnimation
You can easily customize the duration and animation style of the carousel component by using the
Previous
Next
8 and
Previous
Next
4 utility classes from Tailwind CSS.Toggle full view Toggle tablet view Toggle mobile view
Previous
Next
Expand codeJavaScript behaviour
Use the Carousel class from Flowbite to create an object that you can use to apply custom styles, change the active slide item, set callback functions directly from JavaScript.
Object parameters
Pass the object parameters for the Carousel object to set the carousel items and options.
ParameterTypeRequiredDescription
Previous
Next
5ArrayRequiredPass an array of carousel item objects including the position and the element.
Previous
Next
6ObjectOptionalPass an object of options to set the interval, indicators, and callback functions.Options
Use these options for the Carousel object to set the default position, interval, indicators, custom styles, and callback functions.
OptionTypeDescription
Previous
Next
7IntegerSet the default active slider item based on its position [starts from [0-x]].
Previous
Next
8IntegerSet the interval duration in miliseconds when the carousel is cycling.
Previous
Next
9ArrayAn optional object of indicator elements and custom classes.
Previous
Next
0FunctionSet a callback function when the next carousel item has been shown.
Previous
Next
1FunctionSet a callback function when the previous carousel item has been shown.
Previous
Next
2FunctionSet a callback function when the position of the carousel item has been changed.Methods
Use the following methods on the Carousel object to programmatically manipulate the behaviour.
MethodDescription
Previous
Next
3Use this method to go to the next slide of the carousel component.
Previous
Next
4Use this method to go to the previous slide of the carousel component.
Previous
Next
5Use this method to go the carousel with the position that you set as a parameter.
Previous
Next
6Use this method to start cycling the carousel component based on the default interval duration.
Previous
Next
7Use this method to stop the automatic cycling of the carousel component.Example
Check out the following example to learn how to programmatically create a new Carousel object by passing the parameters, using the methods, and the callback functions.
const items = [
{
position: 0,
el: document.getElementById['carousel-item-1']
},
{
position: 1,
el: document.getElementById['carousel-item-2']
},
{
position: 2,
el: document.getElementById['carousel-item-3']
},
{
position: 3,
el: document.getElementById['carousel-item-4']
},
];
const options = {
defaultPosition: 1,
interval: 3000,
indicators: {
activeClasses: 'bg-white dark:bg-gray-800',
inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',
items: [
{
position: 0,
el: document.getElementById['carousel-indicator-1']
},
{
position: 1,
el: document.getElementById['carousel-indicator-2']
},
{
position: 2,
el: document.getElementById['carousel-indicator-3']
},
{
position: 3,
el: document.getElementById['carousel-indicator-4']
},
]
},
// callback functions
onNext: [] => {
console.log['next slider item is shown'];
},
onPrev: [ ] => {
console.log['previous slider item is shown'];
},
onChange: [ ] => {
console.log['new slider item has been shown'];
}
};
Create a new carousel object using the options set above.
import { Carousel } from 'flowbite';
const carousel = new Carousel[items, options];
Use the
Previous
Next
3 and
Previous
Next
4 public methods on the carousel object to jump to the left or right carousel slide item based on the position of the current active item.// goes to the next [right] slide
carousel.next[]
// goes to the previous [left] slide
carousel.prev[]
Use the
Previous
Next
5 public method to jump to the carousel slide item with the specified position.// jumps to the 3rd position [position starts from 0]
carousel.slideTo[2]
Use the
Previous
Next
6 method to start an automated cycling where the duration is the miliseconds of time between each slide and the
Previous
Next
7 method to clear the cycle event.// starts or resumes the carousel cycling [automated sliding]
carousel.cycle[]
// pauses the cycling [automated sliding]
carousel.pause[]
HTML Markup
Here is an example of the HTML markup that you can use for the JavaScript example above. Please note that you should use the
Previous
Next
9 class from Tailwind CSS to hide the carousel items by default.
First Slide
Previous
Next
If you want to set trigger the next or previous slide item for the any button, just add some event listeners and call the
Previous
Next
3 and
Previous
Next
4 methods on the Carousel object.
Previous
Next
0TypeScript
If you’re using the TypeScript configuration from Flowbite then you can import the types for the Carousel class, parameters and its options.