Bootstrap4.5のCarousel Sliderの矢印の色は基本白ですが、これを別な色にしたい時のメモ。
まず、bootstrap.cssのどこの箇所に書かれているかというと…
bootstrap.css 6568行目付近
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}
色の部分は、
fill='%23fff'
と書かれてる部分。
%23が#にあたりますので、CSSで書かれる#fffになっています。
ですので、黒(#000)にしたい場合は
fill='%23000'
と書けばOKです。
Bootstrap4.5でカルーセルスライダーの色を変更するには
お約束通り直接bootstrap.cssを修正するのは避けて、外部CSSにするか、
変更したいHTMLの
<head>
</head>
の間に以下のスタイルシートを追加すれば色が変わります。
css
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}
上記のスタイルシートは、#000にしましたが、お好みで他の色に変えてみてください。
Bootstrap5でのカルーセルスライダーの色変更
なお、Bootstrap5の場合は指定するだけで、コントロール、インジケーター、キャプションを暗くできる「carousel-dark」というclassがあるので、スタイルシートを追加しなくても、クラス指定だけでよいです。
Bootstrap5では、こんな感じでclassを追加します。
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
詳しくは以下のドキュメント参照してみてください。
Carousel (カルーセル) · Bootstrap v5.0
BootstrapもBootstrap5になってしばらく経つけど、既存サイトなどではBootstrap4.5を修正することが多々あります。
頻繁にリニューアルする訳にもいかないので、まだまだ修正する機会もありそうです。
コメント
トラックバックURL