今日紹介する[Swiper]は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。

初見の感想は「反応速度が早く軽量でサクサク動く」という印象。
レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。

機能が豊富で、ざっと紹介すると以下のとおり。

  • レスポンシブ対応
  • フルスクリーン化OK
  • ページネーション設置
  • 縦方向のスライド
  • カルーセル・モード
  • 各スライドの位置を固定しない「フリーモード」対応
  • 複数行のスライドに対応
  • 縦方向・横方向の「入れ子」に対応
  • マウスのドラッグ操作に対応
  • スクロールバー表示
  • ナビゲーションボタン表示
  • 無限ループ対応
  • フェードイン・フェードアウトによるスライドの切り替え
  • 3D キューブ・エフェクト
  • 3D カバーフロー・エフェクト
  • キーボード・コントロール
  • マウスホイールによる操作可能
  • 自動再生
  • サムネイル表示
  • パララックス効果導入
  • スライド画像の遅延読み込み(Lazy Load)対応

オプション設定でこれだけの機能が使えるようになります。
……圧倒的な量ですよね。

まずは実際に[Swiper]を導入したサンプルページをご覧ください。

Swiper:実装サンプル

こちらのサンプルではフルスクリーン化し、パララックス効果を追加してみました。
よくある画像ベースのスライダーではなく、『コンテンツ・スライダー』という位置付けなので、テキストはもちろん、画像でも動画でも何でも組み込むことが可能です。

導入方法は以下より。

Swiper の実装方法

最初に公式サイトから必要なファイル一式をダウンロードしてきます。

公式サイト:Swiper – Most Modern Mobile Touch Slider

ヘッダー部分にある「Download」をクリックするとスグにダウンロードがはじまります。

ダウンロードしたファイルのうち、主に利用するのは以下の2つ。

  • 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]のダウンロードは以下よりどうぞ。

公式サイト:Swiper – Most Modern Mobile Touch Slider