每张幻灯片的光滑滑块不同的自动播放

Question

我有一个既有图像又有视频的漂亮轮播，我有它，所以当它到达视频时它会自动播放，当它结束时它会转到图像。我想要的是只为图像设置自动播放和自动播放速度，而不是为视频幻灯片设置自动播放速度，因为当视频结束时，它正在等待自动播放速度结束，然后移动到看起来不正确的图像。有没有办法将视频幻灯片的自动播放速度设置为 0...您可以在此处查看正在运行的轮播：http://foley13.webfactional.com/grid-website/carousel-test/

这是我的 javascript 滑块：

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

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

    });


    /* Custom Next & Previous Links for Homepage slider */
    jQuery(function($) {
      $('.prev').click(function(){
        $('.homeslider').slick('slickPrev');
      })
    });

    jQuery(function($) {
      $('.next').click(function(){
        $('.homeslider').slick('slickNext');
      })
    });

Answer 1

尝试在视频播放结束时转到第一张幻灯片，而不是等待自动播放

尝试更改

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

对此

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

每张幻灯片的光滑滑块不同的自动播放

Slick slider different autoplay for each slide

javascript

jquery

slick.js