Swiper Web制作 スライダー

【Swiper】前へ次への矢印をカスタマイズする方法(画像変更も紹介)

Swiperの矢印ってカスタマイズ出来ない?

Swiperは前後のスライドへの矢印を表示出来ますが、この矢印をデフォルトのデザインではなく、カスタマイズしたい時もあると思います。

今回はこの矢印をカスタマイズする方法を解説していきます。

Swiperの基本的な使い方についてはこちらの記事を参照下さい。

あわせて読みたい
【jQuery不要】スライダープラグイン Swiper.jsの使い方
【2023年最新Ver9】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説

続きを見る

またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。

あわせて読みたい
【Swiper】カスタマイズ用オプションまとめ一覧
【Swiper】カスタマイズ用オプションまとめ一覧

続きを見る

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1080部突破!レビュー550件!

Swiperの前へ次への矢印をカスタマイズする方法

矢印のカスタマイズにはCSSで調整する方法と、画像を使う方法があります。

まずは基本となるスライダーはこちらになります。

See the Pen
Swiper(矢印、ドットインジケーター)
by junpei (@junpei-sugiyama)
on CodePen.

デフォルトだと青色ですね。

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

 

CSSでカスタマイズ

まずはCSSで三角を作ってみます。

こちらが完成形です。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

HTMLとJavaScriptは基本形と同じなので、CSSだけ見てみます。

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  bottom: 0;
  content: "";
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
  border-bottom: 20px solid transparent;
  border-right: 30px solid #ff4500;
  border-top: 20px solid transparent;
}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
  border-bottom: 20px solid transparent;
  border-left: 30px solid #ff4500;
  border-top: 20px solid transparent;
}
/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

デフォルトでは前へは content: "prev"; で、次へは content: "next"; となっています。

これを content: ""; にして中身を消します。

あとは擬似要素で三角形を作るだけです。

三角形を作る方法は以下の記事を参照下さい。

あわせて読みたい
【サンプル付き】CSSで三角形を作る2つの方法(border、clip-path使用)
【サンプル付き】CSSで三角形を作る2つの方法(clip-path、border使用)

続きを見る

 

画像でカスタマイズ

次は矢印を画像にしてみたいと思います。

こちらが完成形です。

See the Pen
Swiper(矢印カスタマイズ:色を変える)
by junpei (@junpei-sugiyama)
on CodePen.

基本的な考え方はCSSで三角を作った時と同じです。

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 50px;
  width: 50px;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
  background-image: url(前への画像パス);
}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
  background-image: url(次への画像パス);
}
/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

注意ポイント

擬似要素の親である.swiper-button-prev.swiper-button-nextwidthheightで幅と高さを設定しないと、画像のサイズ調整が出来ません。

以上になります。

スライダーの矢印はデフォルトで使う事は少ないと思うので、ここでデザイン通りの矢印に実装出来るようにしておきましょう。

関連記事slick記事一覧
関連記事Swiper記事一覧

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

-Swiper, Web制作, スライダー