jQueryスライダー『slick.js』 設置方法解説と設定オプション一覧 | uzurea.net

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

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

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

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=""/></figure>
	<figure><img src="img/img_slide_02.gif" width="" height="" alt=""/></figure>
	<figure><img src="img/img_slide_03.gif" width="" height="" alt=""/></figure>
	<figure><img src="img/img_slide_04.gif" width="" height="" alt=""/></figure>
</div>

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

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

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

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

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』設定

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』のセンターモード

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』。如何でしょうか。

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

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

オプション名タイプ初期値概要
accessibilitytrueまたはfalsetrueキーボードの左右ボタンで画像の切り替えを可能にするか否か
adaptiveHeighttrueまたはfalsefalseスライダーの高さを現在のスライドに合わせる
autoplaytrueまたはfalsetrue自動再生するか否か
autoplaySpeed数値(ミリ秒)3000自動再生時の移動までの時間
arrowstrueまたはfalsetrueスライダーの左右に「進む」「戻る」ボタンをつけるか否か
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を指定
centerModetrueまたはfalsefalse表示スライドを中央寄せにするか否か
centerPadding文字列’50px’ センターモードのpaddinfを指定。px又は%
cssEase‘ease’
‘linear’
‘ease-in’
‘ease-out’
‘ease-in-out’
‘ease’スライド切り替え時のアニメーション
customPagingfunctionn/aデフォルトでドット状のページ送りを、サムネイルなどに変更

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

dotstrueまたはfalsefalseスライダーの下のページ送りを表示するか否か
dotsClass文字列‘slick-dots’スライダーの下のページ送りのclass名指定
draggabletrueまたはfalsetrueドラッグが可能か否か
fadetrueまたはfalsefalseスライド切り替え時はフェード処理するか否か
focusOnSelecttrueまたはfalsefalse
easing文字列‘linear’イージングを指定
edgeFrictioninteger0.15無限スライドしない場合に端のスライドからさらに進もうとした場合のバウンド処理の動作秒数
infinitetrueまたはfalsetrue最後のスライドの次に最初のスライドを表示し、無限にスライドできるようにするか否か
initialSlideinteger0最初のスライダーの位置
lazyLoad‘ondemand’または’progressive’‘ondemand’画像の遅延表示処理『lazyload』への対応。
img 属性のdata-lazyで画像アドレスを指定。
スライドした領域が表示されるタイミングで読み込みを開始する。
例)
<img datalazy=“img/lazyfonz1.png”/>
progressiveを指定すると初期画面の描画後、スライドした画像が表示される事前に読み込む処理が行われる。
mobileFirsttrueまたはfalsefalseresponsive オプション設定時にモバイル設定を初期値にする
pauseOnFocustrueまたはfalsetrue自動再生時、スライドダーにフォーカスしている時一時停止するか否か
pauseOnHovertrueまたはfalsetrue自動再生時、スライダーにマウスオンで一時停止するか否か
pauseOnDotsHovertrueまたはfalsefalse自動再生時、ドット状のページ送りにマウスオンで一時停止するか否か
respondTo‘window’、’slider’または’min’‘window’responsive 設定時のwidth測定をどこに設定するか。より狭い方が優先。
responsiveobjectnoneレスポンシブの設定を記述
rowsint11以上に設定するとグリッドモードが初期化される。
別途 slidesPerRow オプションを使用して、各行に含めるスライドの数を設定
slideelement
slidesPerRow数値1rows オプションでグリッドモードを初期化した際に有効。各グリッド行にいくつのスライドがあるかを設定

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

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

※その他注意事項など

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

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

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

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

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

この記事が気に入ったら『いいね!』または『フォロー』で最新情報をチェック

スポンサーリンク
スポンサーリンク