In this tutorial, we will create cards slider with tailwind css using splidejs. We will see responsive card slider, card slider with autoplay, tailwind card slider custom arrow icon with Tailwind CSS & Splidejs.
Tools Use
Tailwind CSS 3.x
Splide JS
Heroicons
Example 1
Tailwind CSS simple 3 card slider with splidejs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Card Slider with Splidejs Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
</head>
<body>
<div class="container mx-auto">
<div class="splide">
<div class="splide__track">
<div class="splide__list gap-x-4">
<div class="w-full p-4 shadow splide__slide">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 1
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
<div class="w-full p-4 shadow splide__slide">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 2
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
<div class="w-full p-4 shadow splide__slide">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 3
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
<div class="w-full p-4 shadow splide__slide">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 4
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script>
var splide = new Splide('.splide', {
type: 'loop',
perPage: 3,
rewind: true,
});
splide.mount();
</script>
</body>
</html>
Example 2
tailwind css autoplay responsive card slider with Splidejs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Responsive Card Slider Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
</head>
<body>
<div class="container mx-auto">
<div class="splide">
<div class="splide__track">
<div class="splide__list gap-x-4">
<div class="w-full p-4 shadow splide__slide lg:max-w-lg">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 1
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
<div class="w-full p-4 shadow splide__slide lg:max-w-lg">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 2
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
<div class="w-full p-4 shadow splide__slide lg:max-w-lg">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 3
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
<div class="w-full p-4 shadow splide__slide lg:max-w-lg">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 4
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script>
var splide = new Splide('.splide', {
type: 'loop',
rewind: true,
});
splide.mount();
</script>
</body>
</html>
Example 3
tailwind css card slider with custom arrow icon using heroicons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Card Slider with Custom Arrows Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
</head>
<body>
<div class="container mx-auto">
<div class="splide">
<div class="splide__arrows">
<button class="bg-gray-900 shadow splide__arrow splide__arrow--prev">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</button>
<button class="bg-gray-900 shadow splide__arrow splide__arrow--next">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</button>
</div>
<div class="splide__track">
<div class="splide__list gap-x-4">
<div class="w-full p-4 shadow splide__slide lg:max-w-lg">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 1
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
<div class="w-full p-4 shadow splide__slide lg:max-w-lg">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 2
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
<div class="w-full p-4 shadow splide__slide lg:max-w-lg">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 3
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
<div class="w-full p-4 shadow splide__slide lg:max-w-lg">
<div class="space-y-2">
<h3 class="text-2xl font-semibold">
Tailwind Card Slider 4
</h3>
<p class="text-gray-600">
tailwind card slider with splidejs It is a long established
fact that a reader will be distracted.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script>
var splide = new Splide('.splide', {
type: 'loop',
autoplay: true,
});
splide.mount();
</script>
</body>
</html>
