VueAwesomeSwiper的异形轮播

最新推荐文章于 2024-08-14 16:39:24 发布

brevey

最新推荐文章于 2024-08-14 16:39:24 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/brevey/article/details/112662616

版权

本文介绍了如何利用VueAwesomeSwiper实现异形轮播，详细步骤包括安装swiper和vue-awesome-swiper，然后在main.js中引入资源。在实际操作中遇到无法自动轮播的问题，原因是vue-awesome-swiper@4.1.1需要配合swiper5+版本，而swiper6不兼容。最后通过降级到swiper@5解决了问题。

摘要由CSDN通过智能技术生成

需求：实现异形轮播，用的swiper插件
效果图：https://www.swiper.com.cn/demo/index.html 在这里插入图片描述

1.进入项目目录，安装swiper和vue-awesome-swiper、

npm install vue-awesome-swiper --save
npm install swiper

2.引入资源（main.js文件)

import VueAwesomeSwiper from 'vue-awesome-swiper'
// import 'swiper/swiper-bundle.css'(swiper6的引入css)
import 'swiper/css/swiper.css'  //引入样式(swiper5的引入css)
Vue.use(VueAwesomeSwiper)

3.使用

 <swiper :options="swiperOption" ref="mySwiper" v-if="loop.length > 0">
      <swiper-slide><img class="swiper-slide" src="../banner1.jpg" /></swiper-slide>
      <swiper-slide><img class="swiper-slide" src="../banner2.jpg" /></swiper-slide&g