Tailwind Carousel Example with Swiper Js
Web2tailwind.com

Output

Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
    
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
	<link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
	<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto&display=swap" rel="stylesheet">
</head>

<body class="bg-gray-100" style="font-family:Roboto">
    <div class="w-4/5 mx-auto my-20 bg-white">
        <div id="slider" class="swiper-container w-full">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg-cover bg-center shadow-lg" style="background-image: url('/assets/img/slider-bg-1.png');">
                    <div class="container mx-auto px-6 md:px-20 py-6">
                        <div class="w-full md:w-1/2">
                            <div class="md:border border-gray-100 md:p-10">
                                <h3 class="text-5xl leading-tight" style="font-family: Niconne, cursive;">Welcome To </h3>
                                <h2 class="font-bold leading-tight text-6xl">Web2Tailwind</h2>
                                <p class="text-xl mt-10 font-light">Use complete html components in your projects.
                                </p>
                            </div>
                            <div class="my-10 md:mx-10 md:-mt-2"><a href="#appointment"
                                    class="bg-pink-500  ease-linear hover:bg-blue-600 text-white px-6 py-4 rounded-full">USE
                                    TEMPLATE</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden md:flex swiper-button-prev bg-white w-16 h-16 text-xs rounded-full text-pink-500"></div>
            <div class="hidden md:flex swiper-button-next bg-white w-16 h-16 text-xs rounded-full text-pink-500"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
	<script>
		var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,

            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
            },

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // And if we need scrollbar
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
	</script>
</body>

</html>
© 2019 - 2020 Web2tailwind.com