Vue中重點關注綠色字體部分
Vue-Awesome-Swiper
Swiper4 component for Vue, support pc and mobile, SPA and SSR.
If you need to roll back to Swiper3, use version v2.6.7.
基於 Swiper4、適用於 Vue 的輪播組件，支持服務端渲染和單頁應用。
如果需要回退到 Swiper3，請使用 v2.6.7 版本。
Example
Install
CDN
</script>
NPM
npm install vue-awesome-swiper --save
Mount
mount with global
// require styles
Vue
mount with component
// require styles
components:
swiper
swiperSlide
}
mount with ssr
// If used in nuxt.js/ssr, you should keep it only in browser build environment
if processbrowser
const VueAwesomeSwiper =
Vue
}
custom swiper plugin
Swiper
Difference（使用方法的異同）
SSR and the only difference in the use of the SPA:
- SPA worked by the
component, find swiper instance byref attribute. - SSR worked by the
directive, find swiper instance bydirective arg. - Other configurations, events are the same.
SPA
<!-- The ref attr used to find the swiper instance -->
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的參數同 swiper 官方 api 參數
// ...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然後你就可以使用當前上下文內的swiper對象去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
Async data example
<template>
<swiper :options="swiperOption">
<swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination'
}
},
swiperSlides: [1, 2, 3, 4, 5]
}
},
mounted() {
setInterval(() => {
console.log('simulate async data')
if (this.swiperSlides.length < 10) {
this.swiperSlides.push(this.swiperSlides.length + 1)
}
}, 3000)
}
}
</script>
SSR
<!-- You can custom the "mySwiper" name used to find the swiper instance in current component -->
<template>
<!-- slides -->
<swiper-slide>
<img src="../assets/images/slide/1.jpg">
</swiper-slide>
<swiper-slide>
<img src="../assets/images/slide/2.jpg">
</swiper-slide>
<swiper-slide>
<img src="../assets/images/slide/3.jpg">
</swiper-slide>
<swiper-slide>
<img src="../assets/images/slide/4.jpg">
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
data () {
return {
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
swiperOption: {
pagination: {
el: '.swiper-pagination'
},
// some swiper options...
loop: true, // 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進後退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滾動條
scrollbar: {
el: '.swiper-scrollbar',
}
}
}
},
mounted() {
setTimeout(() => {
this.banners.push('/4.jpg')
console.log('banners update')
}, 3000)
console.log(
'This is current swiper instance object', this.mySwiper,
'It will slideTo banners 3')
this.mySwiper.slideTo(3, 1000, false)
}
}
</script>
API
Swiper's API and configuration can be used.（Swiper官網中的API及配置均可使用）
