Swiper Slider

Slider for all purposes, it lets you create a beautiful responsive slider.

Import Swiper styles inside your main JavaScript file:

import "swiper/css";

Import and initialize Swiper in your JavaScript:

import Swiper from "swiper/bundle";

Example Swiper HTML markup:


<div class="swiper w-full">
    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <img src="/images/slide/01.jpg" class="w-full rounded-lg" alt="">
        </div>

        <div class="swiper-slide">
            <img src="/images/slide/02.jpg" class="w-full rounded-lg" alt="">
        </div>

        <div class="swiper-slide">
            <img src="/images/slide/03.jpg" class="w-full rounded-lg" alt="">
        </div>

    </div>
</div>