時給単価UP【3大特典付き】
コーディングテクニック集100選⋙

【解説】Swiperの矢印カスタマイズ方法【前へ・次へ】

記事内に広告を含みます

パソ君
パソ君

・Swiperの矢印ってカスタマイズできる？

こんな疑問にお答えします。

スライダーを作るとき、矢印のデザインがデフォルトではない場合ありますよね。

三角形だったり画像を使ったり。

実はSwiperなら、簡単に矢印のカスタマイズが可能です。

ジト
ジト

すぐにできるよ！

ということで、この記事では「Swiperの矢印カスタマイズ方法」について解説していきます！

swiper自体の作り方については下記記事を参考に↓

【簡単】Swiperの使い方｜初心者向けに解説【オプション】
この記事でわかること

・Swiperの矢印カスタマイズ方法【三角形】
・Swiperの矢印カスタマイズ方法【画像】

【三角形】Swiperの矢印カスタマイズ方法【前へ・次へ】

まず三角形を使った矢印のカスタマイズ方法を紹介していきます。

そんなサンプルがこちら↓

See the Pen swiper　矢印カスタマイズ➀ by jito-coder (@jito-coder) on CodePen.

矢印が紺色の三角形になっていますよね。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.swiper-button-prev::after {
    border-right: 25px solid #000066;
    border-left: 0;
}

.swiper-button-next::after {
    border-left: 25px solid #000066;
    border-right: 0;
}
window.onload = function() {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

コードの中で重要な点がこちら↓

  • 通常通りのスライダーを実装
  • 疑似要素の「content」を空白に
  • 疑似要素にて三角形を実装

順に解説してきます。

➀：通常通りのスライダーを実装

まず通常通りのスライダーを実装するHTMLを組み立てます。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

ここに関してはいつも通りでOKです。

➁：疑似要素の「content」を空白に

次にデフォルトで表示されている矢印を消します。

下記画像のように「content」に、「prev」と「next」が入っているのでCSSにて空白に指定しましょう。

.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
}

➂：疑似要素にて三角形を実装

あとは三角形用のCSSを疑似要素に指定してあげれば完成です。

今回は例として下記のようなコードを記述しました。

.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.swiper-button-prev::after {
    border-right: 25px solid #000066;
    border-left: 0;
}

.swiper-button-next::after {
    border-left: 25px solid #000066;
    border-right: 0;
}

ここはデザインに応じて調整しましょう！

【画像】Swiperの矢印カスタマイズ方法【前へ・次へ】

続いて矢印を画像にてカスタマイズする方法を紹介していきます。

そんなサンプルがこちら↓

See the Pen swiper　矢印カスタマイズ➁ by jito-coder (@jito-coder) on CodePen.

画像にて反映されていますよね。

といってもコードは先ほどとほぼ同じで、変えたのがCSSのみです。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
.swiper-button-prev,
.swiper-button-next {
    width: 70px;
    height: 30px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.swiper-button-prev::after {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/arrow_s2.png);
}

.swiper-button-next::after {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/arrow_s.png);
}
window.onload = function() {
    const swiper = new Swiper(".swiper", {
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

コードの中で重要な点がこちら↓

  • 矢印の高さと横幅を指定
  • 疑似要素を使って背景画像を指定

順に解説してきます。

➀：矢印の高さと横幅を指定

まず「前」と「次」の矢印の高さと横幅を指定してあげましょう。

これで画像の大きさを調整することができます。

.swiper-button-prev,
.swiper-button-next {
    width: 70px;
    height: 30px;
}

今回は横幅70px、高さ30pxと指定しました。デザインに合わせて調整しましょう。

➁：疑似要素を使って背景画像を指定

あとは疑似要素に対して、背景画像を指定するだけです。

先ほどと同様に、「content」の中身を空白に。

そしてbackgroundプロパティを用いて、画像を反映してあげましょう。

.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.swiper-button-prev::after {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/arrow_s2.png);
}

.swiper-button-next::after {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/arrow_s.png);
}

これで画像を用いて、矢印をカスタマイズすることができました！

ちなみに矢印を枠外に出したい方は、下記記事を参考に↓

【解決】Swiperで矢印とドットを外に出す方法【サンプルあり】

【解説】Swiperの矢印カスタマイズ方法【前へ・次へ】：まとめ

  • 疑似要素の「content」を空白に
  • 疑似要素を用いて「三角形を作る」or「背景画像を指定」
ジト
ジト

Swiperの矢印をカスタマイズする時はためしてみてね！

コメントを残す

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

CAPTCHA


前の記事

【解説】Swiperで左右が少し見切れるスライダー【真ん中だけ…

次の記事

【Swiper】ドット／ページネーションのカスタマイズ方法【画…