关于swiper 里图片视频混合后自动轮播方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于swiper 里图片视频混合后自动轮播方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先讲一下流程：两者播放的时间间隔不一样所以需要，暂停轮播和重新开启轮播以及视频切换时候用到的切换方法；
swipe 自动轮播,随笔1,音视频,html,前端

轮播图的代码：

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% 的问题！！！文章来源地址https://www.toymoban.com/news/detail-709252.html

到了这里，关于关于swiper 里图片视频混合后自动轮播方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！