1

I created a slideshow with the help of Carousel Bootstrap.
But I couldn't change the color of the arrows.
Can you help me find out how to change the color of the arrows? Thanks!
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");
}
Mana
  • 63
  • 1
  • 9
  • If this is using any kind of icon font, then you likely want to specify the text color for `.carusel-control-next-icon`. – CBroe Jun 18 '20 at 12:49
  • You may refer to this stack overflow [answer](https://stackoverflow.com/a/49017805/7653007) posted before. – yinsweet Jun 18 '20 at 13:14
  • Thank you! @yinsweet I tried to implement your suggestions, but the color hasn't changed yet. You have an idea why? – Mana Jun 18 '20 at 13:39
  • do you have the `!important` keyword? if you want to change the color, you need `%23{6 digits color code}`. E.g. Red color %23FF0000 – yinsweet Jun 18 '20 at 13:44
  • @yinsweet ,Yes,I wrote:.carusel-control-next span.carusel-control-next-icon{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.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"); } .carusel-control-prev span.carusel-control-prev-icon{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.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"); } it still doesnt work – Mana Jun 18 '20 at 13:52
  • You have spelling error: *carusel* to ***carousel*** – yinsweet Jun 18 '20 at 14:01
  • @yinsweet LOL thanks! updated the question above, to my current code, probably spelling was not the only mistake, because it still doesn't work .. – Mana Jun 18 '20 at 14:42

2 Answers2

3

I have made code snippets that change the color of the prevous and next icon indicator. Please run the code snippet and you will see the icon color has changed to red.

body {
  background: skyblue !important;
}

span.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' 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");
}

span.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' 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");
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<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>
yinsweet
  • 2,823
  • 1
  • 9
  • 21
-1
.carusel-control-prev span.carusel-control-prev-icon,
.carusel-control-next span.carusel-control-next-icon {
  color: red; 
}
demkovych
  • 7,827
  • 3
  • 19
  • 25