Question

我想将猫头鹰轮播的圆点颜色更改为＃FCAC45。

我已经尝试直接在node_modules / owl.carousel / dist / assets.owl.theme.default.css中更改主题的颜色，并且它起作用了，但是警告我不要更改node_modules中的代码，这意味着我需要另一个解决方案。

我还尝试了此主题的所有答案，但都失败了： Change color of the dots

我还尝试了直接应用自定义类：

 <owl-carousel class"custom" (...)> </owl-carousel>

我的代码的当前状态是：

HTML

<section id="presidents">
  <div class="slider" [ngStyle]="{'width' : width}">
  <h4>Title</h4>

    <owl-carousel
    [options]="sliderOPT"
    [items]="images"
    [carouselClasses]="['owl-theme']">
      <div class="item" *ngFor="let image of images;let i = index">
        <img class="image-style" [src]="image"/>
      </div>
    </owl-carousel>
  </div>
</section>

CSS

.owl-theme .owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #FCAC45!important;
display: block;
-webkit-backface-visibility: visible;
transition: opacity 200ms ease;
border-radius: 30px; 
}
.owl-theme-custom.owl-dots .owl-dot.active span, .owl-theme-custom .owl-dots .owl-dot:hover span {
 background: #FCAC45!important;
 }

TS

images = [/*a bunch of image urls*/];
width = '60%';

public sliderOPT: any = {
dots: true,
autoplay: true,
autoplayTimeout: 4000,
autoplaySpeed: 1000,
rewind: true,
autoplayHoverPause: true,
items: 3,
responsiveClass: true,
responsive: {
    0: {
        items: 1,
        dots: false
    },
    576: {
        items: 2
    },
    768: {
        items: 3
    }
}

我希望圆点的颜色更改为＃FCAC45，但是对于正常点，它将保持为＃D6D6D6，对于悬停则将保持为＃869791。

我正在使用的npm软件包：https://www.npmjs.com/package/ngx-owl-carousel。

Answer 1

更改owl-theme-custom-> owl-theme应该在点上应用颜色，并添加ng-deep作为临时解决方案。因为不建议使用临时解决方案。

::ng-deep .owl-theme .owl-dots .owl-dot span {
   background: #D6D6D6!important; /* dots color*/
 }

::ng-deep .owl-theme .owl-dots .owl-dot.active span,
 .owl-theme .owl-dots .owl-dot:hover span {
   background: #FCAC45!important; /*active and on hover color*/
 }

AngularCLI 7.1.3如何更改猫头鹰轮播点的颜色？

1 个答案: