Swiper-Slider

  1. Advance UI
  2. Swiper-Slider
Overview Official Website

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

CSS
<!--Swiper slider css-->
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/scrollbar";
Import Package
<!--Swiper slider-->
import { Swiper, SwiperSlide } from "swiper/react";
Add Package
yarn add swiper --save
Remove Package
yarn remove swiper or you can remove package by removing specific package from package.json
Examples
Title Javascript
Default Swiper 
<Swiper class="mySwiper swiper default-swiper rounded" autoplay={{ delay: 2500, disableOnInteraction: false }}>
    <div class="swiper-wrapper">
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
    </div>
</Swiper>
Navigation & Pagination Swiper 
<Swiper 
    modules={[Pagination]} pagination={{ clickable: true }} 
    navigation={true} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }} 
    className="mySwiper swiper navigation-swiper rounded">
    <div className="swiper-wrapper swiper-pagination">
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
    </div>
</Swiper>
Pagination Dynamic Swiper 
<Swiper 
    pagination={{ clickable: true, dynamicBullets: true, }} 
    modules={[Pagination, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} 
    className="mySwiper swiper pagination-dynamic-swiper rounded" >
    <div className="swiper-wrapper">
        <SwiperSlide>...</SwiperSlide>
        <SwiperSlide>...</SwiperSlide>
        <SwiperSlide>...</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>...</SwiperSlide>
        <SwiperSlide>...</SwiperSlide>
        <SwiperSlide>...</SwiperSlide>
    </div>
</Swiper>
Pagination Custom Swiper 
<Swiper 
    pagination={{ el: '.swiper-pagination' }} modules={[Pagination, Autoplay]} 
    loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }} 
    className="mySwiper swiper pagination-custom-swiper rounded" >
    <div className="swiper-wrapper">
        <SwiperSlide>...</SwiperSlide>
        <SwiperSlide>...</SwiperSlide>
        <SwiperSlide>...</SwiperSlide>
    </div>
    <div className="swiper-pagination pagination-custom"></div>
</Swiper>
Pagination Progress Swiper 
<Swiper 
    pagination={{ type: "progressbar" }} navigation={true} 
    modules={[Pagination, Navigation, Autoplay]} loop={true} 
    autoplay={{ delay: 2500, disableOnInteraction: false }} 
    className="mySwiper swiper pagination-progress-swiper rounded" >
    <div className="swiper-wrapper">
        <SwiperSlide>...</SwiperSlide>
        <SwiperSlide>...</SwiperSlide>
        <SwiperSlide>...</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> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </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> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </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> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </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" >
    <SwiperSlide> ... </SwiperSlide>
    <SwiperSlide> ... </SwiperSlide>
    <SwiperSlide> ... </SwiperSlide>
</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> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </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> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </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> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
    </div>
    <div className="swiper-pagination swiper-pagination-dark"></div>
</Swiper>
Responsive Breakpoints Swiper 
<Swiper slidesPerView={1} spaceBetween={10} pagination={{ el: '.swiper-pagination', clickable: true, }}
breakpoints={{ 640: { slidesPerView: 2, spaceBetween: 20, }, 
               768: { slidesPerView: 3, spaceBetween: 40, }, 
               1024: { slidesPerView: 4, spaceBetween: 50, }, }} 
               loop={true} modules={[Pagination]} 
               className="mySwiper swiper responsive-swiper rounded gallery-light pb-4">
    <div className="swiper-wrapper">
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
        <SwiperSlide> ... </SwiperSlide>
    </div>
    <div className="swiper-pagination swiper-pagination-dark"></div>
</Swiper>
© Toner.
Design & Develop by Themesbrand