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

Posted 2023-03-05

【中文标题】Carousel Bootstrap - 如何更改箭头的颜色？

【英文标题】：Carousel Bootstrap - how to change the color of the arrows?

【发布时间】：2020-10-08 12:43:09

【问题描述】：

我在 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"   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");

【问题讨论】：

如果这是使用任何类型的图标字体，那么您可能需要为 .carusel-control-next-icon 指定文本颜色。

你可以参考之前发的这个栈溢出answer。

谢谢！ @yinsweet 我尝试实施您的建议，但颜色尚未更改。你知道为什么吗？

您有!important 关键字吗？如果你想改变颜色，你需要%236 digits color code。例如。红色 %23FF0000

@yinsweet，是的，我写了：.carusel-control-next span.carusel-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"); .carusel-control-prev span.carusel-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 "); 它仍然不起作用

【参考方案1】：

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

【讨论】：

感谢您的回答！但由于某种原因，它对我不起作用..你知道为什么吗？ @demkovych

@Mana 什么字体使用你的carusel-control-next-icon 元素？

如果它有背景图片，你需要用你的图片替换它。

我在css中定义了：font-family: 'Varela Round', sans-serif;并用我的图像替换了背景图像，它仍然不起作用：\

它是汽车o使用。 （你错过了轮播中的 o）

【参考方案2】：

我编写了代码 sn-ps 来更改上一个和下一个图标指示器的颜色。请运行代码sn -p，您会看到图标颜色已变为红色。

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"  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>