AngularCLI 7.1.3 Как изменить цвет точек сова-карусель? - PullRequest
Новая
       18

AngularCLI 7.1.3 Как изменить цвет точек сова-карусель?

0 голосов
/ 05 января 2019

Я хочу изменить цвет точек моей совы-карусели на # FCAC45.

Я попытался изменить цвет темы непосредственно в node_modules / owl.carousel / dist / assets.owl.theme.default.css, и это сработало, однако меня предупредили не менять код в node_modules, что означает, что мне нужно другое решение.

Я также попробовал каждый ответ в этой теме, все не удалось: Изменить цвет точек

Я также пытался применить пользовательский класс напрямую: 

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

1 Ответ

0 голосов
/ 06 января 2019

Изменение 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*/
 }
...