slick - the last carousel you'll ever need.

高機能・高品質なjQueryスライダー［slick］の使い方を紹介します。

このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you'll ever need.（訳：あなたが必要とする最後のカルーセル）」と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの制作者様がオススメし、また実際のウェブサイトでもよく使われています。

公式サイトは以下。

公式サイト：slick

「get it now」というリンクを押した後、「Download Now」をクリックすると配布されているファイル一式をダウンロードすることができます。

ダウンロードしたzipファイルを解凍すると、いくつかのファイルとフォルダが展開されますが、このうち主に必要なのは以下のリストに挙げたファイルになります。

  • slick-theme.css
  • slick.css
  • slick.min.js

他に「fonts」というフォルダにフォントのファイル一式が内包されていますが、これはスライダーをコントロールするナビゲーションの矢印やドットを表示する際に使われます。
デザインを独自にカスタマイズするのであれば不要ですが、デフォルトの状態のまま利用する際はこれらも必要になります。

なおこのフォントファイルはスタイルシートの「slick-theme.css」内で読み込むように設定されています。
以下、詳しい実装方法を紹介します。

［slick］の実装方法

HTMLの記述

まずはHTMLの <head>〜</head> 内で［slick］のファイル一式とjQueryの本体ファイルを読み込みます。

<head>
	<link rel="stylesheet" href="slick.css">
	<link rel="stylesheet" href="slick-theme.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="slick.min.js"></script>
</head>

jQuery本体ファイルは、今回はGoogleのCDNにホストされている最新ヴァージョン「3.6.0」を読み込んでいます。

続いて［slick］を使うスライダー部分ですが、こちらは以下のようなシンプルなコードでOKです。

<ul class="sample">
	<li><img src="images/sample-01.png"></li>
	<li><img src="images/sample-02.png"></li>
	<li><img src="images/sample-03.png"></li>
</ul>

JavaScriptの記述

最後に［slick］を起動させるための初期設定のコードをHTMLの任意の箇所に記述。
基本的にはこれで動くようになります。

<script>
$(function(){
	 $('.sample').slick({
	 	 autoplay:true,
	 	 autoplaySpeed:2000,
	 	 dots:true,
	 	 pauseOnHover:true
	});
}); 
</script>

なお上記の設定では、クラス名「.sample」の箇所に［slick］を効かせ、自動再生を有効化、その自動再生の間隔は2秒に指定、サムネイルのドットを表示、マウスカーソルを充てると自動再生が一時停止、という内容になっています。

［slick］のオプション設定

以下が用意されているすべてのオプションです。

