Swiper Slider начнет воспроизведение видео после всплывающего окна - PullRequest
Новая
       28

Swiper Slider начнет воспроизведение видео после всплывающего окна

0 голосов
/ 08 июня 2018

Я использую swiper.js и fancybox v3 для создания всплывающей галереи.Один из слайдов содержит видео, однако после того, как я щелкну и открою всплывающее окно, видео загрузится и начнет воспроизводить любой слайд, который я загрузил.Я пытался использовать любые события, чтобы остановить паузу видео, но он все еще не может работать.Кто-нибудь получил решения?

Вот пример кода: 

$(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

1 Ответ

0 голосов
/ 08 июня 2018

Я не эксперт по swiper, поэтому не могу объяснить почему, но я обнаружил, что обратные вызовы работают, если вы добавите их следующим образом: 

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

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

});

Демо - https://codepen.io/anon/pen/ERNogR

...