Search code examples
cssangularowl-carousel

ngx-owl-carousel (Angular 7.1.3) How to change color of owl-carousel dots?


The npm package i am using: https://www.npmjs.com/package/ngx-owl-carousel.

I want to change the color of the dots of my owl-carousel to #FCAC45.

I have tried changing the color of the theme directly in node_modules/owl.carousel/dist/assets.owl.theme.default.css and it worked, however I was warned not to change the code in node_modules which means I need another solution.

I also tried every answer in this topic, all failed: Change color of the dots

I also tried applying a custom class directly:

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

The current state of my code is:

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

I expect the color of the dot to change to #FCAC45 however it stays #D6D6D6 for normal and #869791 for hover.


Solution

  • Changing owl-theme-custom -> owl-theme should apply color on dots,and adding ng-deep as temporary solution.Temporary solution because is deprecated.

    ::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*/
     }