【Swiper】
導入方法から初期設定まで！
実装手順まとめ

高品質なスライダーを手軽に実装できる java script ライブラリ「Swiper」！

手軽とは言っても、「Swiper」でスライダーを実装するまでには、ライブラリ導入、スライダー設置、初期設定といった工程が必要になります。

最初のステップは「Swiper」の導入です。

ここでは、「Swiper」を手軽に導入する2つの方法とスライダーコード、初期設定コードも合わせて紹介しているので、手順どおりに作っていけば、すぐに「Swiper」の基本的なスライダーを実装することができます。

まずは「Swiper」の導入から始めていきましょう！

Swiperを導入する3つの方法

「Swiper」を導入するには、大きく3つの方法があります。

・NPMでインストールする

・CDNでライブラリを直接読み込む

・ライブラリをダウンロード（コピー）して使う

NPMはどちらかというと詳しい人向けで、最も手軽なのは読み込みコードを書くだけで使えるCDNです。

とにかくカンタンに導入したいならCDN、手元であれこれいじりたい、安定した実装をしたい場合はダウンロードして利用するのがおすすめです。

Swiperを導入する前知識

「Swiper」を導入するには、「Swiper」の本体であるjsファイルとCSSファイルを読み込むのが最初のステップです。

「Swiper」には多くのバージョンがあるので、使いたいバージョンから以下の2つのファイルを選んで読み込んでいきましょう。

jsファイルは「swiper-bundle.min.js」。

CSSファイルは以下の2つがあるので、お好みでどちらか1つを使います。

「swiper-bundle.min.css」
「swiper.min.css」

「swiper-bundle.min.css」はスライダーの装飾込みのCSSファイルでなので、読み込むだけですぐに基本的なスライダーが実装できます。初心者さんはこちらがおすすめ。

「swiper.min.css」は必要最小限のスタイルのみの軽量ファイルなので、自分で無駄なくカスタマイズしたい時にぴったりです。

SwiperをCDNで導入する

「Swiper」をCDNで導入する場合は、jsファイルとCSSファイルの読み込みコードをHTMLファイルに記述して利用します。

まずは、CSSファイルの読み込みコードをhead内に設置します。

ここではv.8の「swiper-bundle.min.css」を導入します。

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />

次に、jsファイルの読み込みコードはbody内に設置します。

ページ全体の読み込みを優先する場合は、メインコンテンツの下あたりに設置するといいでしょう。

ここではv.8の「swiper-bundle.min.js」を導入します。

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

これでCDNでの導入準備は完了です！

最新版のCDNは こちら で確認できます。

Swiperをダウンロードして導入する

「Swiper」をダウンロードして利用する場合は、「download-assets」ページから、jsファイルとCSSファイルを入手しましょう。

執筆時点ではv.8が最新版なので、こちらを導入していきます。

v.8ページから、ライブラリを入手しましょう。

jsファイルは「 swiper-bundle.min.js」。

CSSファイルは「swiper-bundle.min.css」と「swiper.min.css」の2つがあり、使うのはどちらか1つですが、2つとも入手しておいてもいいと思います。

「swiper-bundle.min.css」は基本スタイルと装飾がセットになっているので、最初はこちらの方がイメージが掴みやすいと思います。

「swiper.min.css」は必要最小限のスタイルのみなので、デザインを本格的にカスタマイズする場合はこちらがおすすめ。軽量なのが魅力です。

ダウンロード（またはコピー&ペーストで保存）できたら、通常のCSSファイルやjsファイルと同様に、ページファイルから読み込んで使用します。

同じ階層に設置する場合は、以下のようなコードになります。

CSSファイルの読み込み（HTML head内）

<link rel="stylesheet" href="swiper-bundle.min.css">

jsファイルの読み込み（HTML body内）

<script src="swiper-bundle.min.js"></script>

これで、「Swiper」のダウンロードでの導入準備は完了です！

「Swiper」の導入手順
スライダーを設置する

ライブラリの読み込みが完了したら、HTMLファイルにスライダーを設置していきましょう。

基本のコードはこちらです。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="1.png" alt=""></div>
    <div class="swiper-slide"><img src="2.png" alt=""></div>
    <div class="swiper-slide"><img src="3.png" alt=""></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>

「swiper-slide」要素が実際にスライダーとなる部分です。

スライドにしたい画像ファイルなどを格納すれば準備OK。

上記のコードでは、わかりやすいように「1.png」「2.png」「3.png」というファイル名をセットしてあるので、同階層に同名の画像ファイルを設置してテストするなり、必要に応じて変更してください。

「Swiper」の導入手順
初期設定

「Swiper」を使用するには、java script で初期設定と呼ばれるセットアップを記述する必要があります。

CDNで導入した場合は新しく jsファイル を作って読み込むか、「<script></script>」で囲んでHTMLファイルに直書きしても動きます。

どちらにせよ、必ず「Swiper」本体の読み込みコードの下に設置します。

ダウンロードで導入した場合は、「Swiper」の jsファイル の本体コードの下に追記するのが分かりやすいと思います。

基本的なスライダーを設置するだけなら、以下の初期設定をコピペすればOKです。

const swiper = new Swiper('.swiper',{

	spaceBetween: 10,
	slidesPerView: 1,
	speed: 500,
	autoplay:{
		delay: 2000,
		disableOnInteraction: false,
	},
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},	
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	scrollbar: {
		el: '.swiper-scrollbar',
		draggable: true,
	},

});

ここまできたら、一旦ページをブラウザで表示させて、スライダーが動くかどうかを確認してみましょう。

問題なく動いていれば、あとはお好みでデザインなどをカスタマイズして完成です！

個人的にカスタマイズしたスライダーのコピペコードや、初期設定の内容は以下の記事で解説しているので、良ければ確認してみてくださいね。