javascript - 完成后光滑的 slider 幻灯片视频

Question

我正在使用 slick slider 来创建英雄 block ，我有一个 vimeo 视频和一个我想自动滑动的图像，我可以正常工作。我想要实现的是，当幻灯片到达 vimeo 视频时， slider 会停止自动播放，直到视频播放完毕，然后再次开始自动播放幻灯片。

这是 slider 的基本 html:

   <div id="main-image" class="sliderMain">
        <div>
          <iframe id="video" class="embed-player slide-media" src="https://player.vimeo.com/video/273725261?api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=0&autoplay=1&id=273725261" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
        <div>
          <img src="http://foley13.webfactional.com/grid-website/wp-content/uploads/2018/06/o-FRIENDS-facebook.jpeg">
      </div>
   </div>

这是让 slider 正常工作的 Javascript:

$('.sliderMain').on('afterChange', function(event, slick, currentSlide) {
    var vid = $(slick.$slides[currentSlide]).find('oembed');
      if (vid.length > 0) {
        $('.sliderMain').slick('slickPause');
        $(vid).get(0).play();
      }
    });

  $('oembed').on('ended',function(){     
    console.log('Video Complete')
      $('.sliderMain').slick('slickPlay');
  });

 $(document).ready(function(){
  $('.sliderMain').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
    autoplay: true,
    autoplaySpeed: 1000
  });


});

我添加了可用的 afterChange 函数，但灵活的 slider 自动播放速度让它看起来好像不起作用，因此视频幻灯片在视频播放完毕之前滑动。您可以在此处查看示例:http://foley13.webfactional.com/grid-website/

Answer 1

因为没有oembed元素，你在afterChange事件中搜索。

我不确定 .play() 函数是如何工作的，但 SO 片段似乎有问题。这就是为什么我无法测试它是否正常工作的原因。无论如何，将 oembed 更改为 iframe 因为那肯定是错误的。

同时将 slick 保存为变量，这样您就不会进行过多不必要的 jQuery 调用。

下面的例子

$(document).ready(function() {
  var $slider = $('.sliderMain').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
    autoplay: true,
    autoplaySpeed: 1000
  });
  $slider.on('afterChange', function(event, slick, currentSlide) {
    var vid = $(slick.$slides[currentSlide]).find('iframe');
    if (vid.length > 0) {
      $slider.slick('slickPause');
      $(vid).get(0).play();
    }
  });

  $('iframe').on('ended', function() {
    console.log('Video Complete')
    $slider.slick('slickPlay');
  });
});