高機能・高品質な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］：動作サンプル
株式会社オンズでは、新規のウェブサイト制作だけでなく、こういった便利なプラグインを既存のウェブページに設置するお手伝いも承っています。
比較的安価で高機能なシステムを導入できますので、ご要望のある方はぜひお問い合わせください。
お問い合わせフォームは以下より。
