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();
        }
    })
}

效果图