小説書いた! 浦島二郎物語|LINE小説

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
    スライドの基準点が中央になる

とかとか。

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

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

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

Swiperのスライド

Swiperを使ってカルーセル型のUIを実装した

・・・うん、まぁ実際くつけると地味なもんですな。いやでもいいよ、本当Swiperすげぇ。便利ですわ。

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

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

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

シェアする
閉じる