Component
Tailwind CSS carousel
Use Tailwind Carousel Component to effortlessly navigate through a series of elements or images.This feature-rich component offers customizable controls, indicators, intervals, and options, providing a seamless and interactive browsing experience.
Here, We have integrate Swiper Carousel with Tailwind CSS to built different styles of carousel.Firstly You need to add Swiper Carousel CDN to work slider perfectly.
1. Add Following Swiper Carousel CDN
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>2. Add HTML Code of Carousel
3. Add Custom CSS Code of Carousel
4. Add JS code for Carousel functionality.
You can customize JAVASCRIPT given below html code, according to your requirement and settings of swiper sliders.
Default Tailwind Carousel Slider
Use below example if you want single slide to show with navigation controls and pagination.
<!--HTML CODE-->
<div class="w-full relative">
<div class="swiper default-carousel swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 1 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 2 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 3 </span>
</div>
</div>
</div>
<div class="flex items-center gap-8 lg:justify-start justify-center">
<button id="slider-button-left" class="swiper-button-prev group !p-2 flex justify-center items-center border border-solid border-indigo-600 !w-12 !h-12 transition-all duration-500 rounded-full !top-2/4 !-translate-y-8 !left-5 hover:bg-indigo-600 " data-carousel-prev>
<svg class="h-5 w-5 text-indigo-600 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.0002 11.9999L6 7.99971L10.0025 3.99719" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button id="slider-button-right" class="swiper-button-next group !p-2 flex justify-center items-center border border-solid border-indigo-600 !w-12 !h-12 transition-all duration-500 rounded-full !top-2/4 !-translate-y-8 !right-5 hover:bg-indigo-600" data-carousel-next>
<svg class="h-5 w-5 text-indigo-600 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.99984 4.00012L10 8.00029L5.99748 12.0028" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
/* CSS Code */
.swiper-wrapper {
width: 100%;
height: max-content !important;
padding-bottom: 64px !important;
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
.swiper-pagination-bullet {
background: #4f46e5;
}<!--JAVASCRIPT CODE-->
<script>
var swiper = new Swiper(".default-carousel", {
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>With Multiple Slides
Use following example to show tailwind carousel multiple items in a card format.
<!--HTML CODE-->
<div class="w-full relative">
<div class="swiper multiple-slide-carousel swiper-container relative">
<div class="swiper-wrapper mb-16">
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-2xl font-semibold text-indigo-600">Slide 1 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-2xl font-semibold text-indigo-600">Slide 2 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-2xl font-semibold text-indigo-600">Slide 3 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-2xl font-semibold text-indigo-600">Slide 4 </span>
</div>
</div>
</div>
<div class="absolute flex justify-center items-center m-auto left-0 right-0 w-fit bottom-12">
<button id="slider-button-left" class="swiper-button-prev group !p-2 flex justify-center items-center border border-solid border-indigo-600 !w-12 !h-12 transition-all duration-500 rounded-full hover:bg-indigo-600 !-translate-x-16" data-carousel-prev>
<svg class="h-5 w-5 text-indigo-600 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.0002 11.9999L6 7.99971L10.0025 3.99719" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button id="slider-button-right" class="swiper-button-next group !p-2 flex justify-center items-center border border-solid border-indigo-600 !w-12 !h-12 transition-all duration-500 rounded-full hover:bg-indigo-600 !translate-x-16" data-carousel-next>
<svg class="h-5 w-5 text-indigo-600 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.99984 4.00012L10 8.00029L5.99748 12.0028" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
/* CSS Code */
.swiper-wrapper {
width: 100%;
height: max-content !important;
padding-bottom: 64px !important;
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
.swiper-pagination-bullet {
background: #4f46e5;
}<!--JAVASCRIPT CODE-->
<script>
var swiper = new Swiper(".multiple-slide-carousel", {
loop: true,
slidesPerView: 3,
spaceBetween: 20,
navigation: {
nextEl: ".multiple-slide-carousel .swiper-button-next",
prevEl: ".multiple-slide-carousel .swiper-button-prev",
},
breakpoints: {
1920: {
slidesPerView: 3,
spaceBetween: 30
},
1028: {
slidesPerView: 2,
spaceBetween: 30
},
990: {
slidesPerView: 1,
spaceBetween: 0
}
}
});
</script>Tailwind Carousel with pagination fraction
Following Carousel in Tailwind CSS is used to show fraction counts of total slides and current slide.
<!--HTML CODE-->
<div class="w-full relative">
<div class="swiper fraction-slide-carousel swiper-container relative">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 1 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 2 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 3 </span>
</div>
</div>
</div>
<div class="flex items-center gap-8 lg:justify-start justify-center">
<button id="slider-button-left" class="swiper-button-prev group !p-2 flex justify-center items-center border border-solid border-indigo-600 !w-12 !h-12 transition-all duration-500 rounded-full !top-2/4 !-translate-y-8 !left-5 hover:bg-indigo-600" data-carousel-prev>
<svg class="h-5 w-5 text-indigo-600 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.0002 11.9999L6 7.99971L10.0025 3.99719" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button id="slider-button-right" class="swiper-button-next group !p-2 flex justify-center items-center border border-solid border-indigo-600 !w-12 !h-12 transition-all duration-500 rounded-full !top-2/4 !-translate-y-8 !right-5 hover:bg-indigo-600" data-carousel-next>
<svg class="h-5 w-5 text-indigo-600 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.99984 4.00012L10 8.00029L5.99748 12.0028" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="swiper-pagination"></div>
</div>
<
</div>/* CSS Code */
.swiper-wrapper {
width: 100%;
height: max-content !important;
padding-bottom: 64px !important;
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
.swiper-pagination-current {
color: #111827 !important;
}
.swiper-pagination-total {
color: #9CA3AF;
}<!--JAVASCRIPT CODE-->
<script>
var swiper = new Swiper(".fraction-slide-carousel", {
loop: true,
fraction: true,
navigation: {
nextEl: ".fraction-slide-carousel .swiper-button-next",
prevEl: ".fraction-slide-carousel .swiper-button-prev",
},
pagination: {
el: '.fraction-slide-carousel .swiper-pagination',
type: 'fraction',
formatFractionCurrent: function(number) {
return number;
}
},
});
</script>Auto Slide With Progress Bar
Use following Tailwind Carousel Example, which shows progress bar below slides and have auto slide effect.
<!--HTML CODE-->
<div class="w-full relative">
<div class="swiper progress-slide-carousel swiper-container relative">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 1 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 2 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 3 </span>
</div>
</div>
</div>
<div class="swiper-pagination !bottom-2 !top-auto !w-80 right-0 mx-auto bg-gray-100"></div>
</div>
</div>/* CSS Code */
.swiper-wrapper {
width: 100%;
height: max-content !important;
padding-bottom: 64px !important;
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #4F46E5 !important;
} <!--JAVASCRIPT CODE-->
<script>
var swiper = new Swiper(".progress-slide-carousel", {
loop: true,
fraction: true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
},
pagination: {
el: ".progress-slide-carousel .swiper-pagination",
type: "progressbar",
},
});
</script>Vertical Tailwind Slider
This Example can be used for vertical carousel with controls.
<!--HTML CODE-->
<div class="w-full relative">
<div class="swiper vertical-slide-carousel swiper-container relative h-96">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 1 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 2 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 3 </span>
</div>
</div>
</div>
<div class="swiper-pagination !right-10 !left-full !top-1/3 !translate-y-8"></div>
</div>
</div>/* CSS Code */
.swiper-wrapper {
width: 100%;
height: max-content !important;
padding-bottom: 64px !important;
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
.swiper-pagination-bullet {
background: #4F46E5;
}
.swiper-pagination-bullet-active {
background: #4F46E5 !important;
}
<!--JAVASCRIPT CODE-->
<script>
var swiper = new Swiper(".vertical-slide-carousel", {
loop: true,
direction: 'vertical',
mousewheelControl: true,
mousewheel: {
releaseOnEdges: true,
},
spaceBetween: 30,
grabCursor: true,
pagination: {
el: ".vertical-slide-carousel .swiper-pagination",
clickable: true,
},
});
</script>Centered Tailwind Carousel
Use following Tailwind Carousel Cards can used to aligned one slide always on center position.
<!--HTML CODE-->
<div class="w-full relative">
<div class="swiper centered-slide-carousel swiper-container relative ">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 1 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 2 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 3 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 4 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 5 </span>
</div>
</div>
<div class="swiper-slide">
<div class="bg-indigo-50 rounded-2xl h-96 flex justify-center items-center">
<span class="text-3xl font-semibold text-indigo-600">Slide 6 </span>
</div>
</div>
</div>
<div class="swiper-pagination "></div>
</div>
</div>/* CSS Code */
.swiper-wrapper {
width: 100%;
height: max-content !important;
padding-bottom: 64px !important;
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
position: relative;
}
.swiper-pagination-bullet {
background: #4F46E5;
}
.swiper-pagination-bullet-active {
background: #4F46E5 !important;
}
<!--JAVASCRIPT CODE-->
<script>
var swiper = new Swiper(".centered-slide-carousel", {
centeredSlides: true,
paginationClickable: true,
loop: true,
spaceBetween: 30,
slideToClickedSlide: true,
pagination: {
el: ".centered-slide-carousel .swiper-pagination",
clickable: true,
},
breakpoints: {
1920: {
slidesPerView: 4,
spaceBetween: 30
},
1028: {
slidesPerView: 2,
spaceBetween: 10
},
990: {
slidesPerView: 1,
spaceBetween: 0
}
}
});
</script>