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

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

Eazy-T アイコン

Eazy-T

/ 更新:

当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。

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

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

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

『slick』の主な機能と特徴

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

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

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

設置手順を解説

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

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

ページ上部のメニューにある『get it now』をクリックし……
ページ上部のメニューにある『get it now』をクリックし……
※slickオフィシャサイトの場合

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

推移した画面からslick本体をダウンロード
※slickオフィシャサイトの場合
推移した画面からslick本体をダウンロード
※slickオフィシャサイトの場合

ダウンロードした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のドキュメントと併せてご確認ください。

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

オプション名 タイプ 初期値 概要
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’ 画像の遅延表示処理『lazyload』への対応。
img 属性の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だと思います。

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

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

この記事をシェアする

この記事のタイトルとアドレスをコピー

この記事を気に入ったらハートマークで応援してください

この記事の執筆は……

Eazy-T アイコン

Eazy-T

ライター/webデザイナー。 平成元年に姿を現した80年代最後の刺客。柴咲コウの誕生日である8月5日に対して、彼は5月8日生まれ。澁澤龍彦と同じ誕生日で同じ名の母を持つ。西宮のトラビスと称して、モヒカンとM65をトレードマークに徘徊し、コカコーラや筒井康隆の新潮文庫の背表紙といった赤い物を求め彷徨っている。漢検5級。

関連する記事

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『少年マンガ・青年マンガ』の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『少年マンガ・青年マンガ』の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『少女マンガ』の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『少女マンガ』の対象作品一覧

2023年Amazonプライムデー 最大70%OFF Kindle本キャンペーン『絵本・児童書』の対象作品一覧

2023年Amazonプライムデー 最大70%OFF Kindle本キャンペーン『絵本・児童書』の対象作品一覧

2023年Amazonプライムデー 最大70%OFF Kindle本キャンペーン『アート・建築・デザイン』関連の対象作品一覧

2023年Amazonプライムデー 最大70%OFF Kindle本キャンペーン『アート・建築・デザイン』関連の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『早川書房』の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『早川書房』の対象作品一覧

対象『小説・文芸』作品一覧 2023年6月Kindleポイント還元キャンペーン

対象『小説・文芸』作品一覧 2023年6月Kindleポイント還元キャンペーン

対象『ライトノベル』一覧 2023年6月Kindleポイント還元キャンペーン

対象『ライトノベル』一覧 2023年6月Kindleポイント還元キャンペーン

対象『ミステリー・サスペンス・ハードボイルド』作品一覧 2023年6月Kindleポイント還元キャンペーン

対象『ミステリー・サスペンス・ハードボイルド』作品一覧 2023年6月Kindleポイント還元キャンペーン

2023年5月 Kindle本マンガ・ライトノベルセール『ビーグリー』作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『ビーグリー』作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『KADOKAWA ノベル』対象作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『KADOKAWA ノベル』対象作品一覧

Amazon Kindle『翔泳社ゴールデンウイークセール』開催 2023年5月12日(金)まで 対象書籍一覧も掲載

Amazon Kindle『翔泳社ゴールデンウイークセール』開催 2023年5月12日(金)まで 対象書籍一覧も掲載

Amazon Kindle本ゴールデンウイークセール開催 2023年5月12日(金)まで 対象マンガ作品一覧も掲載

Amazon Kindle本ゴールデンウイークセール開催 2023年5月12日(金)まで 対象マンガ作品一覧も掲載


page top