Tailwind Carousel Example with Slider 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 Slider 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.
<script src="https://unpkg.com/swiper/js/swiper.js"></script> <script src="https://unpkg.com/swiper/js/swiper.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>