😎

Swiper.JSを0から学んでいく

2022/10/27に公開

JavaScript

introduction

スライダー実装はwebcodingをする際には必ず必要になってくる。しかし、それをJSを用いて0から作ろうとするのはマジでむずい。マジで。だから、みんな基本的にはプラグインを使うようになっていて、有名なもので言えばslickとかがそう。でもslickはjQuery依存のプラグインだから、もしもjQuery非依存のサイトだったり、今後jQuery非推奨の時代になってくると使いづらくなる(特に今の時代の流れ的にそうなりそう)。だから、Swiper.jsというvanillaJSで書かれた汎用性の高いプラグインを使っていこうというのが今回の話。

対象者

今回SwiperJSを使うのが初めてなので(実は前にも使ったことがあるんだけど、自分でも何してんのかわからんかった)、同じように0から学びたいって人に向けて、自分が学んでいく過程が参考になるかもと思い残す。
別にSwiperJSを1から解説しようという記事ではなくて、そういう記事はもうある(このサイト。今回はめちゃくちゃ参考にさせてもらう)ので、そっちを読んで理解したいならそっちでやってほしい。

実践１-SwiperJSをとりあえず使ってみる

この記事に一貫して参考にさせてもらうのがさっきも挙げた以下のサイト。マジでありがとうBRISK。

ま、この記事にプラグインの実装方法は載っているので、それは飛ばしてとりあえず使ってみることにする。
それが以下のソースコード。このコードはほとんど参考サイトに則っているが、プラグインはCDNから持ってきている。また、loopをfalseにしている。こうすると、スライドが3枚に左右へ行くボタンやページネーション、スクロールバーを持ったスライドが表示される。これが一番基本構造になると思われるので、この構造からの理解をしたい。以下のソースコードをhtmlで表示することを前提にしてお話をするので、もしできるならそうしてほしい。

test01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width">

<title>Swiper DEMO</title>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="css/style.css">
<body>
<!-- Slider main container -->
<div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
  
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<script>
    const mySwiper = new Swiper('.swiper', {
    // Optional parameters
    loop: false,

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
        el: '.swiper-scrollbar',
    },
    });
</script>
</body>

</html>

style.css

.swiper{
  width: 500px;
  height: 300px;
}
.swiper-slide{
  background-color: aqua;
}

document構造の説明

これをみてみると、swiperというdivがスライダーの表示範囲を設定している。swiperのwidthを外すと、画面全体にスライドが表示されることをみてくれたらわかると思う。次にその中のswiper-wrapperについて見ると、一見何してんねやろって感じになる。そこでデベロッパーツールを見て確認してみよう。そうすると、swiper-wrapperにはtransformがつかわれていることがわかる。また、transformの動きつまりこれを用いることによって、スライダーの動きの実装をしているということだ。
最後に一番中の部分、swiper-slide。これがスライダーの要素となる部分だ。今回はbackground-colorを入れてわかりやすくしているが、参考サイトではswiper-slideの記述として以下のように記述されている。

この中に各スライドの要素を入れます。
デザインを調整する際、.swiper-slide に直接スタイルを当てると不具合に繋がる場合があるので要注意。
以下のように中身を囲う要素を作って、それに対してスタイルを当てるのがお勧めです。

引用

<div class="swiper-slide">

  <div class="item">

    <img src="img.jpg" alt="">

    <p class="text">テキストが入ります</p>

  </div>

</div>

どうやら、この中に要素を入れて記述すると良いようだ。簡単だな。

javascriptの説明

new Swiperによって、swiper新規オブジェクトの生成をおこなっている。これをすることによって、swiperを実装することが出来る。マジで簡単やん。すごい。オブジェクト生成には2つの引数があり、前者はswiperとなるオブジェクトの指定、後者はそのswiperに与えるオプションを設定する。オプションの設定は参考サイトに乗っているから、それを参考にされると良い。これ以上jsの理解は必要なさそうだな。

実践2-slidePerViewとspaceBetweenの使い方

次はスライドを9個に増やして、もっとSwiperについて深く理解していこうと思う。まずはhtmlのスライドを以下のように９個に増やす。

test01.htmlのbody内

<body>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

<!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

slidePerView

ではまず、slidePerViewについて使ってみようか。設定には、jsの中身の部分にslidePerViewをいれるだけでいい。まずは引用。

表示させるスライドの枚数を指定。
指定した枚数分がコンテナ内に収まるように調整される。
小数点以下の値も指定可能（ 1.5 など）。
CSSでサイズ調整したい場合は ‘auto’ を指定。

これを踏まえて、色々値を変えてみよう。まずは2。これを設定すると、一つのswiperコンテナの中に2つのswiper-slideが入ることになる。これの便利なのは、コンテナの中に自動的に長さを等分割して入れてくれるというところだ。gridレイアウトで1frをそれぞれに設定するみたいな事ができるってこと。
次に1.5にしてみよう。これを見てみると、毎回右側に0.5分の次のスライドが表示されている。この実験から得られる知見は、1以上の部分は右に入って、1回ボタンを押すことによってtransitionで動く幅はslide１枚の大きさに依存しているということ。これはあくまでも表示されるslide数を設定することが出来、他の操作に影響が出ないことを理解するとこのプラグイン賢こ！ってなるんじゃない？(え？俺だけ？)

