Swiperの矢印（swiper-button-nextとswiper-button-prev）とページネーション（swiper-pagination）のカスタマイズ

2024年9月24日

Swiperの矢印（swiper-button-nextとswiper-button-prev）とページネーションをカスタマイズする方法を紹介します。

下記にSwiperの矢印ボタンとページネーションの位置・形状を変更した見本CODE-PENを載せておきます。

See the Pen swiperページネーションと矢印のカスタマイズ by s sim (@s-sim) on CodePen.

なお、この記事はSwiperバージョン９用に書いています。最新バージョンのSwiperで表示がバグる場合にはバージョン９までダウングレードしてみて下さい。

Swiperをバージョン９にするときは、body閉じタグ直上のHTMLのScript読み込みCDNを下記のように変更して下さい。

<!--  script  -->

<!--  Swiperバージョン９用読み込みCDN  -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<!-- このサイトのスクリプト -->
<script src="./script.js"></script>

</body>

初期状態のSwiperの矢印とページネーションの位置とコードの確認

Swiper初期状態の矢印（swiper-button）とページネーション（swiper-pagination）の位置とコードは下記のCODE-PENのとおりです。デフォルトのSwiperは写真画像スライドの内側のみで、外側のベージュ色とグレー色は分かりやすくするために色を付けてあります。

See the Pen SWIPER-デフォルト状態の by s sim (@s-sim) on CodePen.

このSwiper初期状態の矢印（swiper-button）とページネーション（swiper-pagination）の位置や装飾のカスタマイズは、HTMLの構造変更とCSSの追記で実装できます。

一応、確認のために上記CODE-PENの初期状態のSWIPERのHTML構造とCSSを書き出しておきます。

初期状態のHTML

Swiperの矢印とページネーションを表示位置を含めてカスタマイズするには、HTMLの構造を変える必要があります。

初期状態での矢印（左右のボタン）とページネーションのタグの位置をご確認下さい。

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

<head>
  <!-- headタグの内容は省略 -->
  <!-- このサイトのCSS -->
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <!-- FV -->

  <div class="fv_wrapper">

    <!-- スライド -->
    <div class="fv-slide_wrapper">

      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <!-- スライド１の画像 -->
            <div class="slide-img_wrapper">
              <img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic3.jpg" alt="波紋グレー"
                class="home-fv-pc_img">
            </div>
          </div>
          <div class="swiper-slide">
            <!-- スライド２の画像 -->
            <div class="slide-img_wrapper">
              <img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic2.jpg" alt="水面ブルー"
                class="home-fv-pc_img">
            </div>
          </div>
          <div class="swiper-slide">
            <!-- スライド３の画像 -->
            <div class="slide-img_wrapper">
              <img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic1.jpg" alt="波紋グリーン"
                class="home-fv-pc_img">
            </div>
          </div>
        </div>

        <!--  swiperの左右のボタン  -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>

        <!--  swiperの画面下部のページネーションのポチポチ  -->
        <div class="swiper-pagination"></div>
      </div>

    </div>

  </div>

<!--  script  -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- このサイトのスクリプト -->
<script src="./script.js"></script>

</body>

初期状態のCSS

@charset "UTF-8";

body {
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  line-height: 1.8;
  font-size: 16px;
  background-color: rgb(57, 57, 57);
}

.fv_wrapper {
  padding: 40px;
  margin: 40px;
}

.fv-slide_wrapper{
  background-color: blanchedalmond;
  padding: 5%;
  margin: 5%;
}
/* スライド */
.home-fv-pc_img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 9;
}

初期状態のJavaScript

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
  spaceBetween: 0,
  loop: true,
  speed: 1000,
  autoplay: {
    delay: 4000,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

以下、詳しく紹介していきます。

Swiper矢印（swiper-button）のカスタマイズ

Swiperの矢印をカスタマイズするためにはHTMLの構造を変更し、CSSを追記すれば簡単にできます。

Swiperの矢印の位置と形状・色を変更した見本のCODE-PENを下に載せておきます。

See the Pen SWIPER-swiper-buttonの位置と形状を変更 by s sim (@s-sim) on CodePen.

HTMLの構造

Swiperの矢印（swiper-button）の位置も変更したい場合は、下のHTMLのようにSwiperの「class=”swiper mySwiper」のタグと兄弟関係となる位置に「class=”swiper-button-next”」「class=”swiper-button-prev”」のタグを移動させます。

つまり、Swiperの「class=”swiper mySwiper」のタグの一つ上の階層のタグ内にSwiperの矢印（swiper-button）タグを移すイメージです。

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

<head>
  <!-- headタグの内容は省略 -->
  <!-- このサイトのCSS -->
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <!-- FV -->

  <div class="fv_wrapper">
    <!-- スライド -->
    <div class="fv-slide_wrapper">

      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <!-- スライド１の画像 -->
            <div class="slide-img_wrapper">
              <img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic3.jpg" alt="波紋グレー"
                class="home-fv-pc_img">
            </div>
          </div>
          <div class="swiper-slide">
            <!-- スライド２の画像 -->
            <div class="slide-img_wrapper">
              <img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic2.jpg" alt="水面ブルー"
                class="home-fv-pc_img">
            </div>
          </div>
          <div class="swiper-slide">
            <!-- スライド３の画像 -->
            <div class="slide-img_wrapper">
              <img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic1.jpg" alt="波紋グリーン"
                class="home-fv-pc_img">
            </div>
          </div>
        </div>

        <!--  swiperの画面下部のページネーションのポチポチ  -->
        <div class="swiper-pagination"></div>
      </div>

      <!--  swiperの左右のボタン  -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

    </div>

  </div>

<!--  script  -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- このサイトのスクリプト -->
<script src="./script.js"></script>
</body>

上のコードを簡略化して分かりやすくすると次のようになります。

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

<head>
  <!-- headタグの内容は省略 -->
</head>

<body>
  <!-- FV -->

  <div class="fv_wrapper">
    <!-- スライド -->
    <div class="fv-slide_wrapper">

      <!-- Swiper -->
      <div class="swiper mySwiper">
        <!--  swiperの中身を省略  -->

        <!--  swiperのページネーション  -->
        <div class="swiper-pagination"></div>
      </div>

      <!--  swiperの左右のボタン（mySwiperタグの外側に出した！）  -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

    </div>

  </div>


<!--  scriptは省略  -->
</body>

CSSを変更

Swiper矢印（swiper-button）の位置と形状を変更するためのコードは下記のとおりです。

Swiper矢印の位置の起点となるタグ（今回は.fv-slide_wrapper）に対してposition: relative;を記述する
今回は矢印の形状は疑似要素「.swiper-button-prev::after」および「.swiper-button-next::after」で矢印画像を読み込むことにより実装
矢印の表示位置や表示サイズも上記疑似要素内で設定できる

@charset "UTF-8";

body {
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  line-height: 1.8;
  font-size: 16px;
  background-color: rgb(57, 57, 57);
}

.fv_wrapper {
  width: 100%;
  height: 100%;
}

.fv-slide_wrapper{
  position: relative; /* Swiper矢印の位置の起点とする */
  background-color: blanchedalmond;
  padding: 40px;
  margin: 40px;
}
/* スライド */
.home-fv-pc_img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* -------------------------------------------------------------------- */
/* スライド矢印のカスタマイズ */
/* -------------------------------------------------------------------- */

/* 矢印画像の高さと幅 */
.swiper-button-prev,
.swiper-button-next {
  height: 60px;
  width: 60px;
}
/* 矢印を消して画像に変更する */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  height: 60px;
  width: 60px;
  margin: auto;
}
/* 前に戻る矢印の画像パスと表示位置 */
.swiper-button-prev::after {
  background-image: url(https://shimizu-create.com/wp-content/uploads/2024/09/arrow-left.png);
  left: -20px;
  transform: translateX(-20px);
}
/* 次に進む矢印の画像パスと表示位置 */
.swiper-button-next::after {
  background-image: url(https://shimizu-create.com/wp-content/uploads/2024/09/arrow-right.png);
  right: -20px;
  transform: translateX(20px);
}

JavaScript

JavaScriptは初期状態から変更していません。

Swiperページネーションの表示位置とデザインの変更

次に、上のSwiperコードを更に改良してページネーションもカスタマイズしてみます。

下がページネーションもカスタマイズしたSwiperの見本CODE-PENです。表示とコードをご確認下さい。

See the Pen swiperページネーションと矢印のカスタマイズ by s sim (@s-sim) on CodePen.

詳しく見ていきます。

HTMLの変更点

ページネーションの位置も含めたカスタマイズを行う場合には、SwiperのHTMLタグの構造を変更します。

具体的にはSwiper矢印（swiper-button）タグよりも一つ上の階層のタグ内に、ページネーションのタグである「class=”swiper-pagination」タグを移動します。

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

<head>
  <!-- headタグの内容は省略 -->

  <!-- このサイトのCSS -->
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <!-- FV -->

  <div class="fv_wrapper">
    
    <!-- スライド -->
    <div class="fv-slide_wrapper">

      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <!-- スライド１の画像 -->
            <div class="slide-img_wrapper">
              <img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic3.jpg" alt="波紋グレー"
                class="home-fv-pc_img">
            </div>
          </div>
          <div class="swiper-slide">
            <!-- スライド２の画像 -->
            <div class="slide-img_wrapper">
              <img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic2.jpg" alt="水面ブルー"
                class="home-fv-pc_img">
            </div>
          </div>
          <div class="swiper-slide">
            <!-- スライド３の画像 -->
            <div class="slide-img_wrapper">
              <img src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic1.jpg" alt="波紋グリーン"
                class="home-fv-pc_img">
            </div>
          </div>
        </div>

      </div>

      <!--  swiperの左右のボタン  -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

    </div>

    <!--  swiperの画面下部のページネーション  -->
    <div class="swiper-pagination"></div>

  </div>


  <!--  script  -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  <!-- このサイトのスクリプト -->
  <script src="./script.js"></script>
</body>

HTML構造を分かりやすくするために簡略化したものは下記のとおりです。

<body>
  <!-- FV -->

  <div class="fv_wrapper">
    
    <!-- スライド -->
    <div class="fv-slide_wrapper">

      <!-- Swiper -->
      <div class="swiper mySwiper">
      <!--  内容は省略  -->
      </div>

      <!--  swiperの左右の矢印ボタン  -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

    </div>

    <!--  swiperの画面下部のページネーション  -->
    <div class="swiper-pagination"></div>

  </div>

CSSの書き方

以下、Swiperのページネーションをカスタマイズした時のCSS全文です。

@charset "UTF-8";

body {
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
  line-height: 1.8;
  font-size: 16px;
  background-color: rgb(57, 57, 57);
}

.fv_wrapper {

  width: 100%;
  height: 100%;
}

.fv-slide_wrapper{
  position: relative;
  background-color: blanchedalmond;
  padding: 40px;
  margin: 40px;
}
/* スライド */
.home-fv-pc_img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------- */
/* スライド矢印のカスタマイズ */
/* ---------------------------------------------------- */

/* 矢印画像の高さと幅 */
.swiper-button-prev,
.swiper-button-next {
  height: 60px;
  width: 60px;
}
/* 矢印を消して画像に変更する */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  height: 60px;
  width: 60px;
  margin: auto;
}
/* 前に戻る矢印の画像パスと表示位置 */
.swiper-button-prev::after {
  background-image: url(https://shimizu-create.com/wp-content/uploads/2024/09/arrow-left.png);
  left: -20px;
  transform: translateX(-20px);
}
/* 次に進む矢印の画像パスと表示位置 */
.swiper-button-next::after {
  background-image: url(https://shimizu-create.com/wp-content/uploads/2024/09/arrow-right.png);
  right: -20px;
  transform: translateX(20px);
}

/* ---------------------------------------------------- */
/* ページネーションのカスタマイズ */
/* ---------------------------------------------------- */

/* ページネーション位置 */
.swiper-pagination {
  position: relative !important;
  margin-top: 0px;
}
/* ページネーション色とサイズ */
.swiper-pagination > .swiper-pagination-bullet {
  background-color: #4d3131;
  height: 23px;
  width: 23px;
  border: 1px solid #fff;
  margin: 20px;
  opacity: 1;
}
/* ページネーションがアクティブ時の色 */
.swiper-pagination > .swiper-pagination-bullet-active {
  background-color: brown;
}
/* ページネーション間隔 */
.fv_wrapper .swiper-pagination .swiper-pagination-bullet {
  margin: 12px 10px 12px;
}

上のCSSにはSwiper矢印ボタンやその他のCSSも含まれているため、純粋にSwiperページネーションのカスタマイズのみのCSSを抜粋すると下のようになります。

/* ---------------------------------------------------- */
/* ページネーションのカスタマイズ */
/* ---------------------------------------------------- */

/* ページネーション表示位置 */
.swiper-pagination {
  position: relative !important;
  margin-top: 0px;
}
/* ページネーション色とサイズ */
.swiper-pagination > .swiper-pagination-bullet {
  background-color: #4d3131;
  height: 23px;
  width: 23px;
  border: 1px solid #fff;
  margin: 20px;
  opacity: 1;
}
/* ページネーションがアクティブ時の色 */
.swiper-pagination > .swiper-pagination-bullet-active {
  background-color: brown;
}
/* ページネーション間隔 */
.fv_wrapper .swiper-pagination .swiper-pagination-bullet {
  margin: 12px 10px 12px;
}

解説は上のコードのコメントのとおりですが、一箇所だけケースバイケースで変更する必要があります。

それは、ページネーション間隔を指定するセレクターです。

上の例では、「.fv_wrapper .swiper-pagination .swiper-pagination-bullet」なっています。

このうち、「.swiper-pagination .swiper-pagination-bullet」は共通ですが、「.fv_wrapper 」はケースバイケースで変える必要があります。

「.fv_wrapper 」の部分は、「class=”swiper-pagination”」タグの直上の親タグのClass属性に変更して下さい。

JavaScript

初期状態から変更していません。

SIMS-CODE

【Swiper】設定・使い方とオプション・カスタマイズの方法【JavaScript】 | SIMS-CODE Swiperの実案件で頻出パターンを紹介します。基本設定・使い方とオプション・カスタマイズの方法についてCodePenを使いながら、html, CSS, JavaScriptの書き方を解説。fade…

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

SIM

■清水WEB制作代表
■コーディング：WordPress（オリジナルテーマ制作等）・HTML・Sass・FLOCSS・JavaScript（jQuery）等
■集客力：YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成：博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術：Amazon Kindle出版で、写真集・撮影編集解説書を５冊好評発売中です