【初心者向け】Swiperの基本的な使い方

RELEASE / 2024.4.23 UPDATE / 2024.04.20

JavaScript

Swiper

使い方

初心者向け

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WEBサイト制作で欠かすことの出来ないスライドショー。その中でも人気のある「Swiper」。
簡単にスライドショーを作ることが出来、かつ高性能のライブラリです。
今回の記事では、初めてこの「Swiper」を使うという人のために、「Swiper」の基本的な使い方をご紹介したいと思います。

この記事の目次を表示

1 Swiperとは
2 Swiperの基本的な使い方
3 基本的な機能追加
4 まとめ

Swiperとは

「Swiper」とはスライドショーを簡単に実装することが出来るJavaScriptのプラグインです。
他のスライドショーを実装出来る「slick」や「bxSlider」は使用するためにプラグインの他に、「jQuery」の読み込みが必要になりますが、「Swiper」は「jQuery」を必要としないため、動作が軽量になっています。

Swiperの基本的な使い方

「Swiper」を使うためにCDN経由でライブラリを読み込みます。もしくは「Swiper」関連のCSSとjsをダウンロードして直接読み込みます。
CDN経由で読み込む場合は2024年4月現在はこちらのCSSとjsファイルを読み込みます。

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

「Swiper」を使うためのHTMLはこちら。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide -slide1"></div>
    <div class="swiper-slide -slide2"></div>
    <div class="swiper-slide -slide3"></div>
  </div>
</div>

他の有名スライダーの「slick」や「bxSlider」はCSSのクラス名やHTML構造は比較的自由ですが、「Swiper」の場合は、最低限の構造とクラス名が決まっています。
「Swiper」を使うためにはclass="swiper"、class="swiper-wrapper"、class="swiper-slide"、最低限この構成が必要になります。

そして「Swiper」を使うためのjsはこちら。

const swiper = new swiper('.swiper');

「Swiper」を使うためのCSSはこちら。ただし、CSSは各デザインに合わせてお好みでの調整となります。

*{
  margin: 0;
  padding: 0;
}
.swiper-slide{
  width: 100%;
  height: 100vh;
}
.swiper-slide.-slide1{
  background: #dc5a45;
}
.swiper-slide.-slide2{
  background: #e8c72e;
}
.swiper-slide.-slide3{
  background: #3d8582;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

「Swiper」を動かすために必要なファイルの読み込み、HTMLやjsの作成が正しく出来ていれば動作します。

基本的な機能追加

ここからは基本的な機能を追加していく方法をご紹介したいと思います。

ページャーを追加する

「Swiper」でページャーを追加するためのHTMLはこちら。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide -slide1"></div>
    <div class="swiper-slide -slide2"></div>
    <div class="swiper-slide -slide3"></div>
  </div>
  <div class="swiper-pagination"></div><!-- ページャーを追加 -->
</div>

class="swiper-pagination"は任意のクラス名ですが、class="swiper-pagination"とすることで「Swiper」のデフォルトスタイルが反映されるようになります。
ベースとなる部分はデフォルトスタイルを使い、色や微妙な配置のみ任意で調整することをお勧めします。

「Swiper」でページャーを追加するためのjsはこちら。

const swiper = new Swiper('.swiper',{
  // ページャーを追加
  pagination: {
    el: '.swiper-pagination',
  },
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

さらにページャーをクリックしてスライドが連動して動くようにするには以下のようにjsにclickable: trueを追加します。

const swiper = new Swiper('.swiper',{
  // ページャーを追加
  pagination: {
    el: '.swiper-pagination',
    clickable: true // クリックでスライドを連動させる
  },
});

ページャーをクリックすると連動してスライドが動くようになります。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

「前へ」「次へ」ボタンを追加する

「前へ」「次へ」ボタンを追加するためのHTMLはこちら。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide -slide1"></div>
    <div class="swiper-slide -slide2"></div>
    <div class="swiper-slide -slide3"></div>
  </div>
  <div class="swiper-button-prev"></div><!-- 「前へ」ボタンを追加 -->
  <div class="swiper-button-next"></div><!-- 「次へ」ボタンを追加 -->
</div>

class="swiper-button-prev"とclass="swiper-button-next"はそれぞれ任意のクラス名ですが、class="swiper-button-prev"とclass="swiper-button-next"とすることで「Swiper」のデフォルトスタイルが反映されるようになります。
ベースとなる部分はデフォルトスタイルを使い、色や微妙な配置のみ任意で調整することをお勧めします。

「前へ」「次へ」ボタンを追加するためのjsはこちら。

const swiper = new Swiper('.swiper',{
  // 「前へ」「次へ」ボタンを追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ページャー、「前へ」「次へ」ボタンを追加する

この記事でご紹介したページャー、「前へ」「次へ」ボタン全てを追加するためのHTMLはこちら。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide -slide1"></div>
    <div class="swiper-slide -slide2"></div>
    <div class="swiper-slide -slide3"></div>
  </div>
  <div class="swiper-pagination"></div><!-- ページャーを追加 -->
  <div class="swiper-button-prev"></div><!-- 「前へ」ボタンを追加 -->
  <div class="swiper-button-next"></div><!-- 「次へ」ボタンを追加 -->
</div>

ページャー、「前へ」「次へ」ボタン全てを追加するためのjsはこちら。

const swiper = new Swiper('.swiper',{
  // ページャーを追加
  pagination: {
    el: '.swiper-pagination',
    clickable: true // クリックでスライドを連動させる
  },
  // 「前へ」「次へ」ボタンを追加
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.