实现的效果图片展示如下：
左右两边会出现一部分
找了，YDui,Museui发现都不可以，因为他们是display:none,于是安装了swiper
关于在同一个页面使用多个swiper,多个轮播出现冲突的问题?--
首先可以给swiper-container这个层级的div加多个专属类名或者id,然后在分页器或者左右切换的按钮也是如此
1.安装swiper
npm install swiper
2.在main.js中引入css
import 'swiper/dist/css/swiper.min.css'
3.在使用轮播的页面引入swiper
import Swiper from "swiper"
4.页面的代码
5.写在mounted里面，created节点还没生成
loop:是否无缝滚动，环形的。
centeredSlides:active图片在中间，不是在最左边。
spaceBetween:两边间距是多少，看UI设计，这里这个参数很重要。
6.css
```
.swiper-container {
margin-top: 0.2rem;
width: 100%;
height: 2.72rem;
overflow: visible !important;
position: relative;
}
.swiper-container .swiper-wrapper .swiper-slide {
width: 6.62rem;
border-radius: 0.12rem;
}
.swiper-container .swiper-wrapper .swiper-slide img {
width: 100%;
height: 2.72rem;
border-radius: 0.12rem;
}
.swiper-container .swiper-wrapper .swiper-slide-prev {
margin-top: 0.18rem;
height: 2.5rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-prev img {
height: 2.4rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-next {
margin-top: 0.18rem;
height: 2.5rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-next img {
height: 2.4rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-active {
width: 6.62rem;
}
.swiper-pagination {
bottom: 0.1rem !important;
}
```
方法二：
使用vue-awesome-swiper
网友评论