slickで自動で横に流れ続けるスライドショーを実装する方法

slickを使用して、コンテンツが横方向に自動で流れ続けるスライドショーを作成する方法の備忘録です。

横並びの写真が、順に無限ループで左方向に流れるように表示されます。

スライドショーを実装する

はじめに、slickを使用して通常のスライドショーを実装します。slickの基本的な使い方は、下記の記事でまとめています。

jQueryとslickファイルを読み込み、HTMLコードを記述します。

<div class="slider">
  <div><img src="sample01.png"></div>
  <div><img src="sample02.png"></div>
  <div><img src="sample03.png"></div>
  <div><img src="sample04.png"></div>
  <div><img src="sample05.png"></div>
  <div><img src="sample06.png"></div>
</div>

「slider」クラスをつけたタグの中に、画像を6枚用意します。

続いてスライドショーを実装するためのJSコード追加します。

$(function(){
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    infinite: true
  });
});

JSコードは、</body>直前の<script>に追記するか、外部ファイルに記入して読み込みます。

問題なければ、画像がドットで切り替わるスライドショーが表示されます。

無限ループの横スライドに変更する

続いて、作成したスライドを横向きに無限ループするスライダーに変更します。

JSコードを下記に変更します。

$(function(){
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 3000,
    cssEase: "linear",
    slidesToShow: 4,
    swipe: false,
    arrows: false,
    dots: false,
    pauseOnFocus: false,
    pauseOnHover: false
  });
});

autoplaySpeed: 0でスライド切り替えをなくし、speed: 3000でスライドが流れる速度を設定します。また、cssEase: "linear"でスライドの流れ方を等速になるように設定しています。

slidesToShow: 4では、スライドに一度に表示する画像の数を設定します。

さらに、矢印やドット表示でのスライドの操作を防ぐためswipe: falseを設定し、arrows: falseで矢印を、dots: falseでドットを非表示にしておきます。

マウスホバーでスライドの動きが止まらないようにpauseOnFocus: false、pauseOnHover: falseを設定して横に流れるスライドの完成です。

デザインを調整する

最後に画像の大きさや余白をCSSを調整します。

.slider {
  padding: 50px 0;
}

.slider .slick-slide {
  margin-right: 16px;
}

.slider .slick-slide img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

「slider」クラスで全体の余白を設定して、「slick-slide」クラスで画像間の余白を指定しています。

大きさの異なる画像も同じ大きさで表示できるように、imgタグに「object-fit: cover」を設定しています。「width」「height」も合わせて設定することで、画像を同じ大きさにトリミングできます。

デザインを調整できたらスライドショーの完成です。