jQueryカルーセルスライダー『slick.js』設置方法と設定オプション一覧

執筆: Eazy-T アイコン Eazy-T

この記事をSNSでシェア

軽快で柔軟なjQueryスライダー『slick』 設置方法とオプション解説

webサイトのトップページなどに多くみられる、画像やコンテンツを左右に切り替える、『スライダー slider』=『カルーセル carousel』機能。

jQueryプラグインとして様々なスライダーが公開・提供されていますが、中でも設定の簡単さとオプションの充実度からお勧めしたいのが今回解説する『slick』です。

今回はその設置手順とサンプルを交えた使い方と各種オプションの詳細をデモを交えて解説していこうと思います。

スポンサーリンク

『slick』の主な機能と特徴

まずはslickの主な機能と特徴をピックアップ。

  • レスポンシブに対応
  • ブレイクポイントごとの設定振り分けが可能
  • タッチデバイスに対応
  • IE8以上のブラウザで完全動作
  • 縦・横カーセルに対応
  • 画像遅延ロード機能
  • MITライセンス

基本的な機能はもちろん、モバイル環境への対応内容などを見ても、中々使い勝手が良いスライダーの香りがしませんか?

設置手順を解説

オフィシャルサイトから一式のダウンロードとデータの展開

それでは、slickの設置方法を解説します。
まずは『slick』のオフィシャルサイトからデータ一式をダウンロードしましょう。

ページ上部のメニューにある『get it now』をクリックします。

slick本体をダウンロード

slick本体をダウンロード

推移したページで、『Download Now』をクリック。ローカルにデータ一式のzipファイルを保存します。

ダウンロードボタン

ダウンロードボタン

ダウンロードしたzipファイルを解凍し、その中に格納されているファイルを使用します。

zipアーカイブ

zipアーカイブ。今回の解説で黄色く表示したファイルを利用します

「slick.css」「slick.min.js」の2つがあれば最低限、slickを動作させることができますが、slick既存の公式テーマを使う場合はさらに「fonts」「ajax-loader.gif」「slick-theme.css」の3つも必要です。

「fonts」の中には、デフォルトの矢印ボタン用のフォントが格納されています。

必要最低限の記述で『slick』スライダーを設置

動作に必要なHTMLの記述は下記の通りです。

まずはhead要素内でjQueryと、slick、slickのcssとテーマcssをhead要素内で読み込みます。
※パスは適宜変更してください

<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/jquery-migrate-1.4.1.min.js"></script>
<script type="text/javascript" src="./js/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./css/slick-theme.css" media="screen" />

続いてスライダー部分のhtmlをbody要素内の任意の場所に記述します。

<div class="slick-box">
	<figure><img src="img/img_slide_01.gif" width="" height="" alt=""/></fgure>
	<fgure><img src="img/img_slide_02.gif" width="" height="" alt=""/></fgure>
	<fgure><img src="img/img_slide_03.gif" width="" height="" alt=""/></fgure>
	<fgure><img src="img/img_slide_04.gif" width="" height="" alt=""/></fgure>
</div>

最後に同じく設定をjQueryで記述。最低限の記述は下記だけでOKです。
※赤く示した箇所のセレクタは前述のhtmlで付与したのクラス(またはID)を指定します。

<script type="text/javascript">
$(function() {
	$('.slick-box').slick(); 
});
</script>

ひとまず、以上で動作します。

PCならマウスポインタで、スマートフォンでご欄の方はスワイプで画像が切り替わるのを確認できます。

シンプルな基本設定で『slick』動作デモはこちら

slickは、jQueryで指定したセレクタと、html側の親要素のclass(またはID)が合致していて、記述に問題がなければ、同要素内の子要素がスライダーになりますのでulとliである事は必須ではありません。 仮導入やデバッグも楽です。

複数画像を表示する『slick』スライダーの例

下記の記述をする事で複数画像を表示するタイプのスライダーとして動作させる事ができます。

<script type="text/javascript">
$(function() {
	$('.slick-box2').slick({
		infinite: true,
		slidesToShow: 3,
		slidesToScroll: 3
	});
});
</script>

slidesToShowオプションは、同時に表示される画像の枚数を設定。slidesToScrollは何枚分の画像を移動させるか、という設定です。

infinitetrueを指定する事で、最後のスライドの次は最初のスライドへ……と、無限ループしてくれます。

複数画像を表示する『slick』のデモはこちら

レスポンシブ対応の『slick』設定

responsiveの中に、breakpointとsettingのオプションを記述します。

breakpointで横幅のブレイクポイントを設定し、さらにsettingsでそのブレイクポイント以下の幅で表示させる枚数などの設定をします。複数のブレイクポイントを設けるときは幅の大きい方から記述します。

具体的にはこのような感じです。幾つかの他のオプションも追加しています。

<script type="text/javascript">
$(function() {
	$('.slick-box3').slick({
		dots: true, // スライダー下部に表示される、ドット状のページネーションです
		infinite: true, // 無限ループ
		speed: 300, // 切り替わりのスピード
		slidesToShow: 4, //通常 1024px以上の領域では4画像表示
		slidesToScroll: 4, 
		responsive: [{
			breakpoint: 1024,settings: { //601px~1024pxでは3画像表示
				slidesToShow: 3,
				slidesToScroll: 3,
			}
		},
		{
			breakpoint: 600,settings: { //481px~600pxでは2画像表示
				slidesToShow: 2,
				slidesToScroll: 2
			}
		},
		{
			breakpoint: 480,settings: {//480px以下では1画像表示
				slidesToShow: 1,
				slidesToScroll: 1
			}
		}]
	});
});
</script>

レスポンシブ対応の『slick』デモはこちら

『slick』のセンターモード

centerModeオプションをtrueに設定するとセンターモードになります。

更にcenterPaddingを設定する事で表示されているスライドの前後の要素が一部はみ出ているような形で表示されます。記述例は以下のような形です。

<script type="text/javascript">
$(function() {
	$('.slick-box4').slick({
		centerMode: true, //センターモード
		centerPadding: '60px', //前後のパディング
		autoplay: true, //オートプレイ
		autoplaySpeed: 2000, //オートプレイの切り替わり時間
		slidesToShow: 3, 
		responsive: [{
			breakpoint: 768,
			settings: {
				arrows: false, // 前後の矢印非表示
				centerMode: true,
				centerPadding: '40px',
				slidesToShow: 3
			}
		},
		{
			breakpoint: 480,
			settings: {
				arrows: false,
				centerMode: true,
				centerPadding: '40px',
				slidesToShow: 1
			}
		}]
	});
});
</script>

センターモード対応『slick』のデモはこちら

その他 設定可能オプションの一覧

デモを見ていただくと分かるように、特殊な独自カスタマイズをせずとも、痒い所に手が届くカスタマイズが可能な『slick』。如何でしょうか。

以下に、公式オプションの一覧を掲載いたしますのでgithubのドキュメントと併せてご確認ください。

豊富なオプションに加え、テーマやスタイルシートもカスタマイズする事で更に表現方法は広がります。ぜひ色々お試しください。

オプション名 タイプ 初期値 概要
accessibility trueまたはfalse true キーボードの左右ボタンで画像の切り替えを可能にするか否か
adaptiveHeight trueまたはfalse false スライダーの高さを現在のスライドに合わせる
autoplay trueまたはfalse true 自動再生するか否か
autoplaySpeed 数値(ミリ秒) 3000 自動再生時の移動までの時間
arrows trueまたはfalse true スライダーの左右に「進む」「戻る」ボタンをつけるか否か
asNavFor 文字列 null ページ内の他のスライドと連携動作させたいとき、そのclassを記載
appendArrows 文字列 $(element)  矢印ボタンの生成位置を変更
(Selector, htmlString, Array, Element, jQuery object)
prevArrow 文字列
(html|jQuery selector)
object (DOM node|jQuery object)
<button type=”button” class=”slick-prev”>Previous</button> 「戻る」ボタンのhtmlを指定
nextArrow 文字列
(html|jQuery selector)
object (DOM node|jQuery object)
<button type=”button” class=”slick-next”>Next</button> 「進む」ボタンのhtmlを指定
centerMode trueまたはfalse false 表示スライドを中央寄せにするか否か
centerPadding 文字列 ’50px’  センターモードのpaddinfを指定。px又は%
cssEase ‘ease’
‘linear’
‘ease-in’
‘ease-out’
‘ease-in-out’
‘ease’ スライド切り替え時のアニメーション
customPaging function n/a デフォルトでドット状のページ送りを、サムネイルなどに変更

例)
customPaging : function(slick-box, i) {
var thumb = $(slick-box.$slides[i]).data(‘thumb’);
return ‘<a><img src=”‘+thumb+'”></a>’;
},

dots trueまたはfalse false スライダーの下のページ送りを表示するか否か
dotsClass 文字列 ‘slick-dots’ スライダーの下のページ送りのclass名指定
draggable trueまたはfalse true ドラッグが可能か否か
fade trueまたはfalse false スライド切り替え時はフェード処理するか否か
focusOnSelect trueまたはfalse false
easing 文字列 ‘linear’ イージングを指定
edgeFriction integer 0.15 無限スライドしない場合に端のスライドから更に進もうとした場合のバウンド処理の動作秒数
infinite trueまたはfalse true 最後のスライドの次に最初のスライドを表示し、無限にスライドできるようにするか否か
initialSlide integer 0 最初のスライダーの位置
lazyLoad ‘ondemand’または’progressive’ ‘ondemand’ 画像の遅延表示処理。
img 属性のsrcの代わりにdata-lazyで画像アドレスを指定する事で動作。
スライドした領域が表示されるタイミングで読み込みを開始する。
例)
<img datalazy=“img/lazyfonz1.png”/>
progressiveを指定すると初期画面の描画後、スライドした画像が表示される事前に読み込む処理が行われる。
mobileFirst trueまたはfalse false responsive オプション設定時にモバイル設定を初期値にする
pauseOnFocus trueまたはfalse true 自動再生時、スライドダーにフォーカスしている時一時停止するか否か
pauseOnHover trueまたはfalse true 自動再生時、スライダーにマウスオンで一時停止するか否か
pauseOnDotsHover trueまたはfalse false 自動再生時、ドット状のページ送りにマウスオンで一時停止するか否か
respondTo ‘window’、’slider’または’min’ ‘window’ responsive 設定時のwidth測定をどこに設定するか。より狭い方が優先。
responsive object none レスポンシブの設定を記述
rows int 1 1以上に設定するとグリッドモードが初期化される。
別途 slidesPerRow オプションを使用して、各行に含めるスライドの数を設定
slide element
slidesPerRow 数値 1 rows オプションでグリッドモードを初期化した際に有効。各グリッド行にいくつのスライドがあるかを設定

例)
rows: 2,
slidesPerRow: 2
として、4つ以上のスライドが有れば、縦に2つづつ切り替わるのスライダーに

slidesToShow 数値 1 同時に表示される画像の枚数を設定
slidesToScroll 数値 1 何枚分の画像を移動させるかの設定
speed 数値(ミリ秒) 300 スライド切り替え時の時間を指定
swipe trueまたはfalse true スワイプに対応するか否か
swipeToSlide trueまたはfalse false 表示画像数が少ない場合などにもスワイプ処理を実行するか否か
touchMove trueまたはfalse true タッチムーブ機能を有効にするか否か
touchThreshold 数値 5 スライダーのスライド処理に対して 1/この値 分の距離操作すると、前後に切り替わる?(調査中)
useCSS trueまたはfalse true 切り替わり処理などでCSS Transitionsを有効にするか否か
useTransform trueまたはfalse true 切り替わり処理などでCSS Transformsを有効にするか否か
variableWidth trueまたはfalse false スライド毎の横幅を可変にするか否か。
※違うサイズの画像が含まれるスライダーを実装したい時はtrueに
vertical trueまたはfalse false 縦にスライドするか否か
verticalSwiping trueまたはfalse false 縦方向のスワイプに対応するか否か
rtl trueまたはfalse false Right to Left 通常htmlの記述順で左から右へと表示されるが、右から左へと変更する。
※スライドさせる箇所の親要素にdir=”rtl“を記述する必要が。
例)
<ul class=”slick-boxdir=”rtl>

※その他注意事項など

まとめ ライセンスについて

如何でしたでしょうか。

これまで同様の機能では『bxSlider』などを使う事が多く重宝していたのですが一部の環境挙動が不安定だったり、カスタマイズの手間がかかる事もありました。その点、後発の『slick』は様々な環境での利用を想定して作られていて、今のところ設置利用で手間取った事はありません。

ライセンスはMITライセンス、費用に関しては商用利用でも無料ですので、その点も安心です。
特殊な環境やアニメーションなどのカスタマイズもオプションの組み合わせで可能なSlickは現時点でもっともバランスのいいSliderだと思います。

設置に関してや、オプション関連でご不明な点があれば、当ページコメント欄でもお気軽にご相談ください。

スポンサーリンク
記載内容につきまして

掲載記事に関しまして

当サイトの掲載記事は、UZUREA.NETスタッフやパートナーライターの主観によって執筆しています。内容については、実際の事象やスペック、用途と異なる場合がございます。
また記載する製品やサービスの内容が正式スペックや保証範囲の適用外となる場合もありますので、あらかじめご了承ください。

この記事をSNSでシェア