CODEWITHSUNDEEP
htmlsassbootstrap-4
user7776077
user7776077

Reputation:

Change arrow colors in ng-bootstrap carousel

I'm creating carousel with ng-bootstrap, I want to change arrow colors or image from white to black cause i have white background images and they are invisible. My problem is that i can't get span, i don't know how to call this in scss. I'm using bootstrap 4 and ng-bootstrap for angular https://ng-bootstrap.github.io/#/components/carousel/examples. When i change image url in console it works. I was trying to get arrows directly but nothing happens.

My code: 

<div class="col-lg-6">
      <div class="imageCarousel">
        <ng-container *ngIf="product.images">
          <ngb-carousel>
            <ng-template id="imageSlide" ngbSlide *ngFor="let image of product.images | slice: 1">
              <img [src]="image">

            </ng-template>

          </ngb-carousel>
        </ng-container>
      </div>
    </div>

scss:

.imageCarousel {
        max-height: 500px;
        text-align: center;
        color: $color2;
        .carousel .slide {
            width: 50px;
            height: 50px;
            background-image: url("https://storage.googleapis.com/staging.pc-shop-260af.appspot.com/ic_keyboard_arrow_right_black_24px.svg");
        }

        img {
            // border: 2px solid blue;
            max-width: 100%;
            max-height: 400px;
        }
    }

Upvotes: 2

Views: 17227

Answers (6)

Nati
Nati

Reputation: 131

Adding on @matthew-erwin solution to set contrast on the carousel arrows from ng-bootstrap and the bottom carousel-indicators.

// inverting color of the arrows

::ng-deep .carousel-control-next-icon,
::ng-deep .carousel-control-prev-icon {
  filter: invert(1);
}

// setting the background color of the lower carousel-indicators

::ng-deep .carousel-indicators {
  button[type='button'][role='tab'] {
    background-color: black;
  }
}

Upvotes: 0

Matthew Erwin
Matthew Erwin

Reputation: 1214

First I would suggest upgrading to ng-bootstrap v6+ which correctly makes the ngb component ViewEncapsulation as None so it can be set through global CSS or via unencapsulated component CSS. See (https://github.com/ng-bootstrap/ng-bootstrap/issues/3479).

Second, override the SVG by simply setting it again & changing the fill property to whatever color you desire.

.carousel-control-next-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(50, 54, 57)' 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") !important;
}

or alternatively you can invert the colors if you're just looking for more contrast:

.carousel-control-next-icon,
.carousel-control-prev-icon {
   filter: invert(1);
}

Setting encapsulation: ViewEncapsulation.None on your host component isn't a best practice. The smarter thing to do is to make these entry changes to your projects styles.scss (or whatever is specified in angular.json as the global styles file)

Upvotes: 5

Aaron Boniface
Aaron Boniface

Reputation: 59

The answer given by Eduardo (above) only works if encapsulation is set to ViewEncapsulation.None which can have unintended side effects on other aspects of your CSS.

Instead the ::ng-deep pseudo-class can be used to target the specific CSS in question. In your scss file use the following:

::ng-deep .carousel-control-prev-icon{
  background-image: url('your-replacement.svg');
}
::ng-deep .carousel-control-next-icon{
  background-image: url('your-replacement.svg');
}

Upvotes: 4

Abderrahim Soubai-Elidrisi
Abderrahim Soubai-Elidrisi

Reputation: 5202

Yeap it's solved but you sometimes it's necessary to set the view encapsulation to None

@Component({
  selector: "app-builder",
  templateUrl: "./builder.component.html",
  styleUrls: ["./builder.component.css"],
  encapsulation: ViewEncapsulation.None
})

Upvotes: 9

Stevenfowler16
Stevenfowler16

Reputation: 1000

When inspecting that control on the link provided you can see your two buttons have classes attached to them.

Inspection

Those arrows have a background-image attribute. Override that class for that attribute in your own css file.

Upvotes: -1

Eduardo Bahia
Eduardo Bahia

Reputation: 132

ngb-carousel use SVG images as controls, you can override that with your own image of prev and next button:

.carousel-control-prev-icon{
   background-image: url('https://apufpel.com.br/assets/img/seta_prim.png')
}
.carousel-control-next-icon{
  background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
}

Upvotes: 8

Related Questions