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

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

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

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

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

スライダー実装を手軽に!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を動作するためのコンテナ
  • 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引数のオブジェクトはオプションを指定できるものです。

paginationnavigationのオプションを設定しました。

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

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

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,
});
2枚表示2枚スクロールの例

まとめ

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

記事は以上です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA