スワイプが超スムーズ!スライダー系JavaScript「Swiper」を使ってみた

いつもスライダー系はおなじみ「Slick」を使っていたんですが、スマホのスワイプの反応がすこーしゆっくりだったので、色々検討して「Swiper」に乗り換えました。

Swiperはライブラリに依存しないスクリプトなので、jQueryなどを導入しなくても(していても)使用できます。

スマホの方を重視するサイトならスワイプのなめらかさって結構重要だと思うので、もし何を使うか迷っているのならSwiperをおすすめします!

Swiper の導入

SwiperにはCDNがあるので、ささっと使いたいときはCDNを使うといいと思います

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
<!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>

記事公開時の最新が4.2.2だったので、バージョンを4.2.2にしています。
公式サイトのドキュメントでは4.x.xと書かれていて、「Don’t forget to change 4.x.x to actual Swiper version」とあります。バージョン指定を忘れるな、ということですね。ちなみに複数CDNが書かれていますが、minファイルを使用するとよいかと思います。

ちなみに私はコーディング時はnpm run scriptを使っているので、npm installして使っています。

CSSはhead内、スクリプトは</body>の直前に記述するので、このようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
<div class="container">
...
</div>
<script src="path/to/swiper.min.js"></script>
</body>
</html>

これで導入の準備は整いました!

スライダーを設置する

準備が終わったら、スライダーを設置します。
スライダーのCSSは固定されている(主にCSS適用のため)ので、ドキュメント通りに書きましょう。

<div class="swiper-container">
<div class="swiper-wrapper">
 <div class="swiper-slide">Slide 1</div>
 <div class="swiper-slide">Slide 2</div>
 <div class="swiper-slide">Slide 3</div>
 ...
</div>
<!-- ページネーションが必要なときは入れる -->
<div class="swiper-pagination"></div>

<!-- 次へ・前へのボタンが必要なときは入れる -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- スクロールバーが必要なときは入れる -->
<div class="swiper-scrollbar"></div>
</div>

「◯◯が必要なときは入れる」というところは不要なら省いてOKです。
HTMLを入れたら、JSの初期化をします。

<script>
var mySwiper = new Swiper ('.swiper-container', {
// パラメーターを入れる
direction: 'vertical',
loop: true,

// ページネーションが必要なときは入れる
pagination: {
el: '.swiper-pagination',
},

// 次へ・前へのボタンが必要なときは入れる
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// スクロールバーが必要なときは入れる
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>

ここまでやらないとSwiperは動かないので注意してください。
また、HTMLのときと同様に「◯◯が必要なときは入れる」というところは不要なら省いてOKです。

一番ミニマムでこうなります。

<script>
var mySwiper = new Swiper ('.swiper-container', {})
</script>

なお、この状態だと左右のクリックでは遷移せず、スワイプのみ反応する形になります。
左右にスライダーができるとわかりにくいので、ページネーションかナビゲーションは設定しておくのがよいかなと思います。

もしクラス名を別にしたい!とか、data属性で指定したい!というときは、.swiper-containerを変更すればOK。

<script>
var mySwiper = new Swiper ('[data-mainslider]', {})
</script>

ただし、クラス名を消すとCSSが適用されずに表示が崩れてしまうので、追加で指定するようにしてください。

パラメーターを指定して挙動の調整をする

永久スライドや自動スライドなどの設定はパラメーターを指定します。
パラメーターは他のスライド系JSと同様に多数ありますので、必要なパラメーターを入れましょう。

なお、パラメーターにはデフォルト設定があるので、デフォルトのままでよい場合は省いてOKです。

パラメーターの一覧は公式ドキュメントにまとめられています

適当にパラメーターを入れたデモがこちらです!

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”jzgaVQ” default_tab=”html,result” user=”chiilog”]See the Pen <a href=’https://codepen.io/chiilog/pen/jzgaVQ/’>Swiper demo</a> by Chiilog (<a href=’https://codepen.io/chiilog’>@chiilog</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

スワイプのなめらかさに惚れてしまったので、多分私が何かスライダーを実装するときはこれを使うと思います!
是非一度お試しあれ。