Swiperの矢印ってどうやってカスタマイズしたらいいの？
本記事では上記のような疑問を持つ方向けにSwiperの矢印をカスタマイズする方法を解説していきます。
Swiperはベンリですが、デフォルトの矢印はダサいのでスタイルを変えたいですよね。
今回はCSSで変更する方法と画像で変更する方法の2パターンを紹介します。Swiperのカスタマイズは実務では必須なのでぜひ覚えて帰ってくださいまし！
Swiperの基本的な使い方をおさらいしたい人は、下記記事を参照してください。
Web制作初心者のためのSwiper入門【Javascript】
目次
Swiperの矢印をカスタマイズする方法
まず、デフォルトの状態から見ていきます。
See the Pen swiper arrow1 by yoshizumi1102 (@yoshizumi1102) on CodePen.
デフォルトの矢印は青色です。ちょっとでかいし見栄えが悪いですね。
ソースコード全文は下記です。コピペ用にどうぞ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"> <!-- CDN CSS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <!-- CDN JS -->
<style>
img {
max-width: 100%;
max-height: 100%;
}
.swiper {
width: 600px;
height: 350px;
max-width: 100%;
}
.swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://source.unsplash.com/N04FIfHhv_k/" alt=""></div>
<div class="swiper-slide"><img src="https://source.unsplash.com/2l0CWTpcChI/" alt=""></div>
<div class="swiper-slide"><img src="https://source.unsplash.com/U3aF7hgUSrk/" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
<script>
const swiper = new Swiper('.swiper', {
pagination: {
el: '.swiper-pagination',
},
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
},
loop: true
})
</script>
</html>CSSで矢印をカスタマイズする
まずはCSSで矢印をカスタマイズする方法から解説します。
下記のような矢印にスタイルを変更してみましょう。
See the Pen Untitled by yoshizumi1102 (@yoshizumi1102) on CodePen.
手順1：矢印の疑似要素を調整する
デフォルトのCSSは疑似要素が矢印のスタイルを表しています。この矢印はSwiperのフォント「swiper-icons」で表現されています。
一から矢印の形をCSSで作るのは面倒なので、この疑似要素の大きさや色を調整してくのが楽と思います。
疑似要素に対して下記のように指定しましょう。
.swiper-button-next::after,
.swiper-button-prev::after {
color: #fff;
font-size: 14px;
}- 矢印の大きさ→font-sizeで指定する
- 矢印の色→colorで指定する
手順2：矢印を囲う円を調整する
次に背景の円を描きます。これは矢印の要素に対して直接指定していきます。
.swiper-button-next,
.swiper-button-prev {
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
border-radius: 100%;
}疑似要素のサイズよりも幅と高さは大きく設定するようにしましょう。
See the Pen Untitled by yoshizumi1102 (@yoshizumi1102) on CodePen.
というわけでできましたでしょうか！
矢印を画像に変更する
次に矢印を画像に変更する方法を紹介していきます。
下記のような形を作ってみましょう。
See the Pen Untitled by yoshizumi1102 (@yoshizumi1102) on CodePen.
手順はかなり簡単でして、疑似要素にbackground-imageで画像を指定してあげるだけです。
まずは疑似要素にすでにあたっているSwiperのスタイルを取り除きましょう。
.swiper-button-next::after,
.swiper-button-prev::after {
content: "";
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
}contentを空にすることでデフォルトの矢印を消すことができます。
次に、戻るボタン次へボタンの各画像を指定、要素自体の大きさを指定します。
.swiper-button-next::after {
background-image: url('次へボタンの画像パス');
}
.swiper-button-prev::after {
background-image: url('前へボタンの画像パス');
}
.swiper-button-next,
.swiper-button-prev {
width: 50px;
height: 50px;
}これだけです。かんたんですね！
まとめ
というわけでSwiperの矢印をカスタマイズする方法を紹介しました。Swiperの矢印はデフォルトではデザインが微妙なので、スタイルを調整してくださいね。
それではっ！
