I've utilized Carousel Bootstrap to create a slideshow, but I'm struggling with changing the color of the arrows.
Could you please assist me in figuring out how to change the color of the arrows? Thank you!
slideshow.component.html:
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class= "col-md-8">
<ngb-carousel id="carousel_1" #carousel="ngbCarousel" class="text-lg-center" #myCarousel="ngbCarousel" showNavigationArrows="true"
interval="2500" pauseOnHover="false">
<ng-template ngbSlide *ngFor="let image of images;let i = index" id="{{i}}">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Random first slide" style=" max-height:300px; margin:0 auto;">
</div>
<div class="carousel-caption">
<h6>{{titles[i]}}</h6>
</div>
<a class="carousel-control-prev" href="#carousel_1" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel_1" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</ng-template>
</ngb-carousel>
</div>
<div class="col-md-2">
</div>
</div>
</div>
slideshow.component.css:
.picsum-img-wrapper{
background-color: #D4DADE ;
}
.carousel-control-next-icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='w3.org/2000/svg' fill='%23FF0000' 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");
}
.carousel-control-prev-icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='w3.org/2000/svg' fill='%23FF0000' 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");
}