网址https://www.npmjs.com/package/vue-awesome-swiper
第一步 安装插件
npm install swiper vue-awesome-swiper --save
第二步 引用插件
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper）
可以在使用轮播图页面引用
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
第三步 html 模板
<swiper class="swiper" :options="swiperOption">
<swiper-slide>
<img src="../../static/img/banner.jpg" alt="" />
</swiper-slide>
<swiper-slide>
<img src="../../static/img/banner1.jpg" alt="" />
</swiper-slide>
<swiper-slide>
<img src="../../static/img/banner2.jpg" alt="" />
</swiper-slide>
<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>
</swiper>
第四步 js模板
<script>
import{Swiper,SwiperSlide}from'vue-awesome-swiper'
import'swiper/css/swiper.css'
export default{
name:'swiper-example-loop',
title:'Loop mode / Infinite loop',
components:{
Swiper,
SwiperSlide
},
data() {
return{
swiperOption:{
slidesPerView:4,//展示几张图
slidesPerGroup: 4,//点击下一页切换一屏
spaceBetween:30,
loop:true,//左右都能点 可以循环
autoplay: {//自动轮播
delay: 2500,
disableOnInteraction: false,
},
pagination:{
el:'.swiper-pagination',
clickable:true
},
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev'
}
}
}
}
}
<script>
第五步 自定义修改小圆点样式
解决办法：给父标签设置一个id，例如父标签id="parent"
第一种情况 在sass/less中使用/deep/样式穿透
#parent /deep/ .swiper-pagination-bullet{
background-color: red;
}
第二种情况 在stulys中使用：>>>实现样式穿透
#parent >>> .swiper-pagination-bullet-active {
background-color: red;
}
