JarCasting 
vue-awesome-swiper
Swiper component for Vue.
Old versions:
Example
Install
npm install swiper vue-awesome-swiper --save
# or
yarn add swiper vue-awesome-swiper
# Swiper5 is recommended
yarn add [email protected] vue-awesome-swiper
Global Registration
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
Local Registration
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
export default {
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
}
}
CDN
<link rel="stylesheet" href="path/to/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
Vue.use(window.VueAwesomeSwiper)
</script>
Difference with usage
Directive and the only difference in the use of the Component:
componentfind Swiper instance byref attribute.directivefind Swiper instance bydirective arg.
Other configurations, events are the same.
The effect of the two ways and the difference in the applicable environment is here.
Component
<template>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination'
},
// Some Swiper option/callback...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
Directive
<template>
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" :key="banner" v-for="banner in banners">
<img :src="banner">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
export default {
data () {
return {
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
swiperOption: {
pagination: {
el: '.swiper-pagination'
},
// ...
}
}
},
mounted() {
console.log('Current Swiper instance object', this.mySwiper)
this.mySwiper.slideTo(3, 1000, false)
}
}
</script>
Swiper component API
<!-- All events/props support camelCase or kebab-case. -->
<swiper
:options="swiperOptionsObject"
:auto-update="true"
:auto-destroy="true"
:delete-instance-on-destroy="true"
:cleanup-styles-on-destroy="true"
@ready="handleSwiperReadied"
@click-slide="handleClickSlide"
/>
<!-- vue-awesome-swiper converts all Swiper events into component/directive events, e.g.: -->
<swiper
@slide-change-transition-start="onSwiperSlideChangeTransitionStart"
@slideChangeTransitionStart="onSwiperSlideChangeTransitionStart"
@slideChangeTransitionEnd="..."
@transitionStart="..."
...
/>
interface IProps {
// Auto update swiper when vue component `updated`
autoUpdate?: boolean // default: true
// Auto destroy swiper when vue component 'beforeDestroy'
autoDestroy?: boolean // default: true
// swiper.destroy's params
// swiper.destroy(deleteInstanceOnDestroy, cleanupStylesOnDestroy)
deleteInstanceOnDestroy?: boolean // default: true
cleanupStylesOnDestroy?: boolean // default: true
}
// `@ready` event will emit when the Swiper instance mounted
function handleSwiperReadied(swiper: Swiper) {
console.log('Swiper was munted!', swiper)
}
// `@click-slide` event has special treatment for Swiper's loop mode, which is still available in loop mode
function handleClickSlide(index: number, reallyIndex: number | null) {
console.log('Click slide!', index, reallyIndex)
}
Swiper directive API
Based on the exact same as the component API.
In the directive mode, the Swiper instance will be mounted in the parent's component context use the default name$swiper. In order to implement multiple swipers in a context, the directive has an additional name called instanceName API, through this API, you can easily control the name of each swiper mount context.
<div v-swiper="swiperOptionsObject" />
<div v-swiper:secondSwiper="swiperOptionsObject" />
<div v-swiper:[dynamicSwiperName]="swiperOptionsObject" />
<div v-swiper="swiperOptionsObject" instance-name="fourthSwiper" />
export dafault {
data() {
return {
dynamicSwiperName: 'thirdSwiper'
}
},
mounted() {
console.log('Swiper instances:', this.$swiper, this.secondSwiper, this.thirdSwiper, this.fourthSwiper)
}
}
Swiper API
Swiper's API and configuration can be used.
Custom Build with Swiper
import Vue from 'vue'
// Swiper 5.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/js/swiper.esm'
// Swiper 6.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/core'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
// Swiper modules
SwiperClass.use([Pagination, Mousewheel, Autoplay])
// -------------------------------------------------
// Global use
Vue.use(getAwesomeSwiper(SwiperClass))
// -------------------------------------------------
// Or local component
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
export default {
components: {
Swiper,
SwiperSlide
}
}
Custom Swiper plugin
import SwiperClass from 'swiper'
SwiperClass.use({
name: 'pluginName',
params: {
pluginSwitch: false,
},
on: {
init() {
if (!this.params.pluginSwitch) return
console.log('init')
},
// ...
}
})
// Your Swiper or App bussiness component...
Changelog
Detailed changes for each release are documented in the release notes.