How do I deal with cloned slides to create a seamless html5 video slider in SlickJS?

Question

I'm using slickJS to create a slider with HTML5 video backgrounds for each slide. Here's my SlickJS init code:

    $homeSlider.slick({
        adaptiveHeight: true,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 4000,
        dots: true,
        fade: false,
        initialSlide: startSlide,
        lazyLoad : 'progressive',
        onBeforeChange: beforeSlickChange
    });

Everything's working fine except that when I reach the end of the list of slides and try to go to the next slide (this loops back to the first slide), Slick shows a cloned slide for a moment and then the real first slide. Because of this, I'm unable to get a seamless transition between the last and first slide going in either direction. When I click forward to the first slide from the last slide or to the last slide from the first slide, the dummy slide appears (with no video playing) and after about 500ms or so, the real slide takes its place with the video playing.

What I'd like to happen is for the video to be playing seamlessly when transitioning two slides. I tried playing the video on the cloned slide and then playing the real slide's video from a slightly later point so that when the cloned slide disappeared, the real slide's video would be at the same point and there would be no noticeable change. However, the amount of time it takes for the cloned slide to disappear seems inconsistent.

Does anyone have a solution for this problem? Changing the slider to fade instead of slide fixes this problem, but I'd like to keep the sliding behavior. Thank you!

Answer 1

I managed to solve this problem. What I did was to play the video on the cloned slide and the real slide and then set the currentTime property of the real slide to that of the cloned slide on the afterChange event. The code looks like this:

Init code:

$homeSlider.slick({
    adaptiveHeight: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 4000,
    dots: true,
    fade: false,
    initialSlide: startSlide,
    lazyLoad : 'progressive',
    onBeforeChange: beforeSlickChange,
    onAfterChange: afterSlickChange
});

onBeforeChange handler:

function beforeSlickChange(slick, currentSlide, nextSlide) {
    if(hasVideoBG(currentSlide) === true && isMobile(mobileQuery) === false) {
        getSlideVideoByIndex(currentSlide).currentTime = 0;
        getSlideVideoByIndex(nextSlide).currentTime = 0;
            }
    if(hasVideoBG(nextSlide) === true && isMobile(mobileQuery)=== false) {
        if(nextSlide === 0) {
            $homeSlider.find(".slick-cloned:eq(1) video").get(0).currentTime = 0;
            $homeSlider.find(".slick-cloned:eq(1) video").get(0).play();
                }
        if(nextSlide === (getSliderCount() - 1)) {
            $homeSlider.find(".slick-cloned:eq(0) video").get(0).currentTime = 0;
            $homeSlider.find(".slick-cloned:eq(0) video").get(0).play();
        }
        getSlideVideoByIndex(nextSlide).play();
    }
}

onAfterChange handler:

function afterSlickChange(slick, currentSlide) {
    if(currentSlide === 0) {
        var $slideVideo = $homeSlider.find(".slick-cloned:eq(1) video").get(0);
        getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
    } else if(currentSlide === (getSliderCount - 1)) {
        var $slideVideo = $homeSlider.find(".slick-cloned:eq(0) video").get(0);
        getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
    }
}

Basically I am resetting the currentTime of both the real and cloned slide videos to 0 and playing them before the slide changes. After the slide changes, I'm setting the currentTime property of the real slide to that of the cloned slide. This makes it so that when the cloned slide disappears, the real slide is playing the same video at the same time and the transition is seamless.