Tailwind Carousel Example with Swiper 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 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>

More Carousel example.

Customer Feedback/Happy Client Carousel style with tailwind css.

Basic Carousel