jQuery不要の便利なスライダー「Swiper」の使い方

テーマ「Ace」で採用しているスライダーライブラリについての紹介です。

この例はテーマ「Ace」でのスライダー機能で作成したデモですが、このようにネスト化して複数のエフェクトを同時に使用することもできます。

３Dエフェクトが用意されていますから、マテリアルデザインとの相性も良いですよ。

jQueryは不要

WordPressではjQueryプラグインのスライダーがー主に使用されているように思われますが、これにはjQueryをロードさせていることが前提条件となります。

WordPressでは標準的にjQueryはロードされますので、依存関係さえしっかりエンキューする際に指定しておけばいいだけですが、時には非同期的にロードさせることが速度改善策などを施したい場合もあるでしょう。

そういった非同期的にJavaScriptを読ませる際にはどうしてもjQueryプラグインの使用は弊害となり得ますので、jQuery無しで使用できる便利なスライダーとしての「Swiper」は重宝しますよ。

ただ、機能豊富な反面、ファイルサイズが大きいため、そこまで豊富な機能を要しないのであればもっと軽量のスライダーを利用する方がベターです。

インストール

npmを使ったパッケージへのインストールが可能です。

npm install swiper

GitHubからもダウンロードできます。

GitHub：Swiper

<script src="/path/to/swiper.min.js">

コーディング例

基本的なパターンだけ紹介していきます。

JavaScript側での処理がメインになると思いますので、HTMLは形だけ覚えておけば大丈夫です。

HTML

HTMLの構成としては以下の形です。

• コンテナ
  • ラッパー
    • スライド１
    • スライド２
  • ナビゲーション
  • ページネーション
  • スクロールバー
  • などなど

標準的なクラス名：

• コンテナ：swiper-container
• ラッパー：swiper-wrapper
• スライド：swiper-slide
• ナビゲーション：次「swiper-button-next」前「swiper-button-prev」
• ページネーション：swiper-pagination
• コントロール：swiper-scrollbar

これらのクラスもJavaScript側のオプションで別の名前で指定することが可能です。

で、HTMLを書いていくと以下のようになります。

<div class="swiper-container">

  <div class="swiper-wrapper">

    <div class="swiper-slide>
      <p>コンテンツテキスト１</p>
    </div>

    <div class="swiper-slide>
      <p>コンテンツテキスト２</p>
    </div>

    <div class="swiper-slide>
      <p>コンテンツテキスト３</p>
    </div>

  <div class="swiper-pagination"></div>

</div>

スライド内には自由にコンテンツを放り込めます。

JavaScript

JavaScriptでは他のスライダーでも同じようにコンテナーのセレクタ、あるいはそのHTML要素を第一引数に使用して初期化するだけでスライダーが機能します。

セレクタでスライダーを指定：

const swiper = new Swiper( '.swiper-container', {
  optionOne: true
} );

エレメントでスライダーを指定：

const yourSwiperContainer = document.querySelector( '.swiper-container' );
const swiper = new Swiper( yourSwiperContainer, {
  optionOne: true
} );

また、一部データセットが標準的なスライダー初期化にサポートされており、例えば「data-swiper-autoplay（自動再生）」や「data-src（画像の遅延化）」は、オプション値の代わりにHTML内の属性としてセットするのも有効です。

サーバー側からのオプション値は、JSONを属性としてセット

参照ページ：Swiper