swiper中文官網：https://www.swiper.com.cn/api/index.html
第一步：下載swiper 插件
npm install swiper --save-dev
第二步：在main.js中引入
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css';
第三步：在需要使用swiper的組件里引入swiper，初始化放在mounted里
import Swiper from "swiper";
mounted() {
let that = this;//如果下面想要使用變量，請定義
that.mySwiper = new Swiper(".swiper-container", {
autoplay: false, //是否自動滾動
loop: false,//是否可以循環
initialSlide: 0, //初始化第幾頁
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},//使用左右按鈕
on: {
transitionEnd() { //點擊過渡完觸發事件
that.activeIndex = that.mySwiper.activeIndex; //activeIndex輪播下標
}
}//事件
});
this.mySwiper.slideTo(index, 500, false); //點擊跳轉到指定的圖片中
}
第四步：文件template中
<div class="swiper-container">//class名一定不可以改變
<div class="swiper-wrapper">
<img src="../../assets/whalbum/example1.png" class="swiper-slide" />//img為循環的部分
<img src="../../assets/whalbum/yyl.png" class="swiper-slide" />
<img src="../../assets/whalbum/example1.png" class="swiper-slide" />
<img src="../../assets/whalbum/example1.png" class="swiper-slide" />
<img src="../../assets/whalbum/example1.png" class="swiper-slide" />
</div>
<img src="../../assets/whalbum/arrow.png" class="swiper-button-next" />//左右箭頭(這是自定義寫的)
<img src="../../assets/whalbum/arrow.png" class="swiper-button-prev" />
<!--<div class="swiper-button-next"></div>-->//這是原本的左右箭頭
<!--<div class="swiper-button-prev"></div>-->
</div>
第五步:修改箭頭樣式（如果不修改可以略過）
.swiper-container {
position: relative;
.swiper-button-next,
.swiper-button-prev {
outline: none;
background: none;
width: 75px;
height: 100px;
top: 35%;
}
.swiper-button-next {
transform: rotate(180deg);
}
.swiper-button-next:before {
left: 0;
}
.swiper-button-prev:before {
right: 0;
}
}