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

Slick Slider每个幻灯片的不同自动播放

  •  0
  • Duggy G  · 技术社区  · 6 年前

    我有一个既有图像又有视频的光滑的旋转木马,我有它,当它到达视频时,它会自动播放,当它完成时,它就会转到图像。我想要的是只有图像才有自动播放和自动播放速度,而不是有视频的幻灯片,因为当视频完成时,它等待自动播放速度完成,然后移动到看起来不正确的图像。是否可以将视频幻灯片的自动播放速度设置为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');
          })
        });
    
    1 回复  |  直到 6 年前
        1
  •  0
  •   Unnikrishnan R    6 年前

    视频播放完毕后,尝试转到第一张幻灯片,而不等待自动播放

    尝试改变

    $('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);
    });