bootstrap4 画像のスライド カルーセルをカスタマイズ

Question

bootstrapを使って画像のスライドの実装を試みています。
bootstrapからコードをコピーして使っているので難なくスライド表示させることが出来ました。
問題は画像のスライドさせるアイコン(三角形のマーク)が白色なことです。
白抜きの画像をスライドさせると、画像に溶け込みアイコンを認識できません。
そこでjQueryでアイコンの色を変化させようと試みています。ここで詰まっています。力をお貸しくださいませ。

参考：https://stackoverflow.com/questions/49391266/change-bootstrap-4-carousel-control-colors
こちらを見たのですがjQueryでどのように表現すればよいのか分からず、期待されるレスポンスが得られませんでした。。。

<!--bootstrapのstartingコードは便宜的に省略します-->

<!--カルーセルを導入-->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active data-interval='false' keyboard='true' ">
<img src="{{ object.image1.url }}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item data-interval='false' keyboard='true' ">
<img src="{{ object.image2.url }}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item data-interval='false' keyboard='true' ">
<img src="{{ object.image3.url }}" class="d-block w-100" alt="...">
</div>
</div>

<!--ここからスライドをコントロールするアイコンに関係すると思われます。-->
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<script>
// カルーセルのアイコン色を例えばredに変更したい
$('.carousel-control-prev').css("background-color","red");
$('.carousel-control-next').css("background-color","red");
//この方法でアイコンが設置されるアイコンを含むブロック全体を赤色までに変更することが出来ましたが、アイコンは無理でした。
</script>

Answer 1

質問者さんの実現したいことは、以下のように行えると思います(動作確認用リンク)。

$(function () {
  const iconColor = "#000";
  
  $('.carousel-control-prev-icon').css("background-image", `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='${encodeURIComponent(iconColor)}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")`);
  $(".carousel-control-next-icon").css("background-image", `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='${encodeURIComponent(iconColor)}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")`);
});

Comments

[chapin]

自分のしたかったことが色の調整も含め上記のコードで実現できました。
ありがとうございます！
今urlの引数(data, xmlns, fill, viewBox)について調べているのですが、余裕がございましたら参考になるサイトを教えてくださいませんか。
この度はありがとうございました。

[s8_chu]

以下のサイトはいかがでしょうか。
もし、以下のサイトを読んだ上でわからない点があれば、わからない箇所を質問として投稿すると良いと思います。
data: https://poyosi.com/2012/04/data-uri/
xmlns, fill, viewBox: https://euske.github.io/euskecs/lec_svg/index.html

[chapin]

最後までご丁寧にありがとうございます！