Question

我需要使光滑的旋转木马自动移动，无限远且不停止。这就是我已经拥有的：

＆＃13;

targets

＆＃13;

$('#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
        }
    }]
});

＆＃13;

但正如您所看到的，当它移动到另一张幻灯片时，它会暂停一段时间，然后移动到下一张幻灯片。我想让它慢慢运行而不停止。我想你知道我的意思。

Answer 1

您需要设置autospeed: 0并添加cssEase:linear，这将提供您正在寻找的自动收报机效果。

这是jsfiddle working demo！

＆＃13;

$('#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
            }
        }]
    });

＆＃13;

<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>

＆＃13;

光滑的旋转木马 - 无限制的不停表演

1 个答案: