Swiper轮播图

版本：“swiper”: “^6.8.4”,
处理每分钟重新请求数据后，播放卡顿，快速闪，没按照设置时间播放等bug
以下是直接vue2 完整的组件代码
使用： <SwiperV :imgList=“swiperList” /

<template>
    <div class="bannerBox">
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in imgList" :key="index">
                    <img class="img" :src="item" />
                </div>
            </div>
          
            <div class="swiper-button-prev swiper-button-white">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="swiper-button-next swiper-button-white">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
        <!-- <div style="height: 15px; width: 400px"></div>
      <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-bottom" v-for="(item, index) of bigImg" :key="index">
            <img class="img2" :src="item.imgPath" />
            <div class="title_text">{{ item.name }}</div>
          </div>
        </div>
      </div> -->
    </div>
</template>

<script>
import Swiper from "swiper"
// import { Pagination } from 'swiper';

export default {
    // components: { Pagination },
    props: {
        imgList: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            bigImg: [],
            galleryTop:null
        }
    },
    watch: {
        "imgList": {
            handler (newValue, oldValue) {
                this.$nextTick(() => {
                    this.galleryTop.destroy(); 
                    this.galleryTopLunbo()
                })
            },
            deep: true
        }
    },
    created () {

    },
    mounted () { 
        this.$nextTick(() => {
                    this.galleryTopLunbo()
                })
    },

    methods: {
        galleryTopLunbo () {
            this.galleryTop = new Swiper(".gallery-top", {
                spaceBetween: 0,
                loop: true,
                loopedSlides: 1,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                // 左右按钮
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                thumbs: {
                    //thumbs组件专门用于制作带缩略图的swiper
                    swiper: this.galleryThumbs,
                    slideThumbActiveClass: "swiper-slide-thumb-active",
                },
            })
        },
        galleryThumbsLunbo () {
            this.galleryThumbs = new Swiper(".gallery-thumbs", {
                spaceBetween: 15, //在slide之间设置距离（单位px）
                slidesPerView: 4, //设置slider容器能够同时显示的slides数量
                // loop: true,        //设置为true 则开启loop模式
                // freeMode: true,    //默认为false，普通模式：slide滑动时只滑动一格
                // loopedSlides: 7,    //一般设置大于可视slide个数2个即可
                watchSlidesVisibility: true, //开启watchSlidesVisibility选项前需要先开启watchSlidesProgress
                watchSlidesProgress: true, //开启这个参数来计算每个slide的progress(进度、进程)
            })
        },

        event () {
            const self = this
            return {}
        },
        network () {
            const self = this
            return {}
        },
    },
}
</script>

<style scoped lang="scss">
.title_text {
    width: 100%;
    text-align: center;
    color: #000;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 600;
}

.bannerBox {
    width: 100%;
    height: 100%;

    .img {
        width: 100%;
        height: 100%;
    }

    .img2 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 98%;
        height: 80%;
    }

    .gallery-top {
        width: 100%;
        height: 100%;
        border: 1px solid #ccd2e7;
    }

    .gallery-thumbs {
        width: 100%;
        height: 200px;
        background-color: #fff;

        img {
            border: 1px solid #ccd2e7;
        }
    }

    .swiper-bottom {
        opacity: 0.5;
    }

    .swiper-slide-thumb-active {
        opacity: 5;
    }
}

/deep/ .el-icon-arrow-right {
    display: none;
}

/deep/ .el-icon-arrow-left {
    display: none;
}
</style>