vue-awesome-swiper的基本使用

安裝

• 安裝位址：https://www.npmjs.com/package/vue-awesome-swiper

引入

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "../../../node_modules/swiper/css/swiper.css";
           

注冊元件

components: {
    swiper,
    swiperSlide
},
           

元件使用

<div class="banner_box">
	<!--注意事項：此處一定要加v-if判斷，等待所有異步資料加載完成後渲染，否則會出現輪播異常等問題-->
    <swiper ref="mySwiper" :options="swiperOptions4" v-if="imgList4.length > 0">
        <swiper-slide v-for="(item, index) in imgList4" :key="index">
            <img :src="item.imgUrl" alt="">
            <div class="info">{{item.info}}</div>
        </swiper-slide>
    </swiper>
    <!--如果你需要分頁-->
   	<div class="swiper-pagination" slot="pagination"></div>
    <!--如果需要前進後退按鈕-->
    <div class="swiper-button-next2"></div>
    <div class="swiper-button-prev2"></div>
</div>
           

配置項

swiperOptions4: {
	pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    slidesPerView: 2, // 一行顯示slider的個數
    slidesPerGroup: 2, // 定義slides的數量多少為一組
    loop: true, // 循環模式選項
    autoplay: {
        delay: 3000
    }, // 自動播放
    speed: 2000, // 切換速度
    effect: "slide", // 動畫 fade cube slide coverflow flip
    navigation: {
        nextEl: '.swiper-button-next2',
        prevEl: '.swiper-button-prev2',
    }
},
           

樣式修改

/deep/ .swiper-pagination-bullet-active {
 background-color: #fff !important;
}

/deep/ .swiper-pagination-bullet {
    width: 16px;
    height: 4px;
    border-radius: 5px;
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

/deep/ .swiper-pagination-bullets {
    bottom: 5px;
}
           

開啟和關閉輪播

switchChange (e) {
    this.flag= e;
    this.$nextTick(() => {
        if (e) {
            this.$refs.mySwiper1.swiper.autoplay.start();
            this.$refs.mySwiper2.swiper.autoplay.start()
        } else {
            this.$refs.mySwiper1.swiper.autoplay.stop();
            this.$refs.mySwiper2.swiper.autoplay.stop();
        }
    })
}
           

效果圖