请观赏
1.下载cnpm install swiper --save
2.组件中引入swiper以及样式
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import "swiper/js/swiper.min.js";
3.使用
mounted(){
var myswiper=new Swiper("swiper-container",{
autoplay:{
delay:1500
},
loop:true,
observer:true, //修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
pagination:{
el:".swiper-pagination"
},
navigation:{
nextEl:".swiper-button-next",
prevEl:".swiper-button-prev"
}
});
},
4.显示
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in datalist" :key="index">
<img :src="item.img" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>