1.下载
npm install vue-awesome-swiper
2.全局引用
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式，以及具体位置。
Vue.use(VueAwesomeSwiper, /* { default global options } */)
3.轮播图组件模板
<swiper :options="swiperOption" class="swiper">
<swiper-slide>
<img src="http://p1.music.126.net/-9wiqYt8mA-X2fhNtwbLWA==/109951164584423488.jpg?imageView&quality=89"></swiper-slide>
<swiper-slide>
<img src="http://p1.music.126.net/9RSz4xmWMugWs_hcupqnsw==/109951164586519533.jpg?imageView&quality=89"></swiper-slide>
<swiper-slide>
<img src="http://p1.music.126.net/mYdFn0s56mQx8XvEEqt8Aw==/109951164586512490.jpg?imageView&quality=89">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<!--
其它样式
<div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下一项
<div class="swiper-button-prev"></div> //上一项
--!>
4.轮播图JS代码
data(){
return{
swiperOption: {
//小圆点
pagination: {
el: ".swiper-pagination",
clickable: true //小圆点控制轮播图页面的切换
},
//自动播放
autoplay: {
disableOnInteraction: false,
delay: 2000 //自动轮播间隔时间
},
//滑动速度
speed: 800,
//滑动方向
direction: "horizontal",
//是否循环
loop: true
}
}
}
5.CSS样式
略
