Overview Official Website

Swiper is the most modern slider with hardware accelerated transitions and amazing native behavior.

Add Package
npm i swiper
Import Package
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
Css
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/scrollbar";
Remove Package
yarn remove swiper ( or you can remove package by removing specific package from package.json )
Examples:
Title Vue
Default Swiper 
<swiper className="swiper default-swiper rounded" :loop="true" :modules="[Autoplay]" :slides-per-view="4" 
:space-between="20" :autoplay="{ delay: 2500, disableOnInteraction: false }">
    <div className="swiper-wrapper">
        <swiper-slide><img src=img1 alt="" className="img-fluid" /></swiper-slide>
        <swiper-slide><img src=img2 alt="" className="img-fluid" /></swiper-slide>
        <swiper-slide><img src=img3 alt="" className="img-fluid" /></swiper-slide>
    </div>
</swiper>
Navigation & Pagination Swiper 
<swiper className="swiper navigation-swiper rounded" :modules=[Navigation, Pagination, Autoplay]
:loop="true" :autoplay="{ delay: 2500, disableOnInteraction: false }">
    <div className="swiper-wrapper">
        <swiper-slide><img src=img1 alt="" className="img-fluid" /></swiper-slide>
        <swiper-slide><img src=img2 alt="" className="img-fluid" /></swiper-slide>
        <swiper-slide><img src=img3 alt="" className="img-fluid" /></swiper-slide>
    </div>
</swiper>
2025 © Skote.