Tailwind Carousel Example with Slider Js


Basic Carousel

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.

Basic Carousel

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>

Customer Feedback/Happy Client Carousel style with tailwind css.

Basic Carousel