オプション 説明 初期値
accessibility タブと矢印キーのナビゲーションの有効／無効 true
adaptiveHeight スライダーの高さを現在のスライド（.slick-current）に合わせる false
autoplay 自動再生 false
autoplaySpeed 自動再生のスライド切り替えの時間をミリ秒で指定 3000
arrows 左右のナヴィゲーションの矢印を表示 true
asNavFor スライダーを他のスライダーのナビゲーションとして連動させる null（クラス名かID名で指定）
appendArrows スライドの左右のナヴィゲーションの矢印ボタンを挿入する場所を変更する $(element)
appendDots スライドのドットインジケーターを挿入する場所を変更する $(element)
prevArrow 左へ戻る矢印ボタンのHTMLをカスタマイズ <button type="button" class="slick-prev">Previous</button>
nextArrow 右へ進む矢印ボタンのHTMLをカスタマイズ <button type="button" class="slick-next">Next</button>
centerMode スライドを中心に表示して部分的に前後のスライドが見えるように設定、奇数のスライドに適用 false
centerPadding 「centerMode」指定時のサイドのパディング（pxまたは％で指定） 50px
cssEase CSS3アニメーションイージングを指定 ease
customPaging 「dots:true」のときにドットをカスタマイズ n/a
dots ドットインジケーターの表示／非表示 false
dotsClass ドットインジケーターのクラス名を設定 slick-dots
draggable マウス操作でのドラッグを有効にする true
fade スライダーの切り替えをスライドではなくフェイドインにする false
focusOnSelect クリックでのスライド切り替えを有効にする false
easing jQueryアニメーションイージングを指定 linear
edgeFriction 「infinite:false」のときに最初と最後のスライドをスワイプしたときのフリクション値を設定 0.15
infinite スライドのループを有効化 true
infinite スライドのループを有効化 true
initialSlide スライドの開始番号 0
lazyLoad 画像の遅延読み込みを設定（"ondemand"または"progressive"） ondemand
mobileFirst レスポンシブの設定でモバイルの計算を優先させる false
pauseOnFocus 自動再生時にスライドにフォーカスした際、自動再生をストップさせる true
pauseOnHover 自動再生時にスライドにマウスオーバーした際、自動再生をストップさせる true
pauseOnDotsHover 自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせる false
respondTo レスポンシブの基準を設定（"window"、"slider"、"min"） window
responsive breakpointで設定したいブレイクポイントを指定、さらにsettingsでブレイクポイントの範囲内になったとき処理を設定 none
rows スライドの行数を設定、slidesPerRowを使用して各行に含めるスライドの数を設定 1
slide スライドとして使用する要素を設定。 "
slidesPerRow 「rows」が"2"以上で設定されているとき、各行にいくつのスライドを表示するか設定 1
slidesToShow 表示するスライド数を設定 1
slidesToScroll スクロールするスライド数を設定 1
speed スライドまたはフェードアニメーションの速度を設定 300
swipe スワイプを有効にする true
swipeToSlide slidesToScrollの設定に関係なく、スライドをドラッグまたはスワイプした場合は1つずつスライドを動かす false
touchMove タッチでスライドさせる true
touchThreshold スワイプでスライドさせる距離を設定（（1 / touchThreshold）*スライダの幅） 5
useCSS CSS transitionsを有効にする true
useTransform CSS transformsを有効にする true
variableWidth 可変幅のスライドにする false
vertical 垂直スライドモードにする false
verticalSwiping 垂直のスワイプを有効にする false
rtl スライダの方向を右から左に変更する false
waitForAnimate スライドアニメーション中にスライドを前後させる要求を無視する true
zIndex スライドの重なり順 1000

大量の項目が存在しますね。
これだけ揃っていれば充分すぎるでしょう。

ブレイクポイントの使い方

slickのオプション設定でつまづきやすいのがレスポンシブ対応時のブレイクポイントの使い方だと思います。
具体的には、次のように記述します。

$(function() {
$('.slider').slick({
	autoplay: true, // 自動再生を有効化
	slidesToShow: 5,
	responsive: [{
		breakpoint: 900, // 900px以下のとき
		settings: {
			slidesToShow: 3,
		},{
		breakpoint: 620, // 620px以下のとき
		settings: {
			slidesToShow: 1,
		}
	}]
});
});

ここではブレイクポイントを「900px」と「600px」で指定して、「通常時はslidesToShow: 5」で動き、「900px以下のときはslidesToShow: 3」が適用され、「620px以下のときはslidesToShow: 1」が適用される、という挙動になっています。

［slick］のイベント設定

slickのバージョン「1.4」以降からは、コールバック関数にも対応しています。

関数名 処理内容
afterChange スライド後に発生
beforeChange スライド前に発生
breakpoint 設定したブレークポイントの範囲内になったら発生
destroy スライダーを解除（unslick）したときに発生
edge 「infinite:false」のとき最初と最後のスライドをドラッグしたときに発生
init slickの初期化後に発生
reInit slickの再初期化後に発生
setPosition 位置またはサイズの変更後に発生
swipe スワイプまたはドラッグ後に発生
lazyLoaded 画像の遅延読み込み後に発生
lazyLoadError 画像の読み込みが失敗した後に発生

コールバック関数は次のように使います。

$(selector).on('eventname',function(){
    // 行いたい処理
});

以上。
これらを組み合わせて自由自在に設定が可能です。
詳細は公式サイトをご覧ください。

実際に動作するサンプルは以下のリンク先からどうぞ。

［slick］：動作サンプル

株式会社オンズでは、新規のウェブサイト制作だけでなく、こういった便利なプラグインを既存のウェブページに設置するお手伝いも承っています。
比較的安価で高機能なシステムを導入できますので、ご要望のある方はぜひお問い合わせください。

お問い合わせフォームは以下より。

お問い合わせ