今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。
目次
初見の感想は「反応速度が早く軽量でサクサク動く」という印象。
レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。
機能が豊富で、ざっと紹介すると以下のとおり。
- レスポンシブ対応
- フルスクリーン化OK
- ページネーション設置
- 縦方向のスライド
- カルーセル・モード
- 各スライドの位置を固定しない「フリーモード」対応
- 複数行のスライドに対応
- 縦方向・横方向の「入れ子」に対応
- マウスのドラッグ操作に対応
- スクロールバー表示
- ナビゲーションボタン表示
- 無限ループ対応
- フェードイン・フェードアウトによるスライドの切り替え
- 3D キューブ・エフェクト
- 3D カバーフロー・エフェクト
- キーボード・コントロール
- マウスホイールによる操作可能
- 自動再生
- サムネイル表示
- パララックス効果導入
- スライド画像の遅延読み込み（Lazy Load）対応
オプション設定でこれだけの機能が使えるようになります。
……圧倒的な量ですよね。
まずは実際に［Swiper］を導入したサンプルページをご覧ください。
Swiper：実装サンプル
こちらのサンプルではフルスクリーン化し、パララックス効果を追加してみました。
よくある画像ベースのスライダーではなく、『コンテンツ・スライダー』という位置付けなので、テキストはもちろん、画像でも動画でも何でも組み込むことが可能です。
導入方法は以下より。
Swiper の実装方法
最初に公式サイトから必要なファイル一式をダウンロードしてきます。
ヘッダー部分にある「Download」をクリックするとスグにダウンロードがはじまります。
ダウンロードしたファイルのうち、主に利用するのは以下の２つ。
- swiper.js
- swiper.css
上記それぞれのファイルを圧縮した「swiper.min.js」と「swiper.min.css」というファイルも梱包されています。
データ容量を小さくしたければコチラの圧縮されたファイルを使いましょう。
これらのファイルをHTMLの任意の箇所で読み込むようにします。
<link rel="stylesheet" href="swiper.min.css"> <script src="swiper.min.js"></script>
嬉しいことにjQueryに依存しないので「swiper.js」を読み込むだけでスクリプトが動きます。
スライド・コンテンツ部分の作成
次に［Swiper］でスライドショーにするコンテンツ部分を作り込んでいきます。
基本的なhtmlコードは以下のとおり。
<div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <!-- Slide-01 コンテンツを挿入する --> </div> <li class="swiper-slide"> <!-- Slide-02 コンテンツを挿入する --> </li> <li class="swiper-slide"> <!-- Slide-03 コンテンツを挿入する --> </li> </ul> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-scrollbar"></div> </div>
スライダー部分全体を<div class="swiper-container"> 〜 </div>で囲い、その中にclass="swiper-wrapper"と名付けたボックス要素を設置。
各スライド部分にはclass="swiper-slide"を記述します。
同様に、ページネーションはclass="swiper-pagination"を。
前後にスライドさせるボタンはclass="swiper-button-prev"とclass="swiper-button-next"を。
スクロールバーはclass="swiper-scrollbar"を、それぞれ記述することで表示されるようになります。
初期化
次に、ページがロードされたときに［Swiper］を実行するための初期化の処理を記述します。
基本の書式は以下。
<script>
var swiper = new Swiper('.swiper-container');
</script>
任意のclassまたはidを名付けた要素に聞かせたい場合は .swiper-container の箇所を書き換えます。
ちなみに先に紹介したサンプルでは次のようにオプションを指定しています。
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
parallax: true,
speed: 600,
});
</script>
基本的にはここまでの設定で動くようになります。
オプション設定一覧
［Swiper］では考え得る限りのあらゆる設定を細かく指定することができます。
……あまりにも数が多すぎるので、公式サイトの［API］を直接読んでしまったほうが早いかもしれません。
Swiper：API
メインのオプション
| パラメータ | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| direction | string | horizontal | スライド方向を「horizontal（横）」または「vertical（縦）」にする。 |
| speed | number | 300 | スライドアニメーション間隔の秒数（ミリ秒）を指定。 |
| effect | string | ‘slide’ | スライドのエフェクトを設定。 「’slide’」「’fade’」「’coverflow’」「’flip’」が選択可能。 |
| spaceBetween | number | 0 | スライドとスライドの余白（px指定）を設定。 |
| slidesPerView | number もしくは ‘auto’ | 1 | 一度に表示するスライドの数。 ※「auto」の場合、loopするにはloopedSlidesを設定する必要がある。 |
| initialSlide | number | 0 | 初期表示されるスライドのインデックスを指定。0からカウントスタートする。 |
| loop | boolean | false | スライドをループさせる。 |
| breakpoints | object | なし | レスポンシブ対応のパラメータを設定できる。 |
フリーモードとスクロールコンテナ関連
| パラメータ | タイプ | デフォルト値 | 解説 |
|---|---|---|---|
| freeMode | boolean | false | 各スライドの位置を固定しないでフリーにするかしないか。 |
| freeModeFluid | boolean | false | スライドからカーソル、タッチを離して もしばらくイージングするかしないか。 |
| scrollContainer | boolean | false | trueをセットすると、スクロールエリア みたいな感じで使える。 |
| momentumRatio | number | 1 | タッチを離した後の跳ね返り値。 |
| momentumBounce | boolean | true | falseで跳ね返り禁止。 |
| momentumBounceRatio | number | 1 | 跳ね返り効果の値。 |
スライドのオフセット関連
| パラメータ | タイプ | デフォルト値 | 解説 |
|---|---|---|---|
| centeredSlides | boolean | false | アクティブなスライドが必ず真ん中にくるようにする。 |
| offsetPxBefore | number | 0 | 一番最初のスライドをオフセット(引っ込めるとか)したいときに、左の境界線からの数値（pxで指定）を入れる。 |
| offsetPxAfter | number | 0 | 右側のスライドをオフセットしたいときに、右の境界線からの数値（pxで指定）を設定。 |
| offsetSlidesBefore | number | 0 | 左端から何枚目までずらしてスタートさせるか。 |
| offsetSlidesAfter | number | 0 | 右端から何枚目までずらしてスタートさせるか。 |
タッチ、マウスの操作関連
| パラメータ | タイプ | デフォルト値 | 解説 |
|---|---|---|---|
| touchRatio | number | 1 | しきい値。どのくらいスワイプしたら次のスライドに行くかを設定できる。数字が大きければ少しのスワイプで次に行く。 |
| simulateTouch | boolean | true | trueのとき、タッチと同じような動作をマウスでも受け付ける。クリックやドラッグでスライドを動かせる。 |
| onlyExternal | boolean | false | trueにすると、API機能からしか操作できなくなる。 |
| followFinger | boolean | true | falseのとき、タッチを離したときにスライドが動く。ホールドしている間はアニメーションさせないようにできる。 |
| grabCursor | boolean | false | trueにしたとき、マウスオンしたときにカーソルが「掴む」マークになる。 |
| shortSwipes | boolean | true | 短いスワイプをさせたくないときにfalseを設定。 |
| moveStartThreshold | number | false | Threshold（しきい値）をピクセル単位での調整ができる。スワイプを動かすのに、どれくらいのスワイプ動作を必要とさせるか、という値。”touch distance”がこの値より低いと動かない。 |
ナビゲーション
| パラメータ | タイプ | デフォルト値 | 解説 |
|---|---|---|---|
| keyboardControl | boolean | false | キーボードのカーソルキー（矢印）で操作できるようにする。 |
| mousewheelControl | boolean | false | マウスホイールでスライドを操作せきるようにする。 |
ページネーション
| パラメータ | タイプ | デフォルト値 | 解説 |
|---|---|---|---|
| pagination | string or HTML Element | ページネーションのセレクター名を設定できる。例では「my-pagination」というクラスをページネーションタグに当てられる。もしくはHTML要素を指定してもいい。 | |
| paginationClickable | boolean | false | ページネーションボタンをクリックでスライド操作できるようにする。 |
| paginationAsRange | boolean | true | trueのとき、ページネーションボタンが表示スライドと連動するように、Classが付与される。 |
| createPagination | boolean | true | trueのとき、ページネーションを作成。 |
ネームスペース
| パラメータ | タイプ | デフォルト値 | 解説 |
|---|---|---|---|
| wrapperClass | string | ‘swiper-wrapper’ | スワイパーを包んでいる大外のタグのクラスを指定できる。デフォルトは ‘swiper-wrapper’。 |
| slideClass | string | ‘swiper-slide’ | 各スライドのクラスを指定できる。 |
| slideActiveClass | string | ‘swiper-slide-active’ | アクティブ中スライドのクラスを指定できる。 |
| slideVisibleClass | string | ‘swiper-slide-visible’ | 表示中のスライドのクラスを指定できる。 |
| slideElement | string | ‘div’ | スライドのタグはデフォルトでdivを使用しているが、変更も可能。 |
| noSwipingClass | string | ‘swiper-no-swiping’ | noSwipingがtrue前提。ここで指定したクラス名を持ったスライドはスワイプの操作が効かなくなる。 |
| paginationElement | string | ‘span’ | ページネーションのボタンのタグはデフォルトでspanを使用しているが、変更も可能。 |
| paginationElementClass | string | ‘swiper-pagination-switch’ | ページネーションスウィッチのクラス変更が可能。 |
| paginationActiveClass | string | ‘swiper-active-switch’ | ページネーションのアクティブボタンのクラス変更が可能。 |
| paginationVisibleClass | string | ‘swiper-visible-switch’ | ページネーションの表示中ボタンのクラス変更が可能。 |
コールバック関数
| パラメータ | タイプ | デフォルト値 | 解説 |
|---|---|---|---|
| queueStartCallbacks | boolean | FALSE | “true”で、”slideChangeStart”を加える。”slideChangeStart”は、multiple swipes/transitionsをしているときに発生するコールバック。 |
| queueEndCallbacks | boolean | FALSE | “true”で、”slideChangeEnd”を加える。”slideChangeStart”は、multiple swipes/transitionsの直後に発生するコールバック。 |
| onFirstInit | function | – | 最初の初期化の直後に発生するコールバック。functionを書き込むことで実行。 |
| onInit | function | – | すべての初期化、再初期化の直後に発生するコールバック。functionを書き込むことで実行。 |
| onTouchStart | function | – | タッチしたら発生するコールバック。functionを書き込むことで実行。 |
| onTouchMove | function | – | タッチが動いたら発生するコールバック。functionを書き込むことで実行。 |
| onTouchEnd | function | – | タッチを離したら発生するコールバック。functionを書き込むことで実行。 |
| onSlideReset | function | – | タッチを離してカレントアクティブスライドがリセットされたら発生するコールバック。functionを書き込むことで実行。フリーモード（freeMode）では無効。 |
| onSlideChangeStart | function | – | 前後へのスライドが始まったら発生するコールバック。functionを書き込むことで実行。フリーモード（freeMode）では無効。 |
| onSlideChangeEnd | function | – | 前後へのスライドが終わったら発生するコールバック。functionを書き込むことで実行。フリーモード（freeMode）では無効。 |
| onSlideClick | function | – | スライド上でクリックされたら発生するコールバック。functionを書き込むことで実行。 |
| onSlideTouch | function | – | スライド上でタッチした直後に発生する コールバック。functionを書き込むこと で実行。onTouchStartとほとんど同じだが、.clickedSlideと.clikedSlideIndexの値を返す。 |
| onImagesReady | function | – | 関わるすべての画像がロードされたら発生するコールバック。functionを書き込むことで実行。”updateOnImagesReady”もtrueとするべき。 |
| onMomentumBounce | function | – | 跳ね返りしたら発生するコールバック。functionを書き込むことで実行。 |
| onResistanceBefore | function | – | 跳ね返りしている間に発生するコールバック。functionを書き込むことで実行。跳ね返った距離の返り値を得られる。 |
| onResistanceAfter | function | – | 跳ね返りした後に発生するコールバック。functionを書き込むことで実行。跳ね返った距離の返り値を得られる。 |
未翻訳・未検証の部分もありますが、これでほぼすべての設定項目を網羅しています。膨大な量ですが、これでいくらでも好きなようにカスタマイズできますね！
コンテンツ・スライダー［Swiper］のダウンロードは以下よりどうぞ。
