2021.12.18|JavaScript

レスポンシブ・デザインに対応している画像スライダー jQuery「slick」の設定方法

レスポンシブ・デザインに対応している画像スライダー jQuery「slick」の設定方法

レスポンシブ・デザインに対応している画像スワイプを実装するカルーセルスライダーは、jQueryライブラリを使うことによって設定できます。
ブレイクポイントごとに表示数やスクロール数を決められ、タッチイベントやスワイプ動作も実行できます。

レスポンシブ・デザインに対応している画像スワイプを実装するカルーセルスライダーjQueryプラグイン「slick Plugin」の設定方法を解説します。

slickの主な機能と特徴

slickプラグインの主な機能と特徴を紹介します。
・レスポンシブ・デザイン対応
・ブレイクポイントごとの設定振り分け可能
・タッチデバイスに対応
・IE8以上のブラウザで動作
・縦・横カーセルに対応
・画像遅延読み込み機能
・MITライセンス

レスポンシブ・デザインに対応している画像スライダーの設定方法

1.jQueryライブラリをダウンロード

下記からJavaScriptライブラリ「slick.min.js」「slick.css」「slick-theme.css」ファイルのダウンロードを行ってください。
jqueryライブラリダウンロード
slick Pluginダウンロ

2.html、cssファイルを作成

html、cssファイルを作成します。

