安裝
npm install vue-awesome-swiper --save
全局引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
實例
<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>
<!-- 以下內容有需要再進行添加 -->
<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: {
// 所有的參數同 swiper 官方 api 參數
notNextTick: true,
autoplay: true, // 自動播放設置
speed: 1000, // 自動播放時間間隔
loop: true, // 開啓無限循環播放
//顯示分頁
pagination: {
el: '.swiper-pagination',
clickable: true
},
//切換模式 橫屏或者豎屏
// direction : 'vertical',
//設置自動播放速度
autoplay: {
disableOnInteraction: false,
delay: 4000
},
//設置點擊箭頭
paginationClickable: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
//設置同屏顯示的數量,默認爲1,使用auto是隨意的意思。
slidesPerView: 1,
//開啓鼠標滾輪控制Swiper切換。可設置鼠標選項,或true使用默認值。
mousewheel: true,
//默認爲false,普通模式:slide滑動時只滑動一格,並自動貼合wrapper,設置爲true則變爲free模式,slide會根據慣性滑動可能不止一格且不會貼合。
// freeMode:true
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
console.log('this is current swiper instance object', this.swiper)
// 跳轉到第三塊,即 跳轉到內容 <swiper-slide>I'm Slide 3</swiper-slide>
this.swiper.slideTo(3, 1000, false)
}
}
</script>