スライダーを作るやり方について

スタッフブログ

究極のパソコン作製計画は来年までかかりそうな予感、森山です。今回は最近プログラミングしていてスライダーを作ることになったのでその過程で勉強したことについて紹介したいと思います。

スライダーとは

スライダーというと様々な種類があるのですがここでは、弊社のサイトトップにもあるような複数枚の画像などをスライドして切り替えながら表示する機能のことをスライダーと呼びます。このスライダーを使うと、画像1枚分のエリアを使って画像を複数枚紹介できるので多くの情報を伝えることができます。

このスライダーを実装するにあたって、今回は「Swiper」というライブラリを使用しました。スライダーを実装するプラグインは多くがjQuery必須だったのですが、このSwiperはjQueryなしで動くライブラリだったので使ってみました。なぜjQueryを避けるかというと、私はjQueryを使わないのでプラグイン1つのためだけに入れるのも微妙ですし、今から新しく作るホームページで使うのも避けたいと思うところがあったのでこのSwiperは私にとってぴったりでした。

また今回作ったのはサイトトップ等の大きい写真のようなスライドではなく、複数の項目から選ぶときに滑らかに動かすためのスライドだったのですが、そういった細かいところに対応できる様なオプションまで充実していて凄いと思ったので説明していきます。

下準備

まずはSwiperを使用するにあたって、Swiperを読み込んでおかなければならないのでその準備をします。今回はCDNを使用して読み込む方法で説明していきます。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

この2つはSwiper用のCSSとJavaScriptです。CDNには、名前にminという文字が付いているものと付いていないものがあります。これはminificationの略で、コードの実行に不要な部分を削ったプログラムになるので基本的にはminの付いている方を使って大丈夫です。

スライダーにしたい要素を作る

次は、スライダーとして動く部分のHTMLを書いていきます。この時大切なのが、「スライダー全体を示す要素」「スライドを包む要素」「スライドの要素」の3つが必要なので忘れないようにします。

<div> //スライダー全体を示す要素
    <ul> //スライドを包む要素
        <li>スライド1</li> //スライドの要素
        <li>スライド2</li>
        <li>スライド3</li>
        <li>スライド4</li>
        <li>スライド5</li>
    </ul>
</div>

このように書くと1,2,3,4,5,のスライダー部分のHTMLができます。

スライダーとして認識させる

HTMLが作れたら今度はスライダーとして認識させる作業をします。まずはHTMLにそれぞれの役割をクラスに書いていきます。「スライダー全体を示す要素」にはswiper-containerというクラスを、「スライドを包む要素」にはswiper-wrapperというクラスを「スライドの要素」にはswiper-slideというクラスを付けます。

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">スライド1</li>
        <li class="swiper-slide">スライド2</li>
        <li class="swiper-slide">スライド3</li>
        <li class="swiper-slide">スライド4</li>
        <li class="swiper-slide">スライド5</li>
    </ul>
</div>

次に、Swiperを初期化するためのJavaScriptを書いていきます。

const mySwiper = new Swiper('.swiper-container');

これで最低限の動きをするスライダーは完成です。しかし、まだ足りないものがいろいろとあるのでここからオプションを追加していきます。

スクロールバーを追加する

スクロールバーとは画面をスクロールする必要があるときに表示されるバーのことで、Swiperの初期状態ではついていないので追加していきます。まずはスクロールバー自体を表す要素を作成していきます。

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">スライド1</li>
        <li class="swiper-slide">スライド2</li>
        <li class="swiper-slide">スライド3</li>
        <li class="swiper-slide">スライド4</li>
        <li class="swiper-slide">スライド5</li>
    </ul>
    <span class="swiper-scrollbar"></span>
</div>

今回はspan要素で作りました。この作ったspan要素にはswiper-scrollbarクラスを付けておきます。次に、JavaScriptの方も変更していきます。

const mySwiper = new Swiper('.swiper-container', {
    scrollbar: {
        el: ".swiper-scrollbar",
        draggable: true,
    }
});

各内容が一気に増えたので一つずつ説明していきます。まずnew Swiper()の引数の2つ目にオブジェクトを追加しました。そして、そこに追加するオプションの名前のオブジェクトをさらに追加します。そこには、どんなクラス名で登録しているのかを示すプロパティや、ドラッグできるかどうかのプロパティを入力しています。この設定をすることで通常のスクロールバーを追加することが出来ました。

複数枚のスライドを表示する

最後に、一度に複数の画像を見せるオプションを追加していきます。

const mySwiper = new Swiper('.swiper-container', {
    scrollbar: {
        el: ".swiper-scrollbar",
        draggable: true,
    },
    slidesPerView: 3
});

今追加したのはslidesPerView: 3という部分です。このプロパティに入れた数字が同時に見えるようになる数で、これだと同時に3つが見えるようになりました。

完成したスライド

これでスライドの動く部分は完成したので、サンプルとコードをまとめたいと思います。

  • スライド1
  • スライド2
  • スライド3
  • スライド4
  • スライド5

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">スライド1</li>
        <li class="swiper-slide">スライド2</li>
        <li class="swiper-slide">スライド3</li>
        <li class="swiper-slide">スライド4</li>
        <li class="swiper-slide">スライド5</li>
    </ul>
    <div class="swiper-scrollbar"></div>
</div>

<script>
const mySwiper = new Swiper('.swiper-container', {
    scrollbar: {
        el: ".swiper-scrollbar",
        draggable: true,
    },
    slidesPerView: 3
});
</script>

Swiperの良いところ

Swiperでは、CSSなどで選択中のスライドを指定したりするためのクラスなども後から自動で追加されます。
ブラウザで生成されたHTML

<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
    <ul class="swiper-wrapper" id="swiper-wrapper-19e161043da1510204" aria-live="polite" style="transition: all 0ms ease 0s; transform: translate3d(0px, 0px, 0px);">
        <li class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 5" style="width: 485px;">Slide 1</li>
        <li class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 5" style="width: 485px;">Slide 2</li>
        <li class="swiper-slide" role="group" aria-label="3 / 5" style="width: 485px;">Slide 3</li>
        <li class="swiper-slide" role="group" aria-label="4 / 5" style="width: 485px;">Slide 4</li>
        <li class="swiper-slide" role="group" aria-label="5 / 5" style="width: 485px;">Slide 5</li>
    </ul>
    <span class="swiper-scrollbar"><div class="swiper-scrollbar-drag" style="transform: translate3d(0px, 0px, 0px); width: 855px; transition: all 0ms ease 0s;"></div></span>
    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>

これは上で作ったスライダーを実際にブラウザが生成した後のHTMLです。とてもごちゃごちゃとしていますが、liタグの1・2行目にあるswiper-slide-activeとswiper-slide-nextを見てください。現在選択されているスライドにswiper-slide-activeクラスが付けられ、その一つ先の要素にswiper-slide-nextが付きます。また、ここでは出ていませんが選択されている一つ前の要素にはswiper-slide-prevが付きます。このクラスをあらかじめ指定しておくことでCSSを動的動かすことができます。

Swiperは高さや幅などを固定しなければある程度レスポンシブ対応することができます。そのためもともとレスポンシブなサイトに新しく導入する際の難易度はそこまで高くないというのも1つのメリットといえるのではないでしょうか。

Swiperを応用した使い方

今回紹介してきたオプションは本当にごく一部で、公式ドキュメントには大量のオプションが載っています。また、公式サンプルの中には応用編も載っていて、スマートフォン用のサイトなどで重宝しそうな「画面のどこをスワイプしてもメニューが開ける」機能を作ることができます。

ここでは公式サイトにて用意されているDEMOを使用させてもらっています。下の黒枠の中を左から右へスワイプしてみてください

このようにスライダーではなさそうな部分でも使える場面があるのは正直驚きました。

まとめ

今回紹介してきたSwiperは、今までライブラリを一度も使った事が無かった自分でも使いやすくて効果を体感しやすい良いライブラリだったんじゃないかと思います。また、このライブラリについてできることを勉強していると知っている動きや機能が出てきて「こうやっていたのか」と発見がありました。今回のことは本当に自分にとっていい勉強だったと思います。