Web制作初心者のためのSwiper入門【Javascript】

Web制作でよくあるのがスライダーカルーセルのUIです。　スライダーを独自で実装するは非常に大変なので、殆どの場合はライブラリを使います。

数多あるライブラリの中でも有名なのが「Swiper」です。

今回は、初めてSwiperを使う人のために、Swiperの使い方をまとめました。本記事のコードをそのままコピペすれば実際の動きが体感できると思うのでSwiperことはじめにぜひどうぞ！

Swiperと同じくスライダーUIのライブラリ「Slick」を知りたい方は下記をどうぞ！

2023年3月23日スライダー実装を手軽に！jQueryライブラリ「slick」の使い方まとめ

Swiperとは

Swiperは、スライダーカルーセルUIをお手軽に実装できるJavascriptライブラリです。jQueryを必要とする「Slick」に比べて、SwiperはjQueryを必要としないのが特徴です。

スライダー系のライブラリ（プラグイン）ならかなり有名で、利用者も多いので情報量も豊富です。

SwiperはSlickと何が違うの？

SwiperはSlickと何が違うの？SlickでいいならSlickでよくね？

大きな違いは、jQueryに依存しないという点です。

slickはjQueryのライブラリのため、利用するにはjQueryを読み込んでいることが前提です。その点、Swiperは純粋なJavascriptで構成されているため、わざわざjQueryを読み込ませる必要がありません。

Slickについてはこちらの記事をどうぞ。

Swiperの導入手順

Swiperを読み込む

まずはSwiperを使うために必要なファイルを読み込ませる必要があります。Swiperの導入方法は以下の3つがあります。

npmインストール
CDN読み込み
ファイルをダウンロード

CDNが楽ちんです。

今回はCDNで進めていきましょう！下記をhead内で読み込ませてください。

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"> <!-- CDN CSS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <!-- CDN JS -->

※2023年3月現在のCDNは上記です。最新版は公式のこちらから確認してください。

ベースとなるHTML/CSSを記述

では、Swiperを動かすためのHTMLファイルを作成していきましょう。

下記コードをまるっと記述してください。

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

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"> <!-- CDN CSS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <!-- CDN JS -->
  <link rel="stylesheet" href="./style.css"> <!-- 独自CSSの読み込み -->
</head>

<body>
  <div class="swiper">
    <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>
</body>
<script src="./index.js"></script> <!-- 独自JSの読み込み -->

</html>

これがSwiperを動かすための基本的な構造です。

swiper：swiperを動作するためのコンテナ
swiper-wrapper：スワイプしたい要素を内包するラップ
swiper-slide：スワイプする要素

では動かしていきたいのですが、そのままだとスタイルが崩れるのでCSSも記述しておきます。

CSS

.swiper {
  width: 600px;
  height: 350px;
  max-width: 100%;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 350px;
  background: #f00;
}
.swiper-slide:nth-child(1) {
  background: yellow;
}
.swiper-slide:nth-child(2) {
  background: skyblue;
}

Javascriptの記述

<body>直下で読み込ませているindex.jsファイルを作成し、下記コードを記述します。

const swiper = new Swiper('.swiper', {});

Swiperの利用には、new Swiperというインスタンスを作成します。構文は以下の通り

const swiper = new Swiper(‘スワイプする要素の先祖’, {});

さきほどHTMLで記述した.swiperクラスが今回の先祖要素になるので、第一引数には.swiperを指定しています。

現在の表示は下記のようになっているはずです。

See the Pen Untitled by yoshizumi1102 (@yoshizumi1102) on CodePen.

横にスワイプすると、スライダーが動作していることがわかると思います。

しかし、これだけだと矢印などがないので分かりづらいですね。次に矢印とドットをつけていきましょう。

矢印とドットをつける

矢印とドットをつけるには、HTMLとJavascriptに追記します。

HTML

  <div class="swiper">
    <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>

3つの要素を追加しました。

swiper-pagination：スライダーのドットに当たる部分
swiper-button-prev：前のスライドに戻るボタン
seiper-button-next：次のスライドへボタン

追加した要素をJavascriptで設定してあげます。

Javascript

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',　<!-- ドットにする要素の指定 -->
  },
  navigation: {
    prevEl: '.swiper-button-prev', <!-- 前へ戻るボタンの要素指定  -->
    nextEl: '.swiper-button-next' <!-- 次へボタンの要素指定  -->
  }
});

第2引数のオブジェクトはオプションを指定できるものです。

paginationとnavigationのオプションを設定しました。

各プロパティには、ドットに指定したい要素、矢印に指定したい要素が入ります。

この状態でどのように表示されるか見てみましょう。

See the Pen Untitled by yoshizumi1102 (@yoshizumi1102) on CodePen.

矢印とドットが表示され、きちんと動作しているのがわかると思います。

よく使うSwiperのオプション

ここまではめちゃくちゃシンプルな実装例をご紹介しました。Swiperには様々なオプションが用意されているのでよく使うオプションを一部紹介します。

自動再生・ループ系

autoPlay

See the Pen Untitled by yoshizumi1102 (@yoshizumi1102) on CodePen.

autoplayオプションはスライダーを自動再生にします。

autoplayのプロパティは様々ですが、上記例で設定しているdelayはアニメーションのスピードです。その他は下記参照

パラメータ	説明	初期値
delay	遷移の遅延秒数	3000
disableOnInteraction	ユーザーが操作したあと自動再生を無効にするかの設定	true
pauseOnMouseEnter	有効にすると、ポインターが Swiper コンテナーに入るときに自動再生が一時停止される	false
reverseDirection	逆方向の自動再生を有効にする	false

スライド制御系（速さ・切り替わりアニメーション）

effect

effectオプションはスライド時のアニメーションを設定することができます。下記はフェードに指定したときの例。

const swiper = new Swiper('.swiper', {
  effect: "fade",
  fadeEffect: {
    crossFade: true
  },
});

speed

スライド遷移の速さを指定できます。下記はspeedを2000(ms）に設定した例です。

const swiper = new Swiper('.swiper', {
  speed: 2000,
});

スライド自体の操作

slidesPerView

スライドの表示枚数を設定します。下記はslidesPerViewを2に設定した例。

const swiper = new Swiper('.swiper', {
  slidesPerView: 2,
});

slidesPerGroup

一度にスライドする枚数を指定します。

const swiper = new Swiper('.swiper', {
  slidesPerGroup: 2,
});

まとめ

というわけでSwiperの基本的な使い方でした。SwiperはWeb制作においてよく使うJavascriptプラグインです。ぜひ使い方を覚えて普段のWeb制作に生かしてみてはいかがでしょうか。

記事は以上です。

Swiperとは

SwiperはSlickと何が違うの？

Swiperの導入手順

Swiperを読み込む

ベースとなるHTML/CSSを記述

CSS

Javascriptの記述

矢印とドットをつける

HTML

Javascript

よく使うSwiperのオプション

自動再生・ループ系

autoPlay

スライド制御系（速さ・切り替わりアニメーション）

effect

speed

スライド自体の操作

slidesPerView

slidesPerGroup

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル