Tailwind Carousel Example with Swiper Js
By default Tailwind css doesnot support carousel, so we need to depend on other third parties library to achieve this. So we will achieve tailwind carousel using slider js step by step.
Step 1: Add Swiper js From cdn.
Cdn is a fast way to test library with out downloading into your disks. You may download and use from your local computer if you require.
<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>
Step 2: Write Sliding content
Let's add two slider with image in each of one from unsplash. The slider content should be inside swiper-slide class.
<div class="swiper-container h-64"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"> <img src="https://source.unsplash.com/weekly?water"> </div> <div class="swiper-slide"> <img src="https://source.unsplash.com/weekly?mountain"> </div> </div> </div>
Step 3: Initiate slider script for our slider
This is the basic carousel exmple with no next and previous buttons, and even with out pagination button as well. We will explore full professional loogin carousel in next example.
<script> var mySwiper = new Swiper ('.swiper-container'); </script>