javascript - Slick carousel - unlimted no-stopping show - Stack Overflow

admin管理员组

文章数量:1356413

I need to make slick carousel to move automatically, infinity and without stopping. This is what I already have:

$('#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=".5.9/slick.min.css" rel="stylesheet"/>
<link href=".5.9/slick-theme.min.css" rel="stylesheet"/>
<script src=".9.1/jquery.min.js"></script>
<script src=".5.9/slick.min.js"></script>

<div id="carousel">
    <div><a href="#"><img src="" /></a></div>
    <div><a href="#"><img src="" /></a></div>
    <div><a href="#"><img src="" /></a></div>
    <div><a href="#"><img src="" /></a></div>
    <div><a href="#"><img src="" /></a></div>
    <div><a href="#"><img src="" /></a></div>
</div>

I need to make slick carousel to move automatically, infinity and without stopping. This is what I already have:

$('#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./ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

But as you can see, when it move to another slide, it stops for a while and then move to next one. I want to make it run slowly without stopping. I think you know what I mean.

• javascript
• jquery
• slick.js

Share Improve this question Follow edited Mar 21, 2016 at 10:54 hasumedic 2,1671212 silver badges1717 bronze badges asked Mar 21, 2016 at 9:40 Patrik KrehákPatrik Krehák 2,68388 gold badges3535 silver badges6363 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You need to set autospeed: 0 and add cssEase:linear which will provide the ticker effect you are looking for.

Here is a 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./ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

本文标签： javascriptSlick carouselunlimted nostopping showStack Overflow