實現(xiàn)的效果圖片展示如下：
找了，YDui,Museui發(fā)現(xiàn)都不可以逝嚎，因為他們是display:none,于是安裝了swiper
關(guān)于在同一個頁面使用多個swiper,多個輪播出現(xiàn)沖突的問題?--
首先可以給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節(jié)點還沒生成
loop:是否無縫滾動，環(huán)形的补君。
centeredSlides:active圖片在中間引几，不是在最左邊。
spaceBetween:兩邊間距是多少，看UI設(shè)計伟桅，這里這個參數(shù)很重要敞掘。
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
