Swiper component for Vue.
Old versions:
npm install swiper vue-awesome-swiper --save
# or
yarn add swiper vue-awesome-swiper
# Swiper5 is recommended
yarn add swiper@5.x vue-awesome-swiperimport 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 } */)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
}
}<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>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.
<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><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><!-- 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)
}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's API and configuration can be used.
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
}
}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...Detailed changes for each release are documented in the release notes.