制作のご相談はこちら
jQueryプラグイン「slick」を使って横方向へ流れ続けるスライダーを設置する方法

公開日 : 2019年06月01日

jQueryプラグイン「slick」を使って横方向へ流れ続けるスライダーを設置する方法


コンテンツの一部としてギャラリー風に横に流れるスライドを作るにはslickというプラグインを使うと簡単に実装することが出来ます。
slickについては以前も記事にしましたが汎用性の高いおすすめのプラグインです。
【jQuery】レスポンシブ対応のカルーセルは「slick」がおすすめ

jQueryプラグイン「slick」を使って実装してみる

HTML

class名は任意で変えて問題ありません。

<div class="slide">
	<div><img src="image_1.jpg" alt=""></div>
	<div><img src="image_2.jpg" alt=""></div>
	<div><img src="image_3.jpg" alt=""></div>
	<div><img src="image_4.jpg" alt=""></div>
	<div><img src="image_5.jpg" alt=""></div>
	<div><img src="image_6.jpg" alt=""></div>
	<div><img src="image_7.jpg" alt=""></div>
	<div><img src="image_8.jpg" alt=""></div>
</div>

CSS

imgはwidthを100%にして横一杯にします。

.slide img {
    width: 100%;
}

Javascript

slidesToShowは画面上に何枚のスライドを見せるかというオプションです。
responsiveはレスポンシブ用のオプションで、画面サイズが768px未満の場合にオプションが変わるようにしています。
スマホ表示の際にslidesToShowの枚数を少なめにしています。

$('.slide').slick({
    slidesToShow: 6,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 0,
    speed: 9000,
    arrows: false,
    cssEase: 'linear',
responsive: [{
    breakpoint: 768,
    settings: {
      slidesToShow: 5
    }
}]
});

実装したデモはこちらです。
DEMO

デモで使用した写真素材はこちらのサイトのものを使用しました。
女の子向けのとってもかわいい写真が揃っています。
おしゃれなフリー写真素材|GIRLY DROP(ガーリードロップ)