版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
1,安装
npm install vue-awesome-swiper --save
2,在vue文件中使用
1、全局引入
import vueSwiper from 'vue-awesome-swiper' //引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css' //引入样式
Vue.config.productionTip = false
Vue.use(vueSwiper) //使用插件
2、单页面使用
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: "",
components: {
swiper,
swiperSlide
},
}
3,标签
<swiper :options="swiperOption" ref="imgOverview" style="height: 100%;">
<swiper-slide v-for="(img, index) in list2" :key="index">
<div class="swiper-zoom-container">
<img :src="img" alt="">
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
4,data里面
data(){
swiperOption: {
width: window.innerWidth,
zoom: true,
initialSlide: 0,
//显示分页
pagination: {
el: '.swiper-pagination',
clickable: true, //允许分页点击跳转
type: 'fraction',
},
prevButton:'.swiper-button-prev',//上一张
nextButton:'.swiper-button-next',//下一张
//设置点击箭头
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
//开启循环模式
loop: true,
//开启鼠标滚轮控制Swiper切换
mousewheel: true,
},
}