Swiperは前後のスライドへの矢印を表示出来ますが、この矢印をデフォルトのデザインではなく、カスタマイズしたい時もあると思います。
今回はこの矢印をカスタマイズする方法を解説していきます。
Swiperの基本的な使い方についてはこちらの記事を参照下さい。
-
【2024年最新Ver11】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説
続きを見る
またSwiperには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
-
【Swiper】カスタマイズ用オプションまとめ一覧
続きを見る
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
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つの方法(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スライダーで前後の矢印をカスタマイズする方法を解説しました。
スライダーの矢印はデフォルトで使う事は少ないと思うので、ここでデザイン通りの矢印に実装出来るようにしておきましょう。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧
