Webデザイナーブログから学ぶホームページ制作

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

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

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

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

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

<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>

.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;
}

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

<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>

「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で実行できるオプション一覧をご紹介します。

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

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