【Swiper】前後のスライド矢印のカスタマイズ方法

Swiperでデフォルトで用意された前後のスライド矢印をカスタマイズして変更する方法をご紹介します。

なお基本的なSwiperそのものの実装方法についてはこちらの記事を参照下さい。

【2022最新】スライダープラグイン Swiper.jsの使い方

前後のスライド矢印をカスタマイズする方法

カスタマイズ方法は

• CSSで独自の矢印を作る
• 矢印の背景画像を使う

の２種類の方法をご紹介します。

まずはデフォルトのスライド矢印です。

See the Pen Untitled by Takuma (@takushin0202) on CodePen.

デフォルトの矢印はやや見えづらい印象ですね。

ここからこの矢印のカスタマイズをしていきます。

CSSで独自の矢印を作る

最初はCSSで独自の矢印を作ってカスタマイズする方法です。

See the Pen swiper-arrow-css-customized by Takuma (@takushin0202) on CodePen.

HTMLとJSは同じなのでSCSSのみ説明します。

/* 共通部分 */
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;

  &:after {
    position: absolute;
    content: ""; /* 空指定してデフォルトの矢印を消す */
    width: 0; 
    height: 0;
    border-style: solid;
    top: -50%;
  }
}

/* 次へ矢印をカスタマイズ */
.swiper-button-next {
  right: 25px;

  &::after {
    border-width: 16px 0 16px 20px;
    border-color: transparent transparent transparent #fff;
    left: 100%;
  }
}

/* 前へ矢印をカスタマイズ */
.swiper-button-prev {
  left: 25px;

  &::after {
    border-width: 16px 20px 16px 0;
    border-color: transparent #fff transparent transparent;
    right: 100%;
  }
}

.swiper-slide img {
  width: 100%;
  height: auto;
}

ここでのポイントとしてはcontentの中身を空（””）に指定していることです。

デフォルトではcontent:”next”;、content:”prev”;と入っており、これによりデフォルトの矢印が表示されているため、空指定で上書きしてあげることでデフォルトの矢印を消しています。

矢印の形は任意なので、あとは擬似要素などで作った矢印を置いてあげればいいだけです。

擬似要素で作る矢印についてはこちらの記事（現在執筆中）を参照下さい。

矢印の背景画像を使う

次は矢印の背景画像を使う方法です。

See the Pen swiper-arrow-bg-customized by Takuma (@takushin0202) on CodePen.

.swiper-button-next,
.swiper-button-prev {
  position: absolute;

  &:after {
    content: "";
    position: absolute;
    width: 30px; /* 背景画像の幅を必ず指定 */
    height: 30px; /* 背景画像の高さを必ず指定 */
    top: 50%;
    transform: translateY(-50%);
  }
}

.swiper-button-next {
  right: 25px;
  
/* 次へ矢印の背景画像 */
  &::after {
background: transparent url(画像パス) no-repeat center / contain;
  }
}

.swiper-button-prev {
  left: 25px;

 /* 前へ矢印の背景画像 */
  &::after {
background: transparent url(画像パス) no-repeat center / contain;
  }
}

.swiper-slide img {
  width: 100%;
  height: auto;
}

ここでのポイントとしては、背景画像そのものに必ず幅と高さを指定することです。

背景画像そのものは幅と高さを持たないので、もし幅と高さの指定がないと「0」と表示され、画像が適切に表示されません。

背景画像そのものに幅と高さが指定さえされていれば、仮に擬似要素の親要素（今回だと.swiper-button-nextや.swiper-button-prev）の幅と高さが0でも画像は表示されます。

以上swiperの前後の矢印をカスタマイズする方法のご紹介でした。