htmlファイルに記述
<div class="slider_box">
<ul class="thumb-item">
<li><img src="img/sample01.png"></li>
<li><img src="img/sample02.png"></li>
<li><img src="img/sample03.png"></li>
<li><img src="img/sample04.png"></li>
<li><img src="img/sample05.png"></li>
</ul>
</div>
<div class="slider_box">
<ul class="thumb-item-nav">
<li><img src="img/sample01.png"></li>
<li><img src="img/sample02.png"></li>
<li><img src="img/sample03.png"></li>
<li><img src="img/sample04.png"></li>
<li><img src="img/sample05.png"></li>
<li><img src="img/sample01.png"></li>
<li><img src="img/sample02.png"></li>
<li><img src="img/sample03.png"></li>
<li><img src="img/sample04.png"></li>
<li><img src="img/sample05.png"></li>
<li><img src="img/sample01.png"></li>
<li><img src="img/sample02.png"></li>
<li><img src="img/sample03.png"></li>
<li><img src="img/sample04.png"></li>
<li><img src="img/sample05.png"></li>
</ul>
</div>
cssファイルに記述
.slider_box {
	margin:0 0 30px 0;
	clear:both;
}
.slider_box img {
	width: 100%;
	height: auto;
}
/* thumb-item */
.thumb-item {
	max-width: 700px;
	margin: 0 auto 7px;
	padding: 0;
}
.thumb-item img{
	position: relative;
}
.thumb-item p{
	width:100%;
	color:#FFF;
	text-align:center;
	position: absolute;
	bottom: 0;
	left: 0;
	padding:1%;
	background-color:#000;
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.thumb-item-nav {
	max-width: 700px;
	margin: 0 auto;
}
.thumb-item-nav li{
	margin: 5px;
}

.thumb-item-nav .slick-next{
	right: 20px;
	z-index: 99;
}
.thumb-item-nav .slick-prev{
	left: 15px;
	z-index: 100;
}

3.htmlファイルヘッダー内に記述

htmlファイルのヘッダー内にslick用のscriptを記述します。

htmlファイルヘッダーに記述
<script type="text/javascript">
//サムネイル付き
$(function() {
	$('.thumb-item').slick({
		infinite: true,
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.thumb-item-nav'
	});
	$('.thumb-item-nav').slick({
		infinite: true,
		slidesToShow: 4,
		slidesToScroll: 1,
		asNavFor: '.thumb-item',
		focusOnSelect: true,
	});
});
</script>

4.htmlファイル内に記述

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

htmlファイルにJavaScriptの記述
<meta charset="UTF-8">
<title>レスポンシブ・デザインに対応している画像スライダー jQuery「slick」の設定方法|Webデザイナーブログ</title>
<meta name="description" content="レスポンシブに強いスライダー jQuery「slick.js」のご紹介を致します。">
<meta name="keywords" content="レスポンシブ,slick,slick.js,スライダー,jQuery">
<meta name="robots" content="all">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/sample/026/base.css" media="all" />
<link rel="stylesheet" href="/sample/026/font.css" media="all" />
<link rel="stylesheet" href="/sample/026/slick.css">
<link rel="stylesheet" href="/sample/026/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/sample/026/slick.min.js"></script>
<script type="text/javascript">
//単体画像
$(function() {
	$('.single-item').slick();
});
//複数表示(レスポンシブ)
$(function() {
	$('.multiple-item').slick({
		infinite: true,
		dots:true,
		slidesToShow: 6,
		slidesToScroll: 6,
		responsive: [{
			breakpoint: 768,
				settings: {
					slidesToShow: 3,
					slidesToScroll: 3,
			}
		},{
			breakpoint: 480,
				settings: {
					slidesToShow: 2,
					slidesToScroll: 2,
				}
			}
		]
	});
});
//サムネイル付き
$(function() {
	$('.thumb-item').slick({
		infinite: true,
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.thumb-item-nav'
	});
	$('.thumb-item-nav').slick({
		infinite: true,
		slidesToShow: 4,
		slidesToScroll: 1,
		asNavFor: '.thumb-item',
		focusOnSelect: true,
	});
});
</script>

slick Pluginオプション一覧

slick Pluginで実行できるオプション一覧をご紹介します。

オプション一覧
オプション名 初期値 解説
accessibility true キーボードの左右ボタンで画像の切り替えの可否
adaptiveHeight false スライダーの高さを現在のスライドに合わせるか
autoplay true 自動再生の可否
autoplaySpeed 3000 自動再生時のスライドの静止時間
arrows true 前へ、次への矢印ボタンの有無
appendArrows $(element) 矢印ボタンを生成する場所を変更
appendDots $(element) ドットナビゲーションボタンを生成する場所を変更
prevArrow <button type=”button” class=”slick-prev”>Previous</button> 矢印ボタンの「前へ」のHTML
nextArrow <button type=”button” class=”slick-next”>Next</button> 矢印ボタンの「次へ」のHTML
centerMode false 表示スライドを中央寄せにする可否
centerPadding 50px centerModeがtrueの時、前後のスライドの表示幅
cssEase ease スライド切り替え時アニメーション
dots false ドットナビゲーションボタンを表示可否
dotsClass slick-dots ドットナビゲーションボタンのclass名を指定
fade false スライドの切り替えをフェードするか可否
focusOnSelect false クリックしたスライドに切り替えるか
easing linear イージング指定
infinite true スライドの端まできた時にループさせるかの可否
initialSlide 0 最初に表示するスライド指定
lazyLoad ondemand 遅延ロードの設定
mobileFirst false モバイルファーストにするかの可否
pauseOnFocus true スライドをフォーカス時の停止をさせるかの可否
pauseOnHover true スライドにホバーさせると一時停止をさせるかの可否
responsive none レスポンシブのブレイクポイント指定
slide   タグ名設定
slidesPerRow 1 rowsオプションでグリッドモードの数設定
slidesToShow 1 同時に表示される画像の枚数
slidesToScroll 1 移動させる画像の枚数
speed 300 アニメーションの切り替えスピード
swipe true スワイプに対応させるかの可否
swipeToSlide false 表示画像数が少ない場合などにもスワイプ処理を実行するか可否
zIndex 1000 z-indexの値を設定

実装サンプル

実装サンプルを作りましたのでこちらでも確認してみてください。
jQuery slick Plugin デモ

まとめ

slick Pluginのカルーセルスライダーは、スライダープラグインの中でも最も利用されているプラグインです。
細かい設定も実装でき、レスポンシブ・デザインにも対応しているので使いやすいのでおすすめです。