Swiper-Slider

Overview Official Website

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

CSS

<!--Swiper slider css-->
import "prismjs";
import "swiper/css";
import "swiper/swiper-bundle.css";
import "swiper/css/autoplay";
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/mousewheel';
import 'swiper/css/effect-fade';
import 'swiper/css/effect-creative';
import 'swiper/css/effect-flip';
import 'swiper/css/effect-coverflow';

Import Package

<!--Swiper slider-->
import { Swiper, SwiperSlide } from "swiper/vue";

Add Package

yarn add swiper

Remove Package

yarn remove swiper or you can remove package by removing specific package from package.json

Examples

Title	Javascript
Default Swiper	`<Swiper class="default-swiper rounded" autoplay={{ delay: 2500, disableOnInteraction: false }}> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </Swiper>`
Navigation & Pagination Swiper	`<Swiper :modules="[Autoplay, Navigation, Pagination]" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }" :loop="true" autoplay={{ delay: 2500, disableOnInteraction: false }} :pagination="{ clickable: true, el: '.swiper-pagination' }" class="navigation-swiper rounded"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </Swiper>`
Pagination Dynamic Swiper	`<Swiper :pagination="{ clickable: true, el: '.swiper-pagination', dynamicBullets: true }" :modules="[Autoplay, Pagination]" :loop="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" class="pagination-dynamic-swiper rounded" > <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> </Swiper>`
Pagination Fraction Swiper	`<Swiper :pagination="{ clickable: true, el: '.swiper-pagination', type: 'fraction', }" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }" :loop="true" autoplay={{ delay: 2500, disableOnInteraction: false }} class="pagination-fraction-swiper" > <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> </Swiper>`
Pagination Custom Swiper	`<Swiper pagination={{ el: '.swiper-pagination' }} :modules="[Autoplay, Pagination]" :loop="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="pagination" class="pagination-custom-swiper rounded" > <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> </Swiper>`
Pagination Progress Swiper	`<Swiper :pagination="{ type: 'progressbar' }" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }" :modules="[Autoplay, Pagination]" :loop="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" class="pagination-progress-swiper rounded" > <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> </Swiper>`
Scrollbar Swiper	`<Swiper :scrollbar="{ el: '.swiper-scrollbar', hide: true }" :loop="true" :modules="scrollbarModules" :autoplay="{ delay: 2500, disableOnInteraction: false }" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }" class="pagination-scrollbar-swiper rounded"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </Swiper>`
Vertical Swiper	`<Swiper :pagination="{ el: '.swiper-pagination', clickable: true }" style="height: 324px" :modules="[Autoplay, Pagination]" :loop="true" :direction="'vertical'" :autoplay="{ delay: 2500, disableOnInteraction: false }" class="vertical-swiper rounded" style={{ height: "324px" }}> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </Swiper>`
Mousewheel Control Swiper	`<Swiper :loop="true" :direction="'vertical'" :mousewheel="true" :modules="mousewheelModules" :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="{ el: '.swiper-pagination', clickable: true }" class="mousewheel-control-swiper rounded" style={{ height: "324px" }} > <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </Swiper>`
Effect Fade Swiper	`<Swiper :loop="true" :effect="'fade'" :modules="effectFadeModules" :pagination="{ el: '.swiper-pagination', clickable: true }" :autoplay="{ delay: 2500, disableOnInteraction: false }" class="effect-fade-swiper rounded" > <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </Swiper>`
Effect Creative Swiper	`<Swiper :loop="true" :effect="'creative'" :grabCursor="true" :pagination="{ el: '.swiper-pagination', clickable: true }" :modules="[EffectCreative, Pagination]" :creativeEffect="{ prev: { shadow: true, translate: [0, 0, -400], }, next: { translate: ['100%', 0, 0], }, }" :autoplay="{ delay: 2500, disableOnInteraction: false }" class="effect-creative-swiper rounded"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </Swiper>`
Effect Flip Swiper	`<Swiper navigation={true} :modules="effectFlipModules" :grabCursor="true" :loop="true" :effect="'flip'" :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="{ el: '.swiper-pagination', clickable: true }" class="effect-flip-swiper rounded" > <div className="swiper-wrapper"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </div> </Swiper>`
Effect Coverflow Swiper	<Swiper :loop="true" :effect="'coverflow'" :grabCursor="true" :centeredSlides="true" :slidesPerView="4" :modules="coverflowModules" :coverflowEffect="{ rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true }" :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="{ el: '.swiper-pagination', clickable: true, dynamicBullets: true }" className="effect-coverflow-swiper rounded pb-5" > <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </Swiper>
Responsive Breakpoints Swiper	<Swiper :spaceBetween="10" :pagination="{ el: '.swiper-pagination', clickable: true }" :modules="[Pagination]" :breakpoints={ 640: { slidesPerView: 2, spaceBetween: 20 }, 768: { slidesPerView: 3, spaceBetween: 40 }, 1200: { slidesPerView: 4, spaceBetween: 50 }, }" :loop="true" :slidesPerView="1" class="swiper responsive-swiper rounded gallery-light pb-4"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> </Swiper>