In this tutorial, we will create a Tailwind CSS carousel slider, a responsive carousel slider, an image slider, a Tailwind CSS autoplay carousel slider, a carousel slider with indicators, and a vertical carousel slider, with examples using Tailwind CSS and Swiper.js.
Example 1
Tailwind CSS simple carousel slider with arrow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tailwind CSS simple carousel slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="object-cover w-full h-96" src="https://source.unsplash.com/user/erondu/3000x900"
alt="image" />
</div>
<div class="swiper-slide">
<img class="object-cover w-full h-96" src="https://source.unsplash.com/collection/190727/3000x900"
alt="image" />
</div>
<div class="swiper-slide">
<img class="object-cover w-full h-96" src="https://source.unsplash.com/collection/190728/3000x900"
alt="image" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>Example 2
Tailwind CSS carousel slider with arrow & indicators.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tailwind CSS simple carousel slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="object-cover w-full h-96" src="https://source.unsplash.com/user/erondu/3000x900"
alt="image" />
</div>
<div class="swiper-slide">
<img class="object-cover w-full h-96" src="https://source.unsplash.com/collection/190727/3000x900"
alt="image" />
</div>
<div class="swiper-slide">
<img class="object-cover w-full h-96" src="https://source.unsplash.com/collection/190728/3000x900"
alt="image" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
cssMode: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
mousewheel: true,
keyboard: true,
});
</script>
</body>
</html>
Example 3
Tailwind CSS carousel autoplay slider with arrow and indicators.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tailwind CSS simple carousel slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="object-cover w-full h-96" src="https://source.unsplash.com/user/erondu/3000x900"
alt="apple watch photo" />
</div>
<div class="swiper-slide">
<img class="object-cover w-full h-96" src="https://source.unsplash.com/collection/190727/3000x900"
alt="apple watch photo" />
</div>
<div class="swiper-slide">
<img class="object-cover w-full h-96" src="https://source.unsplash.com/collection/190728/3000x900"
alt="apple watch photo" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.mySwiper', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
Example 4
Tailwind CSS vertical carousel slider with indicators.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tailwind CSS simple carousel slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<style>
html,
body {
position: relative;
height: 100%;
}
</style>
</head>
<div class="w-full h-full swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="object-cover w-full h-full" src="https://source.unsplash.com/user/erondu/3000x900"
alt="image" />
</div>
<div class="swiper-slide">
<img class="object-cover w-full h-full" src="https://source.unsplash.com/collection/190727/3000x900"
alt="image" />
</div>
<div class="swiper-slide">
<img class="object-cover w-full h-full" src="https://source.unsplash.com/collection/190728/3000x900"
alt="image" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.mySwiper', {
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</body>
</html>