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>

Swiper slider Examples

Default slider
Slider with navigation
Slider with pagination
Slider with Pagination dynamic
Slider with Pagination progress
Slider with Pagination Fraction
Slider Autoplay
Slider with Scrollbar
Slider space between
Slides Per View
Responsive breakdown
Slider freemode
Slider Infinite Loop
Slider Effect fade
Slider Effect cube
Slider Effect coverflow
Slider Effect Flip
Slider Mousewheel control
Slider Autoplay with speed