当記事では、自動で流れ続ける無限ループスライダーを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", //追加（スライドの動きを等速に
});
④スライドが途中で止まらないようにする
最後に、このままではホバーした時などに動きが止まってしまうので、下記のように追記して、スライドが途中で止まらないようにします。
$('.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種類紹介
コメント