slick slider slide video when finished

Question

I'm using slick slider to create a hero block, I have a vimeo video and an image that I want to auto slide, I have this working fine. What I'm wanting to achieve is that when the slide gets to the vimeo video the slider stops the autoplay until the video has finished playing and then start the autoplaying of the slides again.

This is my basic html for the slider:

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

This is my Javascript to get the slider working:

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


});

I've added afterChange functions which work but the slick slider autoplay speed is making it look like it doesn't so the video slide is sliding before the video has finished playing. You can see the example here: http://foley13.webfactional.com/grid-website/

Krzysztof Janiszewski · Accepted Answer · 2020-12-23T11:29:34.537

It is because there is no oembed element, and you search for it in afterChange event.

I'm not sure how .play() function works but there seems to be a problem with SO snippet. That's why I can't test if it works properly. Anyway, change oembed to iframe because that for sure is wrong.

Also save slick as a variable so that you don't make too much jQuery calls which are unnecessary.

Example below

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

Thankyou for your quick response, the video now plays fully which is great but it doesn't continue sliding once the video has finished? — Duggy G, Jun 11 '18 at 14:12
@DuggyG I would suggest having a look at using the vimeo api to detect when the video is done (https://stackoverflow.com/a/41532395/6049581). Try it out, and if you get stuck, open a new question with your new problem :) good luck, and don't forget to mark this answer as accepted! :) — Frits, Jun 11 '18 at 20:28

slick slider slide video when finished

1 Answers1