Question

我在Carousel Bootstrap的帮助下创建了一个幻灯片。
但是我无法更改箭头的颜色。
您能帮我找出如何更改箭头的颜色吗？谢谢！
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");
}

Answer 1

.carusel-control-prev span.carusel-control-prev-icon,
.carusel-control-next span.carusel-control-next-icon {
  color: red; 
}

Answer 2

在您的CSS中添加：

.picsum-img-wrapper{
color: #D4DADE 
}

Answer 3

我制作了一些代码片段，这些片段改变了上一个和下一个图标指示器的颜色。请运行代码段，您将看到图标颜色变为红色。

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>

Carousel Bootstrap-如何更改箭头的颜色？

3 个答案: