Tailwind CSS Carousel - Flowbite
Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options
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 data-carousel={static|slide} data attribute and by applying a unique id attribute to the parent element.
data-carousel="static"to prevent the carousel sliding by defaultdata-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 don’t forget to set the hidden class by default to prevent flickering.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<div id="default-carousel" class="relative w-full" data-carousel="slide">
<!-- Carousel wrapper -->
<div class="relative h-56 overflow-hidden rounded-base md:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-1.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 2 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-2.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 3 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-3.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 4 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-4.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 5 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-5.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
</div>
<!-- Slider indicators -->
<div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
<button type="button" class="w-3 h-3 rounded-base" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-base" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-base" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
<button type="button" class="w-3 h-3 rounded-base" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
<button type="button" class="w-3 h-3 rounded-base" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
</div>
<!-- Slider controls -->
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-base bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/></svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-base bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
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.
You can customize the control elements with the classes from Tailwind CSS anyhow you want.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<div id="controls-carousel" class="relative w-full" data-carousel="static">
<!-- Carousel wrapper -->
<div class="relative h-56 overflow-hidden rounded-base md:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-1.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 2 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item="active">
<img src="/docs/images/carousel/carousel-2.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 3 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-3.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 4 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-4.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 5 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-5.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
</div>
<!-- Slider controls -->
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-base bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/></svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-base bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
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.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<div id="indicators-carousel" class="relative w-full" data-carousel="static">
<!-- Carousel wrapper -->
<div class="relative h-56 overflow-hidden rounded-base md:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item="active">
<img src="/docs/images/carousel/carousel-1.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 2 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-2.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 3 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-3.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 4 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-4.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 5 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="/docs/images/carousel/carousel-5.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
</div>
<!-- Slider indicators -->
<div class="absolute z-30 flex -translate-x-1/2 space-x-3 rtl:space-x-reverse bottom-5 left-1/2">
<button type="button" class="w-3 h-3 rounded-base" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-base" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-base" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
<button type="button" class="w-3 h-3 rounded-base" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
<button type="button" class="w-3 h-3 rounded-base" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
</div>
<!-- Slider controls -->
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-base bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/></svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-base bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
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.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<div id="animation-carousel" class="relative w-full" data-carousel="static">
<!-- Carousel wrapper -->
<div class="relative h-56 overflow-hidden rounded-base md:h-96">
<!-- Item 1 -->
<div class="hidden duration-200 ease-linear" data-carousel-item>
<img src="/docs/images/carousel/carousel-1.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 2 -->
<div class="hidden duration-200 ease-linear" data-carousel-item>
<img src="/docs/images/carousel/carousel-2.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 3 -->
<div class="hidden duration-200 ease-linear" data-carousel-item="active">
<img src="/docs/images/carousel/carousel-3.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 4 -->
<div class="hidden duration-200 ease-linear" data-carousel-item>
<img src="/docs/images/carousel/carousel-4.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
<!-- Item 5 -->
<div class="hidden duration-200 ease-linear" data-carousel-item>
<img src="/docs/images/carousel/carousel-5.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
</div>
</div>
<!-- Slider controls -->
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-base bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/></svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-base bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
JavaScript 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.
| Parameter | Type | Required | Description |
|---|---|---|---|
carouselElement
|
Element | Required | Parent HTML element of the carousel component. |
items
|
Array | Required | Pass an array of carousel item objects including the position and the element. |
options
|
Object | Optional | Pass an object of options to set the interval, indicators, and callback functions. |
instanceOptions
|
Object | Optional | Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance. |
Options #
Use these options for the Carousel object to set the default position, interval, indicators, custom styles, and callback functions.
| Option | Type | Description |
|---|---|---|
defaultPosition
|
Integer | Set the default active slider item based on its position (starts from [0-x]). |
interval
|
Integer | Set the interval duration in milliseconds when the carousel is cycling. |
indicators
|
Array | An optional object of indicator elements and custom classes. |
onNext
|
Function | Set a callback function when the next carousel item has been shown. |
onPrev
|
Function | Set a callback function when the previous carousel item has been shown. |
onChange
|
Function | Set 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.
| Method | Description |
|---|---|
next()
|
Use this method to go to the next slide of the carousel component. |
prev()
|
Use this method to go to the previous slide of the carousel component. |
slideTo(position)
|
Use this method to go the carousel with the position that you set as a parameter. |
cycle()
|
Use this method to start cycling the carousel component based on the default interval duration. |
pause()
|
Use this method to stop the automatic cycling of the carousel component. |
getItem(position)
|
Get the carousel item based on the position number that you set as a parameter. |
getActiveItem()
|
Get the current active carousel item. |
updateOnNext(callback)
|
Set a callback function when the next carousel item has been shown. |
updateOnPrev(callback)
|
Set a callback function when the previous carousel item has been shown. |
updateOnChange(callback)
|
Set a callback function when the the slide item inside the carousel has been changed. |
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.
- carousel.js
Copy to clipboard
const carouselElement = document.getElementById('carousel-example');
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'),
},
];
// options with default values
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');
},
};
// instance options object
const instanceOptions = {
id: 'carousel-example',
override: true
};
Create a new carousel object using the options set above.
- carousel.js
Copy to clipboard
import { Carousel } from 'flowbite';
const carousel = new Carousel(carouselElement, items, options, instanceOptions);
Use the next() and prev() 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.
- carousel.js
Copy to clipboard
// goes to the next (right) slide
carousel.next();
// goes to the previous (left) slide
carousel.prev();
Use the slideTo(position) public method to jump to the carousel slide item with the specified position.
- carousel.js
Copy to clipboard
// jumps to the 3rd position (position starts from 0)
carousel.slideTo(2);
Use the cycle() method to start an automated cycling where the duration is the milliseconds of time between each slide and the pause() method to clear the cycle event.
- carousel.js
Copy to clipboard
// 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 hidden class from Tailwind CSS to hide the carousel items by default.
- carousel.html
Copy to clipboard
<div id="carousel-example" class="relative w-full">
<!-- Carousel wrapper -->
<div
class="relative h-56 overflow-hidden rounded-base sm:h-64 xl:h-80 2xl:h-96"
>
<!-- Item 1 -->
<div id="carousel-item-1" class="hidden duration-700 ease-in-out">
<img
src="/docs/images/carousel/carousel-1.svg"
class="absolute left-1/2 top-1/2 block w-full -translate-x-1/2 -translate-y-1/2"
alt="..."
/>
</div>
<!-- Item 2 -->
<div id="carousel-item-2" class="hidden duration-700 ease-in-out">
<img
src="/docs/images/carousel/carousel-2.svg"
class="absolute left-1/2 top-1/2 block w-full -translate-x-1/2 -translate-y-1/2"
alt="..."
/>
</div>
<!-- Item 3 -->
<div id="carousel-item-3" class="hidden duration-700 ease-in-out">
<img
src="/docs/images/carousel/carousel-3.svg"
class="absolute left-1/2 top-1/2 block w-full -translate-x-1/2 -translate-y-1/2"
alt="..."
/>
</div>
<!-- Item 4 -->
<div id="carousel-item-4" class="hidden duration-700 ease-in-out">
<img
src="/docs/images/carousel/carousel-4.svg"
class="absolute left-1/2 top-1/2 block w-full -translate-x-1/2 -translate-y-1/2"
alt="..."
/>
</div>
</div>
<!-- Slider indicators -->
<div
class="absolute bottom-5 left-1/2 z-30 flex -translate-x-1/2 space-x-3 rtl:space-x-reverse"
>
<button
id="carousel-indicator-1"
type="button"
class="h-3 w-3 rounded-base"
aria-current="true"
aria-label="Slide 1"
></button>
<button
id="carousel-indicator-2"
type="button"
class="h-3 w-3 rounded-base"
aria-current="false"
aria-label="Slide 2"
></button>
<button
id="carousel-indicator-3"
type="button"
class="h-3 w-3 rounded-base"
aria-current="false"
aria-label="Slide 3"
></button>
<button
id="carousel-indicator-4"
type="button"
class="h-3 w-3 rounded-base"
aria-current="false"
aria-label="Slide 4"
></button>
</div>
<!-- Slider controls -->
<button
id="data-carousel-prev"
type="button"
class="group absolute left-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
>
<span
class="inline-flex h-10 w-10 items-center justify-center rounded-base bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70"
>
<svg
class="h-4 w-4 text-white dark:text-gray-800"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 6 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 1 1 5l4 4"
/>
</svg>
<span class="hidden">Previous</span>
</span>
</button>
<button
id="data-carousel-next"
type="button"
class="group absolute right-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
>
<span
class="inline-flex h-10 w-10 items-center justify-center rounded-base bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70"
>
<svg
class="h-4 w-4 text-white dark:text-gray-800"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 6 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 9 4-4-4-4"
/>
</svg>
<span class="hidden">Next</span>
</span>
</button>
</div>
If you want to set trigger the next or previous slide item for the any button, just add some event listeners and call the next() and prev() methods on the Carousel object.
- carousel.js
Copy to clipboard
const $prevButton = document.getElementById('data-carousel-prev');
const $nextButton = document.getElementById('data-carousel-next');
$prevButton.addEventListener('click', () => {
carousel.prev();
});
$nextButton.addEventListener('click', () => {
carousel.next();
});
TypeScript #
If you’re using the TypeScript configuration from Flowbite then you can import the types for the Carousel class, parameters and its options.
Here’s an example that applies the types from Flowbite to the code above:
- carousel.ts
Copy to clipboard
import { Carousel } from 'flowbite';
import type {
CarouselItem,
CarouselOptions,
CarouselInterface,
} from 'flowbite';
import type { InstanceOptions } from 'flowbite';
const carouselElement: HTMLElement = document.getElementById('carousel-example');
const items: CarouselItem[] = [
{
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'),
},
];
// object options with default values
const options: CarouselOptions = {
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');
},
};
// instance options object
const instanceOptions: InstanceOptions = {
id: 'carousel-example',
override: true
};
const carousel: CarouselInterface = new Carousel(carouselElement, items, options, instanceOptions);
carousel.cycle();
// set event listeners for prev and next buttons
const $prevButton = document.getElementById('data-carousel-prev');
const $nextButton = document.getElementById('data-carousel-next');
$prevButton.addEventListener('click', () => {
carousel.prev();
});
$nextButton.addEventListener('click', () => {
carousel.next();
});
