logo标签列表

Slick轮播 - 无限不间断展示

javascriptjqueryslick.js
4
我需要让轮播图自动无限循环滚动，不间断。这是我已经有的代码： 

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

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

1个回答
8
您需要设置 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>

这正是我在寻找的！非常感谢！ - Patrik Krehák
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接