【jQuery】高機能で実装も簡単なスライダー-slick.jsの使い方-再生・停止ボタンも付けてみました
使いやすいスライダー(カルーセル)のjQueryプラグイン、Slick.jsの使い方。
フリックで操作、自動再生、フェード切り替えなどなど、簡単に実装できる上に、オプションの設定だけでいろんな機能をつけられます。
すごく簡単に実装できて、高機能です。
目次
- ダウンロード
- 読み込み
- HTMLの記述
- jQueryの記述
- オプション
- 使用例1:左右の画像チラ見せ&中央の画像だけ大きく
- 使用例2:メインスライダーとサムネイルの連動
- 使用例3:再生・停止ボタンもつけてみた
- バグ関連報告記事
- 類似プラグインの紹介
以下、使い方です。
ダウンロード
公式サイトからダウンロードできます。
slick.js
ロゴの下にあるメニューの一番右にある「get it now」をクリックすると、ダウンロードボタンまでスクロールします。
ちょうどスクロールした少し下にCDNも用意されていますので、ファイルをダウンロードするかCDNか好きな方を選んでください。
今回はダウンロードする方法で進めます。
読み込み
ダウンロードしたファイルの「slick」フォルダを開きます。
その中にある「slick.min.js」と「slick.css」を読み込みます。
<link rel="stylesheet" href="slick.css"> <script src="slick.min.js"></script>
最低限これで動きますが、左右のボタンがbuttonタグのデフォルトのままです。
CSSでカスタマイズするなら大丈夫ですが、サクッと使いたい場合はさらに「slick-theme.css」を読み込みます。
あと、fontsフォルダ内も読み込むと矢印の画像とかページ送りのドットが表示されるみたいですが、本番環境でうまくいかなかったので省略します。
HTML
HTMLはスライドさせたい要素を囲むタグにclassやidなどを付けておきます。
<div class="slider"> <div><img src="../images/IMG1.jpg" alt=""></div> <div><img src="../images/IMG2.jpg" alt=""></div> <div><img src="../images/IMG3.jpg" alt=""></div> <div><img src="../images/IMG4.jpg" alt=""></div> <div><img src="../images/IMG5.jpg" alt=""></div> <div><img src="../images/IMG6.jpg" alt=""></div> </div>
ここですが、画像をスライドさせたい場合は必ずそれぞれdivタグなどで囲ってください。
slider直下のタグには.slick-slideというclassが自動で付与され、cssでmin-height:1pxが当てられています。
.slide直下にいきなりimgタグをもってきてしまうと、画像の高さが1pxで表示されてしまいます。
とはいえ、これだけです。すごく簡単。
CSSはカスタマイズする以外は、必須のものはありません。
jQuery
jQueryもすごく簡単。
以下を記述します。
$('.slider').slick();
これでとりあえず動きます。
オプション
オプションはこれでもかというぐらい用意されています。
$('.slider').slick({ // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか accessibility: true, // 自動再生。trueで自動再生される。 autoplay: false, // 自動再生で切り替えをする時間 autoplaySpeed: 3000, // 自動再生や左右の矢印でスライドするスピード speed: 400, // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか pauseOnHover: true, // 自動再生時にドットにマウスオンで一時停止するかどうか pauseOnDotsHover: true, // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out cssEase: 'ease', // 画像下のドット(ページ送り)を表示 dots: false, // ドットのclass名をつける dotsClass: 'dot-class', // ドラッグができるかどうか draggable: true, // 切り替え時のフェードイン設定。trueでon fade: false, // 左右の次へ、前へボタンを表示するかどうか arrows: true, // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。 infinite: true, // 最初のスライダーの位置 initialSlide: 0, // 画像の遅延表示。‘ondemand’or'progressive' lazyLoad: ‘ondemand’, // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。 pauseOnHover: true // スライドのエリアに画像がいくつ表示されるかを指定 slidesToShow: 4, // 一度にスライドする数 slidesToScroll: 1, // タッチスワイプに対応するかどうか swipe: true, // 縦方向へのスライド vertical: false, // 表示中の画像を中央へ centerMode: true, // 中央のpadding centerPadding: '60px' });
よく使いそうなものをピックアップしてみました。
GitHubには他のオプションも公開されています。
GitHub
使用例1:左右の画像チラ見せ&中央の画像だけ大きく
デモの4つ目です。
左右チラ見せはFacebookなどのアプリでよく見られると思います。
チラ見せすることで矢印などを用いなくても、
左右にコンテンツがあることをユーザーに知ってもらうことができます。
また、ちょっとひと工夫で中央の画像だけ大きくし目立つようにしてみました。
jQueryのオプションの記述はこちら
$('.pattern4').slick({ centerMode: true, centerPadding: '160px' });
中央寄せはcenterMode、そしてcenterPaddingを指定することで、
左右の画像と余白をつけることができます。
centerPaddingを調整することで、左右チラ見せを実現できます。
真ん中だけ大きくするには?
中央の画像にはclass=”slick-center”が付与されます。
このclassを拡大すればいいのですが、ここで詰まりました。
jQueryで直接タグに可変の幅指定されてるので、cssのwidthやheightでは上書いて拡大できません。
そこでtransform:scaleを使って拡大させようとしましたが、
スライダーのエリアを超えて崩れてしまいました。。。
最終的には発想を変えて中央以外を小さくするということで落ち着きました。
.pattern4 .slick-slide { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; } .pattern4 .slick-slide:not(.slick-center) { -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); }
さらにtransitionを使うことで滑らかに拡大・縮小してくれます。
使用例2:メインスライダーとサムネイルの連動
メインのスライダーとサムネイル画像の連動もできます。
メインスライダー用のスライダーとサムネイル用のスライダーの2つを用意し
そして、それぞれにslick.jsのオプションを設定します。
【メインの方】
$('.pattern5-1').slick({ arrows: false, centerMode: true, centerPadding: '20%', asNavFor: '.pattern5-2' });
【サムネイルの方】
$('.pattern5-2').slick({ slidesToShow: 6, arrows: false, asNavFor: '.pattern5-1', focusOnSelect: true });
asNavForでそれぞれのclassやidを指定しておき、
サムネイルの方にはオプションのfocusOnSelectをtrueにしておきます。
こうするとサムネイルをクリックするとメインのスライダーも切り替わるようになります。
使用例3:再生・停止ボタンもつけてみた
スライダーを実装していると、再生・停止ボタンが必要な時もあると思います。
Slick.jsにはオプションで再生・停止ボタンは用意されていませんが、メソッドを追加することで対応できます。
以下の記述が再生と停止それぞれのメソッドです。
// 停止 $('.pattern3').slick('slickPause'); // 再生 $('.pattern3').slick('slickPlay');
これらを条件文など使って、ボタンのON/OFFで再生・停止を切り替えることができます。
以下サンプルです。
// 再生停止ボタンを準備(HTMLに直接追加でもいいです) var stopBtn = $('<button id="tglBtn"><span id="startBtn">再生</span><span id="stopBtn">停止</span></button>'); // ページ送りの前に追加(あってもなくてもいいです) stopBtn.prependTo('.pattern3 .slick-dots'); // デフォルトは再生ボタンを非表示に $('#startBtn').hide(); // 切り替えフラグを準備 var flg = "play"; // ボタンをクリックした時の処理 $('#tglBtn').click(function(){ // toggleでフラグを切り替え $('#startBtn').toggle(); // フラグの条件でボタンの切り替えと再生・停止の処理 if(flg == "play") { $('#startBtn').show(); $('#stopBtn').hide(); flg = "stop"; $('.pattern3').slick('slickPause'); } else { $('#startBtn').hide(); $('#stopBtn').show(); flg = "play"; $('.pattern3').slick('slickPlay'); } });
上記例はボタンをJavaScriptで準備しています。
ページ送りの並びに再生・停止ボタンを追加したい場合、Slick.jsはJavaScriptでページ送りを追加するため、最初の行の記述が必要です。
再生ボタンの場所が特にページ送りの並びになくてもいい場合は、HTMLに直接ボタンを設置してもいいと思います。
ただ、自動再生ボタンに問題が!!
Slick.jsの自動再生ボタンですが、ちょっと変なとこがありました。
自動再生を停止して、ブラウザで開いている別のタブを選択して、
再度戻ってくると、停止していたはずのスライダーが再生します。。。
どんな挙動かはデモサイトに自動再生ボタン付きのを用意してるので試してみてください。
しかも、ボタンの切り替えはしていないので、「再生ボタン」が出たまま再生しています。
本来、動画が再生しているときは、「停止ボタン」が出ていないとだめなのに。
別のタブに移動して戻ってきたときに再生するって謎すぎです。。
スライダーが再生してしまうのは仕方ないとして、
整合性をとるために、Page Visibility APIを使いました。
Page Visibilityはページが見えているかどうかを判定してくれます。
詳しくは以下の記事で。
Page Visibilityで別タブから戻ってきてページが見えたときに、
「再生ボタン」を「停止ボタン」に切り替えて、整合性をとりました。
記述はこちら
document.addEventListener("visibilitychange", handler); function handler() { if (document.visibilityState == "visible") { $('#startBtn').hide(); $('#stopBtn').show(); flg = "play"; } }
っていうか、これ使ったら、
ページが見えたときにスライダーを停止させちゃえばよかったのかな?
また、試してみます。
バグ関連報告記事
こんな不具合あったよというブログなどがあれば追加してきます。
- Androidでslick.jsのスライダーがスクロールできない
類似プラグインの紹介
以前当ブログで、「Flickity」というjQueryプラグインを紹介しました。
機能的にも実装の簡単さでもかなり似ているプラグインです。
FlickityもSlick.jsと同様簡単にスライダーを実装できます。
サクッと高機能なスライダーを実装するなら、slick.jsかFlickityですかね。
ただ、ライセンスはSlick.jsがMITに対し、FlickityはオープンソースライセンスがGPLなので、
Slick.jsの方が使いやすいかも。