Hi,

It might be worth looking at the slick 'beforeChange' event. Here, you have access to the current slide and to the next slide, so you should be able to stop the current video playing, and then start the next video playing.

Thanks Stephen I have tried this a couple of ways but neither work for me. Any idea where i am going wrong.

 // On slide change, pause all videos
        $('.component.usn_cmp_banner .slides, .swp .slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $('video').each(function() {
    $(this).get(0).pause();
  });
});

// On slide chnage, play a video inside the current slide
$('.component.usn_cmp_banner .slides, .swp .slides').on('afterChange', function(event, slick, currentSlide, nextSlide){
  if( $('.project-slide.slick-current').find('video').length !== 0) {
    $(".component.usn_cmp_banner .slides, .swp .slides .slick-current video")[0].play();
  }
});

and

  $(document).ready(function() {
  var slider = $('.component.usn_cmp_banner .slides, .swp .slides').slick({
    rtl: rtl_slick(),
            infinite: true,
            speed: 600,
            fade: true,
            adaptiveHeight: true,
            pauseOnFocus: false,
            prevArrow: '<div class="slick-prev"><i class="icon usn_ion-ios-arrow-back"></i>',
            nextArrow: '<div class="slick-next"><i class="icon usn_ion-ios-arrow-forward"></i>'
  });
  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');
  });
});

Hi,

I think you need to target both the current slide and also the next slide. Looking back on something I did previously, you might be able to apply it to your scenario. In my case, as each slide changed, I was changing the style of the navigation, for example, on one slide the navigation might be black and then on the next slide the navigation colour would change to white, therefore before each change I was removing a class (this is where you would stop the video), and then I would add the new class to the next slide (in your case playing the next video)

        $('.sliders').on('beforeChange', function (event, slick, currentSlide, nextSlide) {

        var current = $(slick.$slides[currentSlide]);
        var currentBranding = current.data('branding');
        var next = $(slick.$slides[nextSlide]);
        var nextBranding = next.data('branding');
        $('.navigation').removeClass(currentBranding);
        $('.navigation').addClass(nextBranding);


    });

Hope this helps in some way.

is working on a reply...