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」を導入します。

HTML

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

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

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

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

HTML

<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内)

HTML

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

jsファイルの読み込み(HTML body内)

HTML

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

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

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

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

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

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です。

js

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, },
});

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

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

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

SHARE

このサイトについて

「Web Work Plus」はWEB制作・ビジネスのちょい足し情報メデイアです。ちょっとしたハテナをプラスに変える役立つ備忘録を発信中!