【簡単】Swiperの矢印を小さくしたりアイコンや形を変えてカスタマイズする方法まとめ

2024.06.16

コードのこと

Swiperのボタンをスタイリングしてサイトに合った雰囲気の矢印ボタンを設定しよう！

今回はCSSでボタンのスタイルを変える方法をお伝えします！

1 デフォルトのSwiperの矢印ボタン
2 矢印の表示を←と→に変更し、背景色も設定する
3 Swiperの矢印をFontAwesomeのアイコンにする＆丸いボタンのスタイルにする
4 Swiperの矢印カスタマイズまとめ

デフォルトのSwiperの矢印ボタン

まずは基本のSwiperで矢印ボタンを表示させましょう。

HTML

<div class="swiper-container">
    <!-- Swiperのラッパー。スライドを含む -->
    <div class="swiper-wrapper">
        <!-- 各スライド -->
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat04.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat05.webp" alt="" loading="lazy"></div>
    </div>
    <!-- ナビゲーションボタン（次へ） -->
    <div class="swiper-button-next"></div>
    <!-- ナビゲーションボタン（前へ） -->
    <div class="swiper-button-prev"></div>
</div>

ナビゲーションボタンの.swiper-button-nextと.swiper-button-prevを設置しましょう！

JavaScript

// Swiperを初期化する
const swiper = new Swiper('.swiper-container', {
    // スライダーをループさせる設定
    loop: true,
    slidesPerView: 3,
    // ナビゲーションボタンの設定
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

CSS

img {/* 画像のスタイル調整 */
  width: 100%;
  height: auto;
}
.swiper-container{
  position: relative;/* ボタンがabsoluteなので、位置の基準値を設定する */
  overflow: hidden;/* はみ出した部分を隠す */
}

Swiperのデフォルトの矢印をカスタマイズしてみる

検証ツールで調べてみると右のボタンのスタイル調整を行うには.swiper-button-next::afterという要素にCSSで調整すればよいことが分かりました。（※左のボタンは.swiper-button-prev::after）

色とサイズを変えるには以下のコードを追加します。

.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 1.5rem;
  color: #000;
}

↓矢印のスタイルが変更されました！

矢印の表示を←と→に変更し、背景色も設定する

矢印をデフォルトのものから変更し、ボタン風に見せるため背景色も設定しています。

実際にカスタマイズしたSwiperの表示

HTML

<div class="swiper-container2">
    <!-- Swiperのラッパー。スライドを含む -->
    <div class="swiper-wrapper">
        <!-- 各スライド -->
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat04.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat05.webp" alt="" loading="lazy"></div>
    </div>
    <!-- ナビゲーションボタン（次へ） -->
    <div class="swiper-button-next"></div>
    <!-- ナビゲーションボタン（前へ） -->
    <div class="swiper-button-prev"></div>
</div>

JavaScript

// Swiperを初期化する
const swiper = new Swiper('.swiper-container2', {
    // スライダーをループさせる設定
    loop: true,
    slidesPerView: 3,
    // ナビゲーションボタンの設定
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

CSS

.swiper-container2{
  position: relative;
  overflow: hidden;
}
 .swiper-container2 .swiper-button-next,.swiper-container2 .swiper-button-prev{
    background-color: #000;/* ボタンの背景色 */
    width: 50px;
    height: 50px;
}
.swiper-container2 .swiper-button-next{
    right: 0;/* ボタンを右端にくっつける */
}
.swiper-container2 .swiper-button-prev{
    left: 0;/* ボタンを左端にくっつける */
}
.swiper-container2 .swiper-button-next::after{
    content: '→';/* ボタンの矢印変更 */
    color: #fff;
    font-size: 1.5rem;
}
.swiper-container2 .swiper-button-prev::after{
    content: '←';/* ボタンの矢印変更 */
    color: #fff;
    font-size: 1.5rem;
}

このSwiperボタンは実務でも似たようなものをよく使います。基本として使いやすいスタイルかと思います。

Swiperの矢印をFontAwesomeのアイコンにする＆丸いボタンのスタイルにする

次はよく使われるFontAwesomeのアイコンを使ってボタンをスタイリングしていきます。
ボタンでよく使われる丸いスタイルにもしていきます。

FontAwesomeの読み込み

FontAwesomeのアイコンを使用するために<head>タグ内でFontAwesomeの基本ファイルをまずは読み込んでください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

HTML

<div class="swiper-container3">
    <!-- Swiperのラッパー。スライドを含む -->
    <div class="swiper-wrapper">
        <!-- 各スライド -->
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat04.webp" alt="" loading="lazy"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat05.webp" alt="" loading="lazy"></div>
    </div>
    <!-- ナビゲーションボタン（次へ） -->
    <div class="swiper-button-next"></div>
    <!-- ナビゲーションボタン（前へ） -->
    <div class="swiper-button-prev"></div>
</div>

JavaScript

// Swiperを初期化する
const swiper = new Swiper('.swiper-container3', {
    // スライダーをループさせる設定
    loop: true,
    slidesPerView: 3,
    // ナビゲーションボタンの設定
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

CSS

.swiper-container3{
  position: relative;
  overflow: hidden;
}
.swiper-container3 .swiper-button-next,.swiper-container3 .swiper-button-prev{
    background-color: #991010;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.swiper-container3 .swiper-button-next::after, .swiper-container3 .swiper-button-prev::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #fff;
    font-size: 1.5rem;
}

.swiper-container3 .swiper-button-next::after {
    content: '\f054'; /* FontAwesomeの右矢印 */
}

.swiper-container3 .swiper-button-prev::after {
    content: '\f053'; /* FontAwesomeの左矢印 */
}

Swiperの矢印カスタマイズまとめ

今日のポイントを振り返ってみましょう！

矢印付きの基本的なスライダーを実装する方法
矢印のサイズを変更して小さくする方法
矢印の色を変更する方法
矢印の後ろに四角や丸い背景を付ける方法
矢印の形を変更してアイコンを使用する方法

いかがでしたか？Swiperの矢印カスタマイズは簡単で、少しの工夫で大きく見た目を変えることができます。ぜひ試してみてくださいね。

ブログ一覧へ