代码之家 › 专栏 › 技术社区 › Duggy G

完成后滑动幻灯片视频

slick.js jquery javascript

Duggy G · 技术社区 · 6 年前

我正在使用光滑的滑块创建一个英雄块,我有一个vimeo视频和一个图像,我想自动幻灯片,我有这个工作良好。我想要实现的是,当幻灯片到达vimeo视频时,滑块停止自动播放,直到视频播放完毕,然后再次开始自动播放幻灯片。

这是滑块的基本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>

这是我的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
  });


});

我已经添加了一些可以工作的后改功能,但是滑动滑块自动播放速度使它看起来不像,所以视频幻灯片在视频播放完成之前滑动。你可以看到这里的例子: http://foley13.webfactional.com/grid-website/

1 回复 | 直到 6 年前

Krzysztof Janiszewski 6 年前

因为没有 oembed 元素,然后在中搜索它 afterChange 事件。

我不知道怎么做 .play() 函数可以工作,但so snippet似乎有问题。这就是为什么我不能测试它是否正常工作。无论如何,改变 镶嵌的 到 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');
  });
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前