javascript - slick slider slide video when finished - Stack Overflow

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=";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=".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: /

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./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./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./grid-website/

• javascript
• jquery
• slick.js

Share Improve this question Follow asked Jun 11, 2018 at 12:57 Duggy GDuggy G 47733 gold badges1212 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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