Carousel.
Make use of Tailwind's unique Carousel styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
CarouselCarousel
Slides only
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="block w-full rounded-xl" src="assets/images/big/img1.webp" alt="First slide">
</div>
<div class="swiper-slide">
<img class="block w-full rounded-xl" src="assets/images/big/img2.webp" alt="First slide">
</div>
<div class="swiper-slide">
<img class="block w-full rounded-xl" src="assets/images/big/img3.webp" alt="First slide">
</div>
</div>
<div class="pagination">
<div class="swiper-button-prev btn-prev"></div>
<div class="swiper-button-next btn-next"></div>
</div>
<div class="swiper-pagination "></div>
</div>
With Captions
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="carousel-item active">
<img class="block w-full rounded-xl" src="assets/images/big/img2.webp" alt="First slide">
<div class="carousel-caption bg-black/60 [text-shadow:2px_2px_4px_rgba(0,0,0,0.78)] md:block hidden absolute right-[15%] left-[15%] bottom-5 py-5 text-center">
<h5 class="mb-2 text-[1.8rem] text-white">First slide label</h5>
<p class="text-[rgba(255,255,255,.7)]">Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="carousel-item">
<img class="block w-full rounded-xl" src="assets/images/big/img3.webp" alt="Second slide">
<div class="carousel-caption bg-black/60 [text-shadow:2px_2px_4px_rgba(0,0,0,0.78)] md:block hidden absolute right-[15%] left-[15%] bottom-5 py-5 text-center">
<h5 class="mb-2 text-[1.8rem] text-white">Second slide label</h5>
<p class="text-[rgba(255,255,255,.7)]">Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="carousel-item">
<img class="block w-full rounded-xl" src="assets/images/big/img4.webp" alt="Third slide">
<div class="carousel-caption bg-black/60 [text-shadow:2px_2px_4px_rgba(0,0,0,0.78)] md:block hidden absolute right-[15%] left-[15%] bottom-5 py-5 text-center">
<h5 class="mb-2 text-[1.8rem] text-white">Third slide label</h5>
<p class="text-[rgba(255,255,255,.7)]">Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
</div>
</div>
Slides Only
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="block w-full rounded-xl" src="assets/images/big/img3.webp" alt="First slide"></div>
<div class="swiper-slide"><img class="block w-full rounded-xl" src="assets/images/big/img4.webp" alt="First slide"></div>
<div class="swiper-slide"><img class="block w-full rounded-xl" src="assets/images/big/img5.webp" alt="First slide"></div>
</div>
</div>
Slides With indicators
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="block w-full rounded-xl" src="assets/images/big/img4.webp" alt="First slide"></div>
<div class="swiper-slide"><img class="block w-full rounded-xl" src="assets/images/big/img5.webp" alt="First slide"></div>
<div class="swiper-slide"><img class="block w-full rounded-xl" src="assets/images/big/img6.webp" alt="First slide"></div>
</div>
<div class="pagination">
<div class="swiper-button-prev btn-prev"></div>
<div class="swiper-button-next btn-next"></div>
</div>
<div class="swiper-pagination "></div>
</div>
Slides With captions
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="carousel-item active">
<img class="block w-full rounded-xl" src="assets/images/big/img5.webp" alt="First slide">
<div class="carousel-caption bg-black/60 [text-shadow:2px_2px_4px_rgba(0,0,0,0.78)] md:block hidden absolute right-[15%] left-[15%] bottom-5 py-5 text-center">
<h5 class="mb-2 text-[1.8rem] text-white">First slide label</h5>
<p class="text-[rgba(255,255,255,.7)]">Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="carousel-item">
<img class="block w-full rounded-xl" src="assets/images/big/img6.webp" alt="Second slide">
<div class="carousel-caption bg-black/60 [text-shadow:2px_2px_4px_rgba(0,0,0,0.78)] md:block hidden absolute right-[15%] left-[15%] bottom-5 py-5 text-center">
<h5 class="mb-2 text-[1.8rem] text-white">Second slide label</h5>
<p class="text-[rgba(255,255,255,.7)]">Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="carousel-item">
<img class="block w-full rounded-xl" src="assets/images/big/img7.webp" alt="Third slide">
<div class="carousel-caption bg-black/60 [text-shadow:2px_2px_4px_rgba(0,0,0,0.78)] md:block hidden absolute right-[15%] left-[15%] bottom-5 py-5 text-center">
<h5 class="mb-2 text-[1.8rem] text-white">Third slide label</h5>
<p class="text-[rgba(255,255,255,.7)]">Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
</div>
<div class="pagination">
<div class="swiper-button-prev btn-prev"></div>
<div class="swiper-button-next btn-next"></div>
</div>
<div class="swiper-pagination bottom-5"></div>
</div>