Slick slider automatische Wiedergabe von ersten Schieber in Autoplay Schleife

Question

Slick Der Schieber ist auf automatische Wiedergabe eingestellt. Zum Zeitpunkt des Spiels, die Folien kommt von links nach rechts oder vorletzte. Wenn der Schieberegler auf der letzten Folie erreicht ist, beginnt er mit dem automatischen Abspielen von der letzten Folie bis zum ersten Zurückschieben.

Ich mag der Schieber von der ersten Folie spielen statt zuletzt, wenn der Schieber in der letzten Folie erreicht ist.

Anfangs, wenn die unendliche Scroll ‚true‘ war, funktionierte alles einwandfrei. Aber aufgrund der Anforderung musste ich die unendliche Scroll auf "falsch" setzen. Das obige Problem trat auf, wenn der infinite scroll auf 'false' gesetzt wurde.

Hier ist die Fiddle.

$(document).ready(function() { 
 

 
    $('.slider-1').slick({ 
 
    dots: true, 
 
    infinite: false, 
 
    autoplay: true, 
 
    autoplaySpeed: 1000, 
 
    pauseOnFocus: false, 
 
    pauseOnHover: false, 
 
    pauseOnDotsHover: false, 
 
    slidesToShow: 3, 
 
    slidesToScroll: 3, 
 
    }); 
 

 
    $('.slider-2').slick({ 
 
    dots: true, 
 
    infinite: false, 
 
    autoplay: true, 
 
    autoplaySpeed: 1000, 
 
    pauseOnFocus: false, 
 
    pauseOnHover: false, 
 
    pauseOnDotsHover: false, 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    fade: true, 
 
    cssEase: 'linear' 
 
    }); 
 

 
});

<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/> 
 
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/> 
 
<link href="https://kenwheeler.github.io/slick/css/prism.css" rel="stylesheet"/> 
 
<link href="https://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script> 
 

 
<section id="features" class="blue"> 
 
<div class="content"> 
 
    <div class="slider slider-1"> 
 
    <div><h3>1</h3></div> 
 
    <div><h3>2</h3></div> 
 
    <div><h3>3</h3></div> 
 
    <div><h3>4</h3></div> 
 
    <div><h3>5</h3></div> 
 
    <div><h3>6</h3></div> 
 
    <div><h3>7</h3></div> 
 
    <div><h3>8</h3></div> 
 
    </div> 
 

 
    <div class="slider slider-2"> 
 
    <div><h3>1</h3></div> 
 
    <div><h3>2</h3></div> 
 
    <div><h3>3</h3></div> 
 
    <div><h3>4</h3></div> 
 
    <div><h3>5</h3></div> 
 
    <div><h3>6</h3></div> 
 
    <div><h3>7</h3></div> 
 
    <div><h3>8</h3></div> 
 
    </div> 
 
</div> 
 
</section>

Wenn jemand eine Lösung/Vorschlag haben, bitte helfen. Vielen Dank im Voraus.

Answer 1

diesen Code Versuchen:

$('.slider-2').slick({ 
     dots: true, 
     autoplay: true, 
     autoplaySpeed: 1000, 
     pauseOnFocus: false, 
     pauseOnHover: false, 
     pauseOnDotsHover: false, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     fade: true, 
     cssEase: 'linear' 
    }); 

Answer 2

$(document).ready(function() { 

    $('.slider-1').slick({ 
    dots: true, 
    infinite: 0, 
    autoplay: true, 
    autoplaySpeed: 1000, 
    pauseOnFocus: false, 
    pauseOnHover: false, 
    pauseOnDotsHover: false, 
    slidesToShow: 3, 
    slidesToScroll: 3, 
    }); 

    $('.slider-2').slick({ 
    dots: true, 
    infinite: 0, 
    autoplay: true, 
    autoplaySpeed: 1000, 
    pauseOnFocus: false, 
    pauseOnHover: false, 
    pauseOnDotsHover: false, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    fade: true, 
    cssEase: 'linear' 
    }); 

});