One of my favorite frameworks to work with when building user interfaces is Tailwind CSS coupled with Flowbite because of the utility first approach and the components from Flowbite.
Today I want to show you how to use the carousel slider component from Flowbite built using the utility classes from Tailwind CSS.
Let's get started!
Tailwind CSS Carousel
The easiest way to get started with the carousel component is to install Flowbite as a plugin inside your Tailwind CSS project and then include the JS file.
By following the quickstart guide you need to add the following things:
- Install Flowbite as a dependency using NPM by running the following command:
npm i flowbite
- Require Flowbite as a plugin inside the
tailwind.config.jsfile:
module.exports = {
plugins: [
require('flowbite/plugin')
]
}
- Include the main JavaScript file to make interactive elements work:
<script src="../path/to/flowbite/dist/flowbite.js"></script>
- Additionally to your own content data you should add flowbite to apply the classes from the interactive elements in the
tailwind.config.jsfile:
module.exports = {
content: [
"./node_modules/flowbite/**/*.js"
]
}
Awesome, now that you've installed Flowbite you can start using the interactive components such as the carousel slider.
Use the following HTML code in one of your files:
<div id="default-carousel" class="relative" data-carousel="static">
<!-- Carousel wrapper -->
<div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
<img src="/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-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="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-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="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>
</div>
<!-- Slider indicators -->
<div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
</div>
<!-- Slider controls -->
<button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 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 sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
<span class="hidden">Previous</span>
</span>
</button>
<button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 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 sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<span class="hidden">Next</span>
</span>
</button>
</div>
As you can see, using the data attributes the carousel component will automatically work based on the next, prev buttons and the indicators.
You can use the data-carousel="slide" data attribute on the modal element to make it cycle automatically.
Javascript
You can also create a carousel component directly from JavaScript instead of using the data attributes.
First of all, add the following HTML markup:
<div class="relative">
<!-- Carousel wrapper -->
<div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
<!-- Item 1 -->
<div id="carousel-item-1" class="hidden duration-700 ease-in-out">
<span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
<img src="/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 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="block absolute top-1/2 left-1/2 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="block absolute top-1/2 left-1/2 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="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>
</div>
<!-- Slider indicators -->
<div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
<button id="carousel-indicator-1" type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1"></button>
<button id="carousel-indicator-2" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"></button>
<button id="carousel-indicator-3" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"></button>
<button id="carousel-indicator-4" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4"></button>
</div>
<!-- Slider controls -->
<button id="data-carousel-prev" type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 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 sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
<span class="hidden">Previous</span>
</span>
</button>
<button id="data-carousel-next" type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 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 sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<span class="hidden">Next</span>
</span>
</button>
</div>
As you can see, we have not used any data attributes, but that means that we need to initialize a Carousel object from JS ourselves.
Create the following constants that will be passed as parameters to the Carousel object.
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 = {
activeItemPosition: 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');
}
};
Now you can create a new Carousel object:
const carousel = new Carousel(items, options);
Now you can use the methods like next or prev to programatically slide the current item to the right or left.
// goes to the next (right) slide
carousel.next()
// goes to the previous (left) slide
carousel.prev()
You can also use the slideTo method to change the currently active slider item to the desired position.
// jumps to the 3rd position (position starts from 0)
carousel.slideTo(2)
You can also automatically cycle or pause the slider:
// starts or resumes the carousel cycling (automated sliding)
carousel.cycle()
// pauses the cycling (automated sliding)
carousel.pause()
Check out the official Tailwind CSS carousel component page from Flowbite to learn about all of the options and examples.
Top comments (4)
The JS part looks clean.
Thanks for sharing
Thanks!
Nice ...
To implement a carousel slider with Tailwind CSS and Flowbite, begin by integrating the Flowbite framework into your project. Leverage Flowbite's utility-first classes for layout and styling, complementing Tailwind's approach seamlessly. Design the carousel structure using Flowbite's components, and enhance it with Tailwind classes for responsive design. Employ Tailwind's animation and transition classes to achieve smooth slide transitions. This collaborative integration of Tailwind CSS and Flowbite allows for a powerful and flexible carousel slider, combining the strengths of both frameworks for a polished and efficient web development experience.
Check out our blog : Tailwind Carousel: Create Responsive Carousels Easily - Purecode