網(wǎng)址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,//左右都能點 可以循環(huán)
autoplay: {//自動輪播
? ? ? ? ? delay: 2500,
? ? ? ? ? disableOnInteraction: false,
? ? ? ? },
pagination:{
el:'.swiper-pagination',
clickable:true
? ? ? ? ? },
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev'
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }
<script>
第五步? ?自定義修改小圓點樣式
解決辦法：給父標(biāo)簽設(shè)置一個id，例如父標(biāo)簽id="parent"
第一種情況? 在sass/less中使用/deep/樣式穿透
#parent /deep/ .swiper-pagination-bullet{
background-color: red;
}
第二種情況 在stulys中使用：>>>實現(xiàn)樣式穿透
#parent >>> .swiper-pagination-bullet-active {
? ? background-color: red;
}
