レスポンシブにも対応していて、スマホなどのタッチデバイスによるスワイプ操作にも対応したコンテンツスライダーです。
触ってみたらなかなか良い感じだったのですが、日本語の情報が少なかったのでメモ。
Swiperの主な特徴
- レスポンシブ
- 横スライドだけじゃなくて縦スライドにも対応
- フリーモード（自分で動かした分だけしかスライドしなくなる）
- カルーセルモード
- jQueryなしで単体動作させることもできる（jQueryで発火させることも出来る）
- コンテンツスライダーなので画像だけじゃなくてなんでも詰め込める
などでしょうか？
他にもたくさんありますので、公式サイトのFeaturesを読んでみて下さい。
インストール方法
公式サイトの下の方にあるリンクからGithubに飛んでDownload ZIPというリンクからダウンロードします。
解凍したファイルの中で必要なのは、
- idangerous.swiper-2.0.min.js
- idangerous.swiper.css
なので、この２つを設置したいサイトに読み込ませます。
たとえばこんな感じ。
|
1 2 |
<script type="text/javascript" src="lib/idangerous.swiper-2.0.min.js"></script> <link href="lib/idangerous.swiper.css" rel="stylesheet" type="text/css" /> |
※バージョンは記事作成時のものです。バージョンによってファイル名が異なる可能性があります。
使い方
簡単に使い方をメモ。
はじめにスライドの中身を作成します。
|
1 2 3 4 5 6 7 8 |
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img alt="" src="img/kv1.png" /></div> <div class="swiper-slide"><img alt="" src="img/kv2.png" /></div> <div class="swiper-slide"><img alt="" src="img/kv3.png" /></div> </div> <div class="pagination"> </div> </div> |
ポイントは、
- スライダー全体を囲う要素に「swiper-container」というクラスを与える
- swiper-container のなかに、更に「swiper-wrapper」というクラスを持つDIVを作る
- そして更にそのなかに「swiper-slide」というクラスのDIVを作る。
- swiper-slideクラスを持つDIV１つ１つがそれぞれのスライド１枚になります。
- 切り替えリンクを作る場合は、swiper-wrapperの外に１つ適当なクラス名をつけた空DIVを用意しておきます。（上記の例では paginationクラスのDIVです）
swiper-slideクラスを持ったDIVはいくつでも作れますし、中には画像だけじゃなくてなんでも詰め込めるようです。例では全てイメージですが、普通にHTMLとか書いてもOKみたいです。 ((公式サイトの記述「You can put any HTML content inside of slide, not only images」より。))
CSSを準備します
最低限必要なのは、スライダーの大きさの指定だけみたいです。
|
1 2 3 4 |
.swiper-container, .swiper-slide { width: 320px; height: 160px; } |
あと、ページネーションをつけるならば、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.pagination { text-align: right; padding: 5px 0; } .swiper-pagination-switch { display: inline-block; width: 8px; height: 8px; border-radius: 8px; margin: 0 4px; background-color: #000; border: 1px solid #188A77; cursor: pointer; transition: all .25s linear; } .swiper-active-switch { background-color: #16AC94; } |
みたいな感じでしょうか？
因みに swiper-pagination-switch（ページネーション通常時）とswiper-active-switch（アクティブ時）はスクリプトが自動的に生成する要素です。
スクリプトを書きます
今回はjQueryも使用していたので、一緒に document.ready のなかに書いてしまいました。
|
1 2 3 4 5 6 7 8 9 |
var mySwiper = $('.swiper-container').swiper({ //Your options here: pagination: '.pagination', loop:true, autoplay:3000, paginationClickable:true, calculateHeight:true, touchRatio:0.6, }); |
jQueryを使わない場合は、
|
1 2 3 4 5 6 7 8 9 10 11 |
window.onload = function() { var mySwiper = new Swiper('.swiper-container',{ //Your options here: pagination: '.pagination', loop:true, autoplay:3000, paginationClickable:true, calculateHeight:true, touchRatio:0.6, }); } |
という感じみたいです。
挙動をカスタマイズする
既に上記の例でもいくつかパラメータが設定済みですが、よく使いそうな設定を挙げておきます。
| speed | アニメーション速度（ミリ秒） |
| autoplay | 自動的に切り替わるまでの待ち時間。 指定しない場合自動的にスライドが切り替わらなくなる |
| mode | horizontal または vertical。 verticalにすると縦スライドになります |
| loop | true または false true にすると端まで行ったらはじめに戻ります |
| paginationClickable | true または false true にすると、ページネーションマーカーをクリックして スライドを切り替えられるようになります。 |
| calculateHeight | true または false true にすると、自動的に高さを計算してくれます。 |
| touchRatio | スワイプ操作などでどの程度スライドをひっぱったら スライドするかのしきい値。数が大きくなるほどすぐ反応 するようになります。個人的には 0.6くらいが好き |
| grabCursor | true または false true にすると、スライドにマウスを当てるとカーソルが グラブになって要素を掴んでスライドできることを明示する ことができます。 |
この他にも沢山のオプションやAPIが用意されていますので、一度 Swiper Usage and API に目を通してみると幸せになれるかもしれません。
動作デモ
公式サイトにサンプルがたくさん用意されています。
感想
動作デモなどをみてみると、スライダーだけでなく、いろいろと応用が出来そうな感じですね。
オプションも豊富ですしいろんな案件に柔軟に対応できるのではないでしょうか？
特に、レスポンシブ対応案件が増えてきていますので、レスポンシブ対応のjQueryプラグインは覚えておいて損はないとおもいます。
尚、ライセンスですが、
Swiper is licensed under GPL & MIT
とのことです。
リンク
iDangero.us Swiper – Mobile Touch Slider And Framework With Hardware Accelerated Transitions
コメントする