Slick-carousel how to stop autoplay when video is on via youtube api

Question

Hi i\'m having trouble to get slick carousel (http://kenwheeler.github.io/slick/) to stop the autoplay when I\'m using a youtube clip inside the slider..

Someone said t

Answer 1

The onAfterChange is a property of slick that can be passed in the plugin initiation.

/*  Slick slider init */
$("#slider").slick({ 
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  dots: true,
  autoplay: true,
  autoplaySpeed: 7000,
  infinite: true,
  onAfterChange : function() {
    player.stopVideo();
  }
});

EDIT

To stop the slider when the video starts, I guess looking at your code, here's what you could try:

function onPlayerReady() {
    $("#slide-video").on("click", function() {

        // pause the slider
        $('#slider').slick('slickPause');

        $(this).css('background','transparent');
        $("#player").show();
        player.playVideo();
    });
}

Answer 2

I found a solution to my problem:

function onPlayerReady() {
        $("#slide-video").on("click", function() {
            $(this).hover(function(){
                slider.slick('slickPause');
            });
            $(this).css('background','transparent');
            $("#player").show();
            player.playVideo();
        });
    }

    function onPlayerStateChange(event) {
        if(event.data === 0 || event.data === 2) {
            $(".countdown").fadeIn();
        }

        if(event.data === 1) {
            $(".countdown").fadeOut();
        }

        if( 1 === event.data || 2 === event.data || 3 === event.data) {
            slider.slick('slickPause');

        } else {
            slider.slick('slickPlay');
        }
    }

This worked on my end in chrome & Safari.. Firefox doesnt work on and IE I cant try since im not on a pc but on a MAC, but thats why i putted a hover function incase someone want to have the mouse there?

update: Okay it works now with all.. its just after you pause the video and then resume it AFTER the slider has gone once it will not use the slickPause function anymore.