圆滑的旋转木马-无限畅游

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工作演示

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