Slick Karussell - unlimitierte No-Stop-Show

Question

Ich muss glatt Karussell machen, um automatisch zu bewegen, unendlich und ohne zu stoppen. Dies ist, was ich bereits:

$('#carousel').slick({ 
 
    slidesToShow: 3, 
 
    autoplay: true, 
 
    autoplaySpeed: 1000, 
 
    speed: 1000, 
 
    infinite: true, 
 
    focusOnSelect: false, 
 
    responsive: [{ 
 
     breakpoint: 768, 
 
     settings: { 
 
      arrows: false, 
 
      slidesToShow: 3 
 
     } 
 
    }, { 
 
     breakpoint: 480, 
 
     settings: { 
 
      arrows: false, 
 
      slidesToShow: 1 
 
     } 
 
    }] 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> 
 

 
<div id="carousel"> 
 
    <div><a href="#"><img src="http://placehold.it/205x105" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105/f00/fff" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105/00f/fff" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105/f00/fff" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105/00f/fff" /></a></div> 
 
</div>

Aber wie Sie sehen können, wenn es zu einer anderen Folie bewegt, stoppt er für eine Weile und dann, um die nächsten zu bewegen. Ich möchte es langsam laufen lassen, ohne anzuhalten. Ich denke, du weißt, was ich meine.

Answer 1

Sie müssen autospeed: 0 einstellen und cssEase:linear hinzufügen, die den Tickereffekt liefern, den Sie suchen.

Hier ist ein jsfiddle working demo!

$('#carousel').slick({ 
 
     slidesToShow: 3, 
 
     autoplay: true, 
 
     autoplaySpeed: 0, 
 
     speed: 2000, 
 
     cssEase:'linear', 
 
     infinite: true, 
 
     focusOnSelect: false, 
 
     responsive: [{ 
 
      breakpoint: 768, 
 
      settings: { 
 
       arrows: false, 
 
       slidesToShow: 3 
 
      } 
 
     }, { 
 
      breakpoint: 480, 
 
      settings: { 
 
       arrows: false, 
 
       slidesToShow: 1 
 
      } 
 
     }] 
 
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> 
 

 
<div id="carousel"> 
 
    <div><a href="#"><img src="http://placehold.it/205x105" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105/f00/fff" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105/00f/fff" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105/f00/fff" /></a></div> 
 
    <div><a href="#"><img src="http://placehold.it/205x105/00f/fff" /></a></div> 
 
</div>