滑らかなカルーセル - 無制限のノンストップショー

Question

私は無限に、無限に移動するために滑らかなカルーセルを作る必要があります。

$('#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>

しかし、あなたが見ることができるように、それは別のスライドに移動すると、それはしばらくの間停止し、その後、次のいずれかに移動します。これは私がすでに持っているものです。私はそれを止まらずにゆっくり走らせたい。私はあなたが私の言いたいことを知っていると思う

Answer 1

autospeed: 0を設定し、cssEase:linearを追加すると、探しているティッカー効果が得られます。

ここには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>