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轮播下标
}
}//事件
});
}
第四步：文件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;
}
}