当前位置: 代码迷 >> 综合 >> 关于使用vue-awesome-swiper,轮播图不能播放和分页器没显示的解决方法
  详细解决方案

关于使用vue-awesome-swiper,轮播图不能播放和分页器没显示的解决方法

热度:40   发布时间:2024-01-28 13:01:10.0

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"}
}
  相关解决方案