NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

Swiperという軽量でレスポンシブ対応でスワイプ切り替えもできちゃうスライダー

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1218日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

レスポンシブにも対応していて、スマホなどのタッチデバイスによるスワイプ操作にも対応したコンテンツスライダーです。

触ってみたらなかなか良い感じだったのですが、日本語の情報が少なかったのでメモ。

Swiperの主な特徴

  • レスポンシブ
  • 横スライドだけじゃなくて縦スライドにも対応
  • フリーモード(自分で動かした分だけしかスライドしなくなる)
  • カルーセルモード
  • jQueryなしで単体動作させることもできる(jQueryで発火させることも出来る)
  • コンテンツスライダーなので画像だけじゃなくてなんでも詰め込める

などでしょうか?

他にもたくさんありますので、公式サイトのFeaturesを読んでみて下さい。

インストール方法

公式サイトの下の方にあるリンクからGithubに飛んでDownload ZIPというリンクからダウンロードします。

解凍したファイルの中で必要なのは、

  • idangerous.swiper-2.0.min.js
  • idangerous.swiper.css

なので、この2つを設置したいサイトに読み込ませます。

たとえばこんな感じ。

※バージョンは記事作成時のものです。バージョンによってファイル名が異なる可能性があります。

使い方

簡単に使い方をメモ。

はじめにスライドの中身を作成します。

 ポイントは、

  • スライダー全体を囲う要素に「swiper-container」というクラスを与える
  • swiper-container のなかに、更に「swiper-wrapper」というクラスを持つDIVを作る
  • そして更にそのなかに「swiper-slide」というクラスのDIVを作る。
  • swiper-slideクラスを持つDIV1つ1つがそれぞれのスライド1枚になります。
  • 切り替えリンクを作る場合は、swiper-wrapperの外に1つ適当なクラス名をつけた空DIVを用意しておきます。(上記の例では paginationクラスのDIVです)

swiper-slideクラスを持ったDIVはいくつでも作れますし、中には画像だけじゃなくてなんでも詰め込めるようです。例では全てイメージですが、普通にHTMLとか書いてもOKみたいです。[*1]

CSSを準備します

最低限必要なのは、スライダーの大きさの指定だけみたいです。

 あと、ページネーションをつけるならば、

 みたいな感じでしょうか?

因みに swiper-pagination-switch(ページネーション通常時)とswiper-active-switch(アクティブ時)はスクリプトが自動的に生成する要素です。

スクリプトを書きます

今回はjQueryも使用していたので、一緒に document.ready のなかに書いてしまいました。

 jQueryを使わない場合は、

 という感じみたいです。

挙動をカスタマイズする

既に上記の例でもいくつかパラメータが設定済みですが、よく使いそうな設定を挙げておきます。

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 に目を通してみると幸せになれるかもしれません。 

動作デモ

公式サイトにサンプルがたくさん用意されています。

Swiper Demos

感想

動作デモなどをみてみると、スライダーだけでなく、いろいろと応用が出来そうな感じですね。

オプションも豊富ですしいろんな案件に柔軟に対応できるのではないでしょうか?

特に、レスポンシブ対応案件が増えてきていますので、レスポンシブ対応のjQueryプラグインは覚えておいて損はないとおもいます。

尚、ライセンスですが、

Swiper is licensed under GPL & MIT

とのことです。

リンク

iDangero.us Swiper – Mobile Touch Slider And Framework With Hardware Accelerated Transitions

TAGS