Swiper-Slider
Overview Official Website
Swiper is the most modern slider with hardware accelerated transitions and amazing native behavior.
Import Package
import {
Autoplay,
Thumbs,
Pagination,
Navigation,
EffectCoverflow,
Mousewheel,
Scrollbar,
EffectFade,
EffectFlip,
EffectCreative,
} from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
Thumbs,
Pagination,
Navigation,
EffectCoverflow,
Mousewheel,
Scrollbar,
EffectFade,
EffectFlip,
EffectCreative,
} from "swiper/modules";
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
CSS
<!--Swiper slider css-->
import "swiper/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";
Examples
| Title | Example |
|---|---|
| Default Swiper |
<swiper
class="default-swiper rounded"
:autoplay="{ delay: 2500, disableOnInteraction: false }"
:modules="[Autoplay]"
>
<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 }"
:modules="[Autoplay, Navigation, Pagination]"
: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'
}"
:modules="[Autoplay, Navigation, Pagination]"
: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"
:modules="[Autoplay, Pagination]"
:loop="true"
:autoplay="{ delay: 2500, disableOnInteraction: false }"
:pagination="pagination"
>
<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 }"
:modules="[Autoplay, Pagination]"
: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 }"
:modules="scrollbarModules"
: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 }"
:modules="[Autoplay, Pagination]"
: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"
class="mousewheel-control-swiper rounded"
:loop="true"
:direction="'vertical'"
:mousewheel="true"
:modules="mousewheelModules"
: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'"
:modules="effectFadeModules"
: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'"
:grabCursor="true"
:modules="[EffectCreative, Pagination]"
:creativeEffect="{
prev: {
shadow: true,
translate: [0, 0, -400],
},
next: {
translate: ['100%', 0, 0],
},
}"
: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 Flip Swiper |
<swiper class="effect-flip-swiper rounded"
:loop="true"
:effect="'flip'"
:modules="effectFlipModules"
: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,
},
}"
:modules="[Pagination]">
<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>
|