Overview Official Website

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

Add Package
yarn add swiper
Import Package
import { Swiper, SwiperSlide } from "swiper/react";
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 React
Default Swiper 
<Swiper className="mySwiper swiper default-swiper rounded" modules={[Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }}>
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Navigation & Pagination Swiper 
<Swiper className="mySwiper swiper navigation-swiper rounded" modules={[Navigation, Pagination, Autoplay]} 
    loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }}>
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Pagination Dynamic Swiper 
<Swiper pagination={{ clickable: true, dynamicBullets: true, }} className="mySwiper swiper pagination-dynamic-swiper rounded" 
    modules={[Pagination, Autoplay]} 
    loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }}>
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Pagination Fraction Swiper 
<Swiper pagination={{ type: "fraction", clickable: true }} navigation={true} modules={[Pagination, Navigation, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} className="mySwiper swiper pagination-fraction-swiper rounded">
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Pagination Custom Swiper 
<Swiper pagination={{ type: "fraction", clickable: true }} navigation={true} modules={[Pagination, Navigation, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} className="mySwiper swiper pagination-fraction-swiper rounded">
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Pagination Progress Swiper 
<Swiper pagination={{ clickable: true, el: '.swiper-pagination' }} navigation={true} modules={[Pagination, Navigation, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} className="pagination-progress-swiper rounded">
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Scrollbar Swiper 
<Swiper scrollbar={{ hide: true, }} modules={[Scrollbar, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} className="mySwiper swiper pagination-scrollbar-swiper rounded">
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Vertical Swiper 
<Swiper  direction={"vertical"} pagination={{ clickable: true }} modules={[Pagination, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} className="mySwiper swiper vertical-swiper rounded" style={{ height: "324px" }}>
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Mousewheel Control Swiper 
<Swiper direction={"vertical"} slidesPerView={1} spaceBetween={30} mousewheel={true}
    pagination={{
        clickable: true,
    }} modules={[Mousewheel, Pagination, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} className="mySwiper mousewheel-control-swiper rounded" style={{ height: "324px" }} >
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Effect Fade Swiper 
<Swiper spaceBetween={30} effect={"fade"} pagination={{ clickable: true, }} modules={[EffectFade, Pagination, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} className="mySwiper swiper effect-fade-swiper rounded">
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Effect Creative Swiper 
<Swiper grabCursor={true} effect={"creative"} pagination={{ clickable: true }}
    creativeEffect={{
        prev: { shadow: true, translate: [0, 0, -400], }, next: { translate: ["100%", 0, 0], },
    }} modules={[EffectCreative, Pagination, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} className="mySwiper swiper effect-creative-swiper rounded">
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Effect Flip Swiper 
<Swiper effect={"flip"}
    grabCursor={true}
    pagination={{ clickable: true }}
    navigation={true}
    modules={[EffectFlip, Pagination, Navigation, Autoplay]}
    loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }}
    className="mySwiper effect-flip-swiper rounded">
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Effect Coverflow Swiper 
<Swiper effect={"coverflow"} grabCursor={true} centeredSlides={true} slidesPerView={4} loop={true} 
    autoplay={{
        delay: 2500,
        disableOnInteraction: false,
    }}
    coverflowEffect={{
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
    }}
    pagination={{
        el: '.swiper-pagination',
        clickable: true,
        dynamicBullets: true,
    }}
    modules={[EffectCoverflow, Pagination, Autoplay]} className="mySwiper swiper effect-coverflow-swiper rounded pb-5"
    >
    <div className="swiper-wrapper">
        <SwiperSlide><Image src={img1} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img2} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img3} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img4} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img5} alt="" className="img-fluid" /></SwiperSlide>
        <SwiperSlide><Image src={img6} alt="" className="img-fluid" /></SwiperSlide>
    </div>
</Swiper>
Responsive Breakpoints Swiper 
<Swiper slidesPerView={4}
    spaceBetween={10}
    pagination={{
        el: '.swiper-pagination',
        clickable: true,
    }}
    breakpoints={{
        // when window width is >= 320px
        320: {
            slidesPerView: 2,
            spaceBetween: 20
        },
        // when window width is >= 480px
        480: {
            slidesPerView: 3,
            spaceBetween: 30
        },
        // when window width is >= 640px
        640: {
            slidesPerView: 4,
            spaceBetween: 40
        },
       
    }}
    loop={true}
    modules={[Pagination]}
    className="mySwiper swiper responsive-swiper rounded gallery-light pb-4">
    <div className="swiper-wrapper">
        <SwiperSlide>
            <div className="gallery-box card">
                <div className="gallery-container">
                    <Link className="image-popup" to='#' title="">
                        <Image className="gallery-img img-fluid mx-auto" src={img1} alt="" />
                    </Link>
                </div>
                <div className="box-content px-3 py-2">
                    <div className="gallery-overlay">
                        <h5 className="overlay-caption fs-base">Glasses and laptop from above</h5>
                    </div>
                    <div className="d-flex align-items-center mt-1">
                        <div className="flex-grow-1 text-muted">by <Link to="#" className="text-body text-truncate">Ron Mackie</Link></div>
                        <div className="flex-shrink-0">
                            <div className="d-flex gap-3">
                                <button type="button" className="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
                                    <i className="ri-thumb-up-fill text-muted align-bottom me-1"></i> 2.2K
                                </button>
                                <button type="button" className="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
                                    <i className="ri-question-answer-fill text-muted align-bottom me-1"></i> 1.3K
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </SwiperSlide>
    </div>
</Swiper>
© Skote.