【JavaScript】Swiper.jsを使ったスライダーデモ&カスタマイズ方法
前回解説したJavaScript製のスライドショープラグイン「Swiper.js」について、カスタマイズ方法をもう少し詳しく見ていきたいと思います。
カスタマイズによっては上の画像のような昔のiTunesっぽいカーバフロースタイルにも出来ます。
導入については前回記事をご参照ください。
公式デモを実際に試してみた
Swiperには公式サイトで動きを確認できるサンプルデモが豊富に掲載されています。
公式デモページ
公式デモの一覧を日本語訳すると以下のような感じ
- デフォルト
- ナビゲーション
- ページネーション
- ページネーション/動的弾丸
- 進行状況のページ付け
- 分数のページ付け
- カスタムページ付け
- スクロール・バー
- 垂直スライダー
- スライド間のスペース
- ビューごとに複数のスライド
- ビューごとの自動スライド/カルーセルモード
- 中央に配置されたスライド
- 中央揃えのスライド+ビューごとの自動スライド
- CSSスクロールスナップ（CSSモード）
- フリーモード/固定位置なし
- スクロールコンテナ
- 複数行のスライドレイアウト
- ネストされたスワイパー
- グラブカーソル
- ループモード/無限ループ
- グループごとに複数のスライドを使用するループモード
- フェード効果
- 3Dキューブ効果
- 3D Coverflow Effect
- 3Dフリップ効果
- キーボードコントロール
- マウスホイール制御
- 自動再生
- ダイナミックスライド
- 親指ギャラリー
- ループモードの親指ギャラリー
- ハッシュナビゲーション
- 履歴API
- RTLレイアウト
- 視差
- 遅延読み込み画像
- レスポンシブブレークポイント
- 自動高さ
- ズーム
- バーチャルスライド
- スライド可能なナビゲーションドロワー
- 比率ブレークポイント
- 方向を変えます
- スライドの可視性を見る
- カスタムプラグイン
めちゃくちゃ豊富なカスタマイズデモですね。
動的弾丸って何だ？というような翻訳もありますが、デモ見てみればどんなものか理解は出来そうです。
Swiper.jsデモ例、実際に試して解説してみました
以下一覧です。色や高さやコメントなど公式を少し変更している部分もあります。
デフォルト
ナビゲーション類を全くつけない状態がデフォルトです。
この状態でもマウスでドラッグしたりタッチ操作でスワイプは可能です。
ナビゲーション
左右へスライドを切り替えられるナビゲーションです。
HTMLとJSでクラス名を任意に変更可能なので、CSSで見た目の変更も簡単そうです。
ページネーション
スライダー下部に並んだ丸の部分ですね。ページ切り替えを表す部分になっています。
ただこのページネーション自身をクリック/タップ操作は出来ない状態です。
こちらもクラス名が任意変更可能なので見た目もカスタムしやすそうですね。
ページネーション＆動的弾丸
出ました、動的弾丸。Dynamic Bulletの訳でしたが、どうやらページネーション自体もスライドするような仕様の事みたいです。
今何ページ目がちょっとわかりにくいような気がしますね。。
進捗状況のページ付け
こちらは英語でPagenation progress。
ちょっと変な訳になってますが、スライダー上部にページネーションの進行状況が青い線で表されます。スライドが進むと伸びていくような感じなので、プレゼンテーション的なスライドにはちょうどいいかもしれませんね。
分数のページ付け
こちらは英語でFraction pagenation。フラクションで分数って意味になるんですね。
ページネーションが分数表示されてるので、これもプレゼンテーション向けかもしれません。
カスタムのページ付け
こちらではページネーションに数字を入れてカスタムしていますね。
JSの部分はちょっと引数など用いて挿入するHTMLを記述しています。
JSが理解出来れば色々出来ると思います。
スクロール・バー
Chromeなんかだとぱっと見何も表示されてないように見えますがスライドすると下部にスクロールバーが表示されます。
垂直スライダー
垂直、縦スライダーです。野球の球種みたいですね(笑)
ただのスライダーとしてだけではなくページ全体のコンテンツの見せ方としてこういった手法も時折見かける気がします。
スライド間のスペース
こちらはスライドの動きではなく余白の制御です。
デモではスクリプト部分で「spaceBeteween:30」とすることで30pxのマージンがとられてるようです。
ビューごとに複数のスライド
これまでのデモでは一度に表示されているスライドは1つずつでしたが、こちらでは複数を表示するように制御出来ます。
「slidesPerView: 3」で3つずつ表示にしていますが、もちろんこの数字を変えることでもっと増やしたり減らしたりすることができます。
ビューごとの自動スライド/カルーセルモード
ちょっと分かりづらいですが、１つ前のビューごとに複数スライドで「slidesPerView: 3」で3つずつ表示にしたものを「slidesPerView: auto」としています。何枚のスライド毎に表示するかを自動に任せています。
表示領域よりスライドの幅が狭ければ複数枚表示されるという感じです。
中央に配置されたスライド
現在のスライドが中央になるよう表示されます。
ちなみにこのデモでは「slidesPerView: 4」も設定されてるので4つ表示の真ん中配置なので、左右は半分ずつ見切れる感じですね。4.5とか小数点での配置も可能なようです。
中央揃えのスライド+ビューごとの自動スライド
現在のスライドが中央になるよう表示された上で、表示されるスライドの数は固定ではなく自動で調整されます。
大きい画面で見てもらえるとわかり易いかと思いますが、今回スライドの幅を様々にしているので、一度に表示されているスライドが3つだったり3つ半だったりに都度変わってると思います。画面幅に表示できる分は表示されるということですね。
CSSスクロールスナップ（CSSモード）
こちら見た目や操作感は特に変わり映え無く見えますが、CSSのscroll-snapという新しめのプロパティが使われているモードになっています。JSより処理が軽量などメリットがありそうです。
scroll-snapについては以下の記事などが参考になります。
フリーモード/固定位置なし
タッチスワイプやドラッグアンドドロップでスライドすると、通常のように固定されずに、途中の位置で止めたり自由にスライド出来ると思います。
その上でページ送りでは固定位置へスライド出来たりします。
スクロールコンテナ
縦スクロールのスライダーです。画像スライダーというよりはサイトのコンテンツを囲むということに向いてると思います。
複数行のスライドレイアウト
ギャラリーサイトなど、画像を一気に見せたい時によさそうなスライダーレイアウトですね。自動スライドにして背景に用いるなどの可能性も広がりそうです。
ネストされたスワイパー
2つめのスライドが縦にもスライドできる状態に、スライダーが入れ子になっています。あまり見たことがないですが、こういった応用的な使用も可能です。
グラブカーソル
マウスポインターが手袋のようなグラブカーソル状態になります。
ループモード/無限ループ
端と先頭がつながる無限ループです。「loop:true」を加えるだけで簡単に実装可能です。
グループごとに複数のスライドを使用するループモード
「slidesPerGroup: 3」
という部分の数値を変える事でグループ化して、複数枚ごとのスライドに対応出来ます。
デモでは3枚ごとにスライドする設定で無限ループになっています。
フェード効果
スライドの切り替え方式が移動ではなくフェードインフェードアウトで変化します。
切り替えがわかりやすいよう、サンプル画像に当ブログのサムネイルを用いています。ややこしくなっていたらすいません。
続きます、、、
デモだけでも網羅するにはもう少しかかりそうです。
随時更新して追記したいと思います。
リンク
リンク
