Swiper.jsをWordPressに追加。動きもいいしカスタムも簡単で秀逸だわ〜

ブログ（Wordpress）に、スライド形式のUIでウィジェットを実装しようと思いました。

スライドのライブラリは昔から色々あるから、それなりに軽くて動きがよければなんでもいいかなーと思って探してみると、いいもの発見。

「Swiper.js」ってのがありました。

• 実装が簡単（js読んで特定のHTML構造にするだけ）
• スライドUIのカスタムパターンが多い
• アニメーションもちゃんと気持ちいい
• モバイルのタッチ操作対応
• js側のオプションでメディアクエリ対応

優秀だよ……。本当、優秀……。
いい時代に生まれてよかっただよ。

Swiper.jsを実装してみる手順

参考にしたのは、この記事。

記事がキレイで理解しやすかったので、基本的なところはすぐできました。
あとは公式のDEMOを見ながら、好みのカスタム。

色々な表示パターンがあって素晴らしい！

Swiper.jsの読み込み

jsファイルとCSSファイルを読み込みます。
CDNで読み込むのが手っ取り早いです。

簡単〜。

しかし、私の場合、JSはWordpressのfunction.phpでwp_enqueue_scriptを使って、フックとして読み込みます。

こんな感じです。一応、「wp enqueue script」の解説をしておくと、こんな感じ。

読み込みの順番は、他のjsファイルの「読み込み名」を書くと、それより後に読み込まれます。

CSSはSCSSなので「_swiper.scss」を作って、コンパイルで組み込みました。ファイルのリクエスト減らしたいんです。

スライドのHTMLを入れる

スライドの中身の部分に画像やリンクを入れましょう。

Swiper.jsを動かす

ここまでは設置作業。

設置が完了したら、動かします。
別のカスタム用のjsファイルとかに、Swiperを動かすスクリプトを書きましょう。

オプションをいっぱい指定しているので難しそうですが、私の事情です。もっと少なくても動きます。

オプションの種類も豊富

オプションの種類はこちらの記事にたくさん書いてあったので役立ちました。読んでみてください。

ちなみによく使うのオプションはこんな感じ。

• loop
  trueでスライドがループする
• speed
  スライドのアニメーションスピード。ミリ秒で指定
• autoplay
  スライドが自動で動く。delayなど設定可
• slidesPerView
  スライドを一画面に何枚表示するか
• pagination
  ページネーションをつける。UIを色々選べる
• navigation
  矢印のナビゲーションをつける。色を選べる
• centeredSlides
  スライドの基準点が中央になる

とかとか。

あとメディアクエリで画面幅によって、表示を変えることもできますね。便利〜。

Swiper１つあれば大概のスライドUIが作れる

というわけで、フッターの上のところにつけました。

Swiperを使ってカルーセル型のUIを実装した、私の別ブログ

……うん、まぁ実際くつけると地味なもんです。

いやでもいいよ、本当Swiperすげぇ。便利ですわ。

appleお得意のカバーフローとかも、オプション指定だけでできちゃうので楽ですね。

スライド系でやりたいことはだいたいSwiperでできちゃいそう。

こりゃいいもの見つけたぜ！