Swiper-Slider

Overview Official Website

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

Import Package

import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore, { Autoplay, Thumbs, Pagination, Navigation, EffectCoverflow } from "swiper";

Add Package

yarn add swiper --save

Remove Package

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

CSS

<!--Swiper slider css-->
import "swiper/swiper-bundle.css";
import "swiper/css/effect-coverflow";

Init Swiper

<!-- swiper -->
SwiperCore.use([Autoplay, Thumbs, Pagination, Navigation]);

Examples

Title	Example
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 class="navigation-swiper rounded" :loop="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'}" :pagination="{ clickable: true, el: '.swiper-pagination'}"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </swiper>`
Pagination Dynamic Swiper	`<swiper class="pagination-dynamic-swiper rounded" :loop="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="{ clickable: true, el: '.swiper-pagination', dynamicBullets: true,}"> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <div class="swiper-pagination dynamic-pagination"></div> </swiper>`
Pagination Fraction Swiper	`<swiper class="pagination-fraction-swiper" :loop="true" :autoplay="{delay: 2500, disableOnInteraction: false,}" :pagination="{ clickable: true, el: '.swiper-pagination', type: 'fraction' }" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </swiper>`
Pagination Custom Swiper	`<swiper class="pagination-custom-swiper rounded" :loop="true" :autoplay="{delay: 2500, disableOnInteraction: false }" :pagination="{ clickable: true, el: '.swiper-pagination', renderBullet: function (index, className) { return '' + (index + 1) + ''; },}"> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <div class="swiper-pagination pagination-custom"></div> </swiper>`
Pagination Progress Swiper	<swiper class="pagination-progress-swiper rounded" :loop="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="{ clickable: true, el: '.swiper-pagination', type: 'fraction' }" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }"> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </swiper>
Scrollbar Swiper	`<swiper class="pagination-scrollbar-swiper rounded" :loop="true" :autoplay="{delay: 2500, disableOnInteraction: false }" :scrollbar="{ el: '.swiper-scrollbar', hide: true, }" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'}"> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-scrollbar"></div> </swiper>`
Vertical Swiper	`<swiper class="vertical-swiper rounded" :loop="true" :direction="'vertical'" :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="{ el: '.swiper-pagination', clickable: true }" style="height: 324px"> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <div class="swiper-pagination"></div> </swiper>`
Mousewheel Control Swiper	`<swiper class="mousewheel-control-swiper rounded" :loop="true" :direction="'vertical'" :mousewheel="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="{ el: '.swiper-pagination', clickable: true }" style="height: 324px"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <div class="swiper-pagination"></div> </swiper>`
Effect Fade Swiper	`<swiper class="effect-fade-swiper rounded" :loop="true" :effect="'fade'" :autoplay="{delay: 2500, disableOnInteraction: false, }" :pagination="{ el: '.swiper-pagination', clickable: true,}"> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <div class="swiper-pagination"></div> </swiper>`
Effect Creative Swiper	`<swiper class="effect-creative-swiper rounded" :loop="true" :effect="'creative'" :creativeEffect="{ prev: { shadow: true, translate: [0, 0, -400], }, next: { translate: ['100%', 0, 0], },}" :autoplay="{ delay: 2500, disableOnInteraction: false, }" :pagination="{ el: '.swiper-pagination', clickable: true, dynamicBullets: true, }"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <div class="swiper-pagination"></div> </swiper>`
Effect Flip Swiper	`<swiper class="effect-flip-swiper rounded" :loop="true" :effect="'flip'" :grabCursor="true" :autoplay="{ delay: 2500, disableOnInteraction: false }" :pagination="{ el: '.swiper-pagination', clickable: true }"> <swiper-slide> ...</swiper-slide> <swiper-slide> ...</swiper-slide> <swiper-slide> ...</swiper-slide> <div class="swiper-pagination"></div> </swiper>`
Effect Coverflow Swiper	<swiper class="effect-coverflow-swiper rounded pb-5" :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 }"> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <swiper-slide>... </swiper-slide> <div class="swiper-pagination swiper-pagination-dark"></div> </swiper>
Responsive Breakpoints Swiper	<swiper class="swiper responsive-swiper rounded gallery-light pb-4" :loop="true" :slidesPerView="1" :spaceBetween="10" :pagination="{ el: '.swiper-pagination', clickable: true }" :breakpoints="{ 640: { slidesPerView: 2, spaceBetween: 20, }, 768: { slidesPerView: 3, spaceBetween: 40, }, 1200: { slidesPerView: 4, spaceBetween: 50, }, }"> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <swiper-slide> ... </swiper-slide> <div class="swiper-pagination swiper-pagination-dark"></div> </swiper>