1、首先进入百度打开vue-awsome-swiper-npm
2、在小黑窗中敲 npm install vue-awesome-swiper --save
3、将以下代码引入到文件夹中的main.js中
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
4、在vue-awsome-swiper-npm首页中找到SPA模块,复制template标签里面的 swiper标签中的所有东西 ,粘贴到你想要轮播的那个页面(组件)中 。 将不需要的东西删掉 。
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
5、然后在下面script中的export default里 ,只拿 data里的东西 (如下所示:)
data() {
return {
swiperOption: {
loop:true,
autoplay:{
delay:1000 //一秒切换一次
},
pagination: {
el: '.swiper-pagination',
}
}
}
}
6、如果你想循环播放图片的话 ,就在上面代码块中 加入 loop:true
设置轮播的时间是 加入 :
autoplay:{
delay:1000 //一秒切换一次
}
7、想要实现轮播图中的小圆圈(分页器),加入:
pagination: {
el: '.swiper-pagination',
}
(温馨提示:想要实现更多的样式去 Swiper4 页面上查找更多精彩内容!)