この記事は2019年6月1日に書かれたもので、内容が古い可能性がありますのでご注意ください。
コンテンツの一部としてギャラリー風に横に流れるスライドを作るには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(ガーリードロップ)