Tailwind CSS Carousel Slider Examples

Tailwind CSS Carousel Slider Examples

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>
carousel slider with arrow & indicators

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>
autoplay slider

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>
Tags