spaceBetween

ま、次はswiperのwidthを1000pxにして、みやすくする。んで、slidePerViewを2にしてから見てみるとこれはわかりやすいかも。まずはspacebetweenを32にしてみる。
これをみてみると、swiperの1000pxの中で余白を32px分取得して、1000-32=968px分を2分割することによってslideひとつあたりの大きさが得られる。じゃあ次はslidePerViewを1.5にするともっと理解が深まるのではないだろうか。1.5にすると、これは1つのスライドが656pxになる。じゃあ2枚目のスライドの見えている幅は1000-32-656=312pxだな。どうやって自由自在に設計できるだろうか？

spacebetweenの関数を特定する

ここから先は完全に遊びなので、数学が嫌いな人とか、結論だけを見たい人は先に進んでほしい。
実験に対しての大切な考え方もついでに伝える。

さっき通りの計算で行くと、(1000-32)/1.5=637px??ならないな。逆に656×1.5=984pxで1000-984=16pxと。ん？？？
一旦1.2を実験してみよう。828pxか。828×1.2=993.6pxで余り6.4pxか。30/6.4=5か。なんや？？0.2=1/5で有ることと関係ありそう？？たしかに0.5=1/2やから、32/2=16か。
じゃあ次は1.4を実験してみようか。705.143pxか。同様の計算で12.799px、32と比べて2.5倍。
2.2を実験してみると、437.091px。同様の計算で38.399px、32と比べて0.83倍。
わかりそうでわからんな。。。

とりあえず、何がこの計算に影響しているのかを特定する。
slidePerViewの値は確実に影響していて、コンテナの値も影響している。spaceBetweenの値も影響しているはず。スライド数は？一旦8にかえてみると、、、変わらなかった！まぁ考えてみるとスライド数が影響することはないのは至極当然なのだが、とりあえず考えられるのは余りの32、spacebetween、slidePerViewによって決定されていることがわかった。こんな感じで、思考に迷った時には自分が使える材料が何なのかを明確にすることは大切だと思う。

slidePerViewを2.2で、spaceBetweenを16にすると、445.818px、48にすると428.364px。
16→３２で8.727pxふえて、32→48pxで8.727pxふえている。。これが意味するのは、"減少量がslideBetweenに比例しているということ"。こうやって比例関係を見つけていくのも大切だな。

じゃあ次は、slidePerViewに対してslideの長さはどんな関係があるのかを調べよう。
spacebetweenを1に対してslidePerViewを１にしよう。それは長さが0になる。slidePerViewを1.5にすると、spacebetween:0に比べて0.333下がる。slidePerViewを２にすると、0.5さがる。同様に、2.5なら0.6、3なら0.666になる。3.5なら0.714、4なら0.75になる。4.5なら1.222、5なら...みたいな感じでやっていって、excelでみてみると以下のようになる。比例関係ではなさそうなので、グラフで見るとよりわかりやすくなる。

変数が無限大に飛ぶと1に収束する関数、、分数関数か $1-e^{-x}$ くさいな、、、
全部キレイに分数にできるし、分数関数かな？と思い、分数関数である $\frac{x-1}{x}$ を考えると、、、
ピッタリやないかい！！！！
つまり、コンテナの減少量は、slidePerViewにたいしては $\frac{x-1}{x}$ の関係性があるし、spacebetweenに対しては比例関係があるということ。

結局どうなんの？

スライドの大きさは、slidePerViewをx、spacebetweenをyとすると、

$(slide-width)=\frac{1000}{(amount-of-slide)}-\frac{x}{x-1}y$

が成立する。え、てか公式ドキュメントとかソースコードみればわかんじゃね?と思って、以下のサイトを見たけど、いやわからん。長すぎ。widthでページ内検索かけたけどどこやねん。まぁわかったからいいや。

width

最後にwidthについておまけに紹介しよう。width:400とか設定すると、slideの大きさはレスポンシブを外れて固定になる。そのため、スライダーとしては簡単に設定することが出来る。今回のお仕事はこれを使うことによって簡単に作ることが出来た。

実践3-エフェクトを使ってみる

今回はフェードするアニメーションを求められたのだが、せっかくだから一気に見ておいた。アニメーションのエフェクト一覧は以下のサイトがわかりやすい。

その後

ここまで学んでから、参考サイトをどんどん読み進めていくと、おおおおおできるやんけ！！ってなった。ちなみにcssも自由に設定できているが、これは読み込むcssをbundleではない方にしていると最低限のswiperのcssが当たるようになるので設定ができるようになる。
そこからはレットブルによって翼を授けられたペンギンのよう。swiper.jsを楽に使えるようになった。参考サイトのデモと、解説のサイトはある程度リンクしているのでそこを見ながらなんでもできるようになる。Swiper.js最強では？？？

みんなもこのサイトをみて、しっかりと勉強をしてSwiper.jsに翼を授けてもらおう。