关于使用vue-awesome-swiper,轮播图不能播放和分页器没显示的解决方法
vue-awesome-swiper在2020年做了更新,早上想使用vue-awesome-swiper完成vue项目的轮播图,发现一些轮播图不能播放和分页器没显示,经过一个上午,在老师的协助下终于解决了:原来是包版本太高的问题,肯能导致一些不兼容。后来我指定了版本号,下回低版本cnpm i vue-awesome-swiper@3重启基本上就可以了,但要注意的是在阅读官网的时候最好采用定义组件方
·
vue-awesome-swiper在2020年做了更新,早上想使用vue-awesome-swiper完成vue项目的轮播图,发现一些轮播图不能播放和分页器没显示,经过一个上午,在老师的协助下终于解决了:原来是包版本太高的问题,肯能导致一些不兼容。
后来我指定了版本号,下回低版本
cnpm i vue-awesome-swiper@3
重启基本上就可以了,但要注意的是在阅读官网的时候最好采用定义组件方式写轮播图,用指令方式可能会出问题。
<swiper ref="mySwiper" :options="swiperOption">
<swiper-slide :key="banner" v-for="banner in banners">
<img :src="banner" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
banners: [
"./src/assets/images/home-swiper01.webp",
"./src/assets/images/home-swiper02.webp",
"./src/assets/images/home-swiper03.webp",
"./src/assets/images/home-swiper04.webp"
],
swiperOption: {
autoplay: true,
loop: true,
autoplay: {
delay: 2000,
disableOnInteraction: false
},
pagination: {
el: ".swiper-pagination",
// clickable: true,
type: "bullets"
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)