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 "swiper/css/effect-fade";
import "swiper/css/effect-flip";

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 modules={[Autoplay]} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }}> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> </Swiper>`
Navigation & Pagination Swiper	`<Swiper modules={[Navigation, Pagination, Autoplay]} pagination={{ clickable: true }} navigation={true} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }}> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> </Swiper>`
Pagination Dynamic Swiper	`<Swiper pagination={{ clickable: true, dynamicBullets: true, }} modules={[Pagination, Autoplay]} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }} > <SwiperSlide>...</SwiperSlide> <SwiperSlide>...</SwiperSlide> <SwiperSlide>...</SwiperSlide> </Swiper>`
Pagination Fraction Swiper	`<Swiper pagination={{ type: "fraction", clickable: true }} navigation={true} modules={[Pagination, Navigation, Autoplay]} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }} > <SwiperSlide>...</SwiperSlide> <SwiperSlide>...</SwiperSlide> <SwiperSlide>...</SwiperSlide> </Swiper>`
Pagination Custom Swiper	`<Swiper pagination={{ el: '.swiper-pagination' }} modules={[Pagination, Autoplay]} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }} > <SwiperSlide>...</SwiperSlide> <SwiperSlide>...</SwiperSlide> <SwiperSlide>...</SwiperSlide> <div className="swiper-pagination pagination-custom"> </Swiper>`
Pagination Progress Swiper	`<Swiper pagination={{ type: "progressbar" }} navigation={true} modules={[Pagination, Navigation, Autoplay]} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }} > <SwiperSlide>...</SwiperSlide> <SwiperSlide>...</SwiperSlide> <SwiperSlide>...</SwiperSlide> </Swiper>`
Scrollbar Swiper	`<Swiper scrollbar={{ hide: true, }} modules={[Scrollbar, Autoplay]} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }} > <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> </Swiper>`
Vertical Swiper	`<Swiper direction={"vertical"} pagination={{ clickable: true }} modules={[Pagination, Autoplay]} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }} style={{ height: "324px" }}> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> </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 }} style={{ height: "324px" }} > <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> </Swiper>`
Effect Fade Swiper	`<Swiper spaceBetween={30} effect={"fade"} pagination={{ clickable: true, }} modules={[EffectFade, Pagination, Autoplay]} loop={true} autoplay={{ delay: 2500, disableOnInteraction: false }} > <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 }}> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> </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 }}> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> </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]} > <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <div className="swiper-pagination swiper-pagination-dark"&g </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]} > <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <SwiperSlide> ... </SwiperSlide> <div className="swiper-pagination swiper-pagination-dark"&g </Swiper>