How do I deal with cloned slides to create a seamless html5 video slider in SlickJS?
<p>I'm using slickJS to create a slider with HTML5 video backgrounds for each slide. Here's my SlickJS init code:</p>

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

<p>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.</p>

<p>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.</p>

<p>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!</p>