【JavaScript】Swiper.jsを使ってjQuery要らずのスライダー

jQuery不要スライドショー！バニラJavaScriptで簡単導入Swiper.js

ウェブサイトではトップ画面などによくスライドショー/スライダーを見かけますよね。

でもHTML/CSSだけではスライダーは実装出来ません。

なるべく簡単に実装できるよう、私もよく利用するSlick.jsやbxSliderなどのプラグインがありますが、jQuery必須だったりします。

jQueryはJavaScriptを拡張したものです。

JavaScariptもままならないのにjQuery？？という方、、、困りますよね。

今回はできる限り素のJSを利用したいという方や、HTML/CSSと学んで次にスライダーをとにかく実装できるようになりたいという方にjQuery不要の「Swiper.js」導入方法を解説したいと思います。

プラグインとは何か？jQuery？

まだHTML/CSSしか学んだことがないという方であればまずプラグインとは何？というところかもしれません。

簡単にいうと、追加で機能を拡張するシステムのことです。

プラグインはすでにあるソフトウェアに補助的に機能を付け加えるようなライブラリです。 jQuery にはプラグインがたくさん作られています。ライブラリ＝ある機能に特化した関数の集合。 ... 関して、ある機能に対するライブラリの集合が内包される。

teratail.com

上記の引用でも「jQueryにはプラグインがたくさん作られています」とありますね。

jQueryは素のJSを拡張してより多機能に汎用かつ使いやすくしたため、多くのjQuery プラグインが作られました。

スライダー以外にも例えば、ドロワーメニューに特化した「Drawer」、無限スクロールの「Infiniteslide」、画像のポップアップ表示の「Lightbox」など。

これらは非常に便利に導入できるのですが、まずjQueryの導入が必須になるので、ページ速度を気にされる方や初学者の方には少し抵抗になるかもしれません。

そして素のJSのバージョンアップや他ライブラリの充実に伴って脱・jQueryが囁かれるようになりました。

SwiperはjQuery不要で簡単に導入出来るスライダープラグイン

脱・jQueryをしながら簡単にスライドショーを実現出来るのが「Swiper」です。

以下が公式サイトです。英語なので少し難しく感じるかもしれませんが、今回の解説はほぼ全てここから引用させて頂いてます。

swiperjs.com

Swiper導入・読み込み

まずは簡単に導入できるCDNでHTMLヘッド部分に以下のスクリプトを読み込みましょう。

CDNとは「コンテンツ・デリバリー・ネットワーク」の略で、自サーバーにファイルを置かずに外部から高速に読み込む方法です。

<head>
/*〜省略〜*/
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
/*〜省略〜*/
</head>

こういったJSプラグイン等ではまず必要なファイルを読み込ませるというところから始まります。機能をプラグイン＝「接続」するわけですね。

上記のようなCDNを用いずに自サーバーにファイルを置いて読み込ませる場合は

UNPKG - swiper　←こちらからダウンロードして同様にheadなどで読み込ませましょう。

Swiper.jsでのスライダーのHTMLコード

次に<body>内に記述するHTMLのコードです。

ほぼ公式ドキュメントのサンプルの日本語訳です。

<!-- スライダーのメインコンテナー -->
<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>

ページネーションやナビゲーション、スクロールバーは不要なら消しても大丈夫です。

コンテナー部分と囲みのラッパー部分、あとは実際のスライド部分が重要です。

クラス名は任意で変更可能です。

スライダーを動かすJavaScriptコード

こちらも公式のほぼ日本語訳です。

Swiperのスクリプトを読み込んだ後に記述しておきましょう。

<script>
//Swiper用のクラス指定
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>

コンテナー用のクラス指定やその他のパーツのクラス指定をして、スライダーを生成しています。

これもページネーションやナビゲーション、スクロールバーが不要な場合は消しても大丈夫です。

ここまででの実際の表示

ここまで記述が出来ていればもうスライダーが動くはずです。

いかがでしょう。

わかりやすいようにスライドの高さや色のCSSを装飾したのみです。

あとは画像を追加してごにょごにょしたり、オプション追加するなどしてカスタマイズも出来ます。

Swiper.jsのカスタマイズオプション

カスタマイズの方法は公式にもデモとして豊富にサンプル掲載されていますし、日本語の解説サイトなども参考になるかと思います。

swiperjs.com

mdstage.com

カスタマイズの箇所は先ほどのJSを記述したコード内の以下の箇所です。

<script>
/*〜省略〜*/

  // カスタマイズ用、追加オプション
  //direction: 'vertical',//←スライド方向のオプション
  loop: true,//←ループオプション

/*〜省略〜*/
</script>

公式サンプルではスライド方向のオプション「direction」と、ループオプションの「loop」が設定されていましたが、スライド方向は不要だったので当サンプルでは「//deirection」としてコメントアウトさせて無効にしています。

この部分に必要なオプションを追記することで様々なカスタマイズが出来ます。

公式からいくつかよく使いそうなオプションを抜粋します。

表示スライド数

slidesPerView: 3,

表示領域に表示するスライドの数です。通常1つしか表示されていないところを3つにしたり、もっと増やしたりできます。

スライド毎の余白

spaceBetween: 30,

スライド毎のマージンをpx単位で調整できます。

スライドの自動再生

autoplay: {
	delay: 2500,
	disableOnInteraction: false,
	},

自動でスライダーが動きます。

「delay」でどの程度の時間間隔の遅延で移動するか

「desableOnTnteraction」で自動再生以外の遷移を有効か無効かなど

細かく調整出来ます。

スライドの移動効果

effect: 'fade',

横にスライドして移動するのではなくフェードインアウトで変更されます。

effect: 'coverflow',

coverflowEffect: {
	rotate: 50,
	stretch: 0,
	depth: 100,
	modifier: 1,
	slideShadows: true,
	},

こちらはiTunes等で使われていたカバーフローでの移動。

coverflowEffectという項目の中でさらに細かく調整可能です。

Swiper簡単は便利なスライドショープラグイン

過去にいくつもスライダーは試した上で、個人的にはSlick.jsを愛用していました。

Swiperは試して触っていたこともあったかもしれませんが、今回レッスン受講生の方がご自身で導入を試していて、使い方を教えてほしいという事で改めて触ってみました。

使ってみるとオプションも豊富で簡単に非常に導入しやすい印象を受けました。
カスタマイズもしやすそうです。
今後は脱jQueryの流れの中でSwiperも検討の余地があるなと思います。

Swiper.js、おすすめです！

リンク

ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録