Swiperのスライド矢印のデザインを変更する

2023 4/17

2023/04/17 2023/04/17

スポンサードリンク

Swiperの矢印デザインを変更するには

矢印にかかれているCSSを上書きして違うデザインにする
最初からある矢印はafter疑似要素のCSSで作られているので、この疑似要素を非表示にして新しい画像を背景画像として読み込ませる。もしくは疑似要素を非表示にして画像のhtmlを.swiper-button-next .swiper-button-prevの間に挟む

この2通りあります。

矢印を出すSwiperの書き方

SwiperのCSS,JSを読み込ませたらhtml上にjavascriptの記述を追加します。このときにnavigationの指定をしてあげます。

<!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>

var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      effect: "fade",
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });

navigationの部分にある

nextElが右側の次の矢印
prevElが左側の戻る矢印

クラス名を変更したい場合はnextEl,prevElで指定しているクラスを書き換えます。どのSwiperテンプレートも.swiper-button-next .swiper-button-prevとなっていて、Swiperの要素なんだなとわかるので編集時にクラス名は変えずにこのまま使ったほうが無難です。

Swiper書き換え用のCSSはSwiperのCSSよりも後述すること

OK
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<link rel="stylesheet" href="/css/style.css" />

NG
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

色だけ変えたい

既存の矢印の色だけ変える場合はCSSで指定します。

.swiper-button-prev,
.swiper-button-next {
   /*矢印が赤くなる*/
  color: #ff0000;
}

画像で置き換え

最初からある矢印はafter疑似要素のCSSで作られているので、この疑似要素をcontent “”で非表示にします。

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

画像タグを.swiper-button-next .swiper-button-prevに入れます。

      <!-- ナビボタン -->
      <div class="swiper-button-prev">
        <img src="/images/arrow-l.png" alt="左矢印">
      </div>

      <div class="swiper-button-next">
        <img src="/images/arrow-r.png" alt="右矢印">
      </div>