【Slick】自動で流れ続ける無限ループスライダーを作成する

infinite loop sliderSlick



当記事では、自動で流れ続ける無限ループスライダーをslick.jsを使用して作成する方法を記します。



通常のslickスライダーはご理解されている前提で進めていきますので、
「slickスライダー初めて」という方はまずこちらからご参考に頂ければと思います。
slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】






①矢印やドットのないスライダーを作成

自動で動き続けるスライドなので、矢印やドットは不要です。
自動再生だけオプションでつけておきましょう。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<style>
    .slider{
        width:70%;
        margin:0 auto;
    }
    .slider img{
        width:100%;
    }
    .slider .slick-slide{
        height:auto!important;
    }
</style>

<div class="slider">   
    <div><img src="./img/slider_image1.png"></div>
    <div><img src="./img/slider_image2.png"></div>   
    <div><img src="./img/slider_image3.png"></div>
    <div><img src="./img/slider_image4.png"></div>
</div>

<script>
    $('.slider').slick({
        autoplay: true,         //自動再生
        autoplaySpeed: 0,       //自動再生のスピード
    })
</script>

矢印やドットのない自動再生スライダーができました。





②スライドスピードと表示枚数を設定する

speedオプションとslidesToShowオプションでそれぞれ設定します。

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 2500,            //追加(スライドスピード
    slidesToShow: 3,        //追加(スライドの表示枚数
});





③スライドの動きを等速にする

cssEaseオプションに“linear”を設定することで、スライドの動きを等速にすることができます。

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 2500,
    slidesToShow: 3,       
    cssEase: "linear",      //追加(スライドの動きを等速に
});






connaiconnai

④スライドが途中で止まらないようにする

最後に、このままではホバーした時などに動きが止まってしまうので、下記のように追記して、スライドが途中で止まらないようにします。

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 2500,
    slidesToShow: 3,       
    cssEase: "linear",
    pauseOnHover: false,    //追加(ホバーしても止まらないように
    pauseOnFocus: false,    //追加(フォーカスしても止まらないように
});

無限ループスライダーが完成しました!





ソースコード全文

最後にソースコードを全文載せておきます。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<style>
    .slider{
        width:70%;
        margin:0 auto;
    }
    .slider img{
        width:100%;
    }
    .slider .slick-slide{
        height:auto!important;
    }
</style>


<div class="slider">   
    <div><img src="./img/slider_image1.png"></div>
    <div><img src="./img/slider_image2.png"></div>   
    <div><img src="./img/slider_image3.png"></div>
    <div><img src="./img/slider_image4.png"></div>
</div>


<script>
    $('.slider').slick({
        autoplay: true,         //自動再生
        autoplaySpeed: 0,       //自動再生のスピード
        speed: 2500,            //スライドスピード
        slidesToShow: 3,        //スライドの表示枚数
        cssEase: "linear",      //スライドの動きを等速に
        pauseOnHover: false,    //ホバーしても止まらないように
        pauseOnFocus: false,    //フォーカスしても止まらないように
    });
</script>







以上、自動で流れ続ける無限ループスライダーをslick.jsで作成する方法でした。



他にもslick.jsで実装できる様々なスライダーを紹介しているので興味があればご参考ください!
slick.jsでよく作るスライダーを10種類紹介

コメント

タイトルとURLをコピーしました