1.安装vue-awesome-swiper
npm i vue-awesome-swiper@3.1.3
或者
yarn add vue-awesome-swiper@3.1.3
为什么要安装3.1.3版本的vue-awesome-swiper插件?为什么不装最新版的?
答:我在开发项目的时候,使用了最新版的vue-awesome-swiper插件的时候,发现最新版(swiper6.0)的一些文件丢失、不能自动播放等bug,根据官方文档以及百度还是没能解决以上bug,所以推荐各位先使用稳定版。
2.导入vue-awesome-swiper
按照组件的形式局部导入:
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
或者全局导入(不推荐):
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
3.使用格式
<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>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: { // 轮播图配置
loop: true, // 开启循环
autoplay: true, // 开启自动播放
pagination: { // 配置分页
el: '.swiper-pagination', // 指定dom
clickable: true // 可以点击切换
},
navigation: { // 开启上下页按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: 'cube', // 3d切换轮播图
cubeEffect: { // 开启一些效果
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
}
}
}
},
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>
详细配置参数建议参考官方文档。