Slick slider different autoplay for each slide

I have a slick carousel with both an image and a video, I have it so when it reaches the video it autoplays and when it finishes it goes to the image. What I would like is to have autoplay and autoplay speed only for the image and not for the slide with the video as when the video finishes it's waiting for the autoplay speed to finish and then move to the image which doesn't look right. Is there a way to set the autoplay speed to 0 for the video slide...You can see the carousel in action here: http://foley13.webfactional.com/grid-website/carousel-test/

Here is my javascript for the slider:

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

Try to goto first slide when the video finished playing without waiting for the auto-play

Try changing

$('video').on('ended', function() {
console.log('Video Complete');
slider.slick('slickPlay');
});


To this

$('video').on('ended', function() {
console.log('Video Complete');
slider.slick('slickPlay');
slider.slick('slickGoTo', 0);
});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.