Question

我正在使用swiper.js和fancybox v3创建一个弹出库。其中一张幻灯片包含一个视频，但是在我点击并打开弹出窗口后，视频将加载并开始播放我登陆的任何幻灯片。我试图使用任何事件来停止暂停视频，但它仍然无法正常工作。有人有解决方案吗？

这是一个codepen示例：

$(document).ready(function () {
    var mySwiper = new Swiper('.swiper-container', {
        init: false,
        pagination: {
            el: '.swiper-pagination',
            observer: true,
            observeParents: true,
            on: {
                slideChangeTransitionStart: function () {
                    $('.swiper-slide').find('video').each(function () {
                        console.log(this);
                        this.pause();
                    });
                },
                slideChangeTransitionEnd: function () {
                    $('.swiper-slide').find('video').each(function () {
                        this.pause();
                    });
                }
            }
        },
    })
    $('.fancybox-trigger').click(function (e) {
        e.preventDefault();
        var thisTarget = $(this).data('index');
        $.fancybox.open({
            src: "#lightbox",
            type: 'inline',
            opts: {
                toolbar: false,
                defaultType: 'inline',
                autoFocus: true,
                touch: false,
                afterLoad: function () {
                    mySwiper.init();
                    mySwiper.slideTo(thisTarget - 1)
                    $('swiper-slide').find('video').each(function () {
                        this.pause();
                    })
                }
            }
        })
    })
});

https://codepen.io/anon/pen/mKOwag?editors=0010

Answer 1

我不是swiper专家，因此我无法解释原因，但我发现如果你这样添加回调就可以了：

mySwiper.on('slideChange', function() { 

  $('.swiper-slide').find('video').each(function() {      
    this.pause();
  });

});

演示 - https://codepen.io/anon/pen/ERNogR

Swiper Slider将在弹出后开始播放视频

1 个答案: