关于swiper 里 图片视频混合后 自动轮播 方案

首先讲一下流程：两者播放的时间间隔不一样所以需要，暂停轮播和重新开启轮播以及 视频切换 时候用到的 切换方法；

轮播图的代码：

setSwiper() {
            setTimeout(()=>{
                var that = this
                this.mySwiper = new Swiper('.audioAndVideos .swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                on: {
                    slideChangeTransitionEnd: function(){
                        // 在视频轮播的时候停下来
                        if(that.imgListLength <= this.realIndex) {
                            this.autoplay.stop()
                            if(that.swiperList[this.realIndex].type==2) { //realIndex解决activeIndex索引错误
                                that.videoGet(this.realIndex) // 开始播放
                            }
                        }else { // 在图片的时候轮播继续
                            this.autoplay.start()
                        }
                    },
                    autoplayStart:function(){},
                    autoplayStop:function(){}
                },
                loop:true,
                autoplay: {
                    disableOnInteraction: false,
                    delay: 1000
                },
                initialSlide:0,
                autoplayDisableOnInteraction : false, //手动播放后继续自动播放
                centeredSlides: true,
                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                observeSlideChildren:true
                });

            },500)
            
        }

视频部分操作代码：

videoGet(index) {
    const allVideo = this.$refs.videoPlayer 
    const videoIndex = index - this.imgListLength // 视频列表索引
    let that = this
    allVideo.forEach((item)=>{ 
        item.pause() // 播放之前暂停所有视频
        item.currentTime = 0 // 播放之前播放时间先重置 0 
    })
    // 获取当前视频开始播放
    const videoPlayer = allVideo[videoIndex]
    videoPlayer.play()
    videoPlayer.addEventListener("ended", e => { // 播放结束切换下一页
        that.mySwiper.slideNext();
    })
},

注意：其中发现的 bug

1、添加了 loop （无限循环）之后 activeIndex索引错误 使用 realIndex 解决
2、滑动轮播图之后 不会动了，添加属性 ： autoplayDisableOnInteraction : false, //手动播放后继续自动播放
on: {
slideChangeTransitionEnd: function() {
this.autoplay.start() //手动播放后继续自动播放
},
},

3、注意参考文档：https://www.swiper.com.cn/api/autoplay/424.html

文档能解决99% 的问题！！！