CODEWITHSUNDEEP
javascriptjqueryslick.js
Patrik Krehák
Patrik Krehák

Reputation: 2683

Slick carousel - unlimted no-stopping show

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

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.

Upvotes: 4

Views: 6223

Answers (1)

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

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

Upvotes: 8

Related Questions