CODEWITHSUNDEEP
htmlcssangulartypescriptng-bootstrap
user10729505
user10729505

Reputation:

Angular/ng-bootstrap - Carousel Arrow Customization

I'm trying to change the positioning and icon of the given control arrows by bootstrap. I've tried to adress "carousel-control-prev-icon" & "carousel-control-next-icon", but nothing changes. Does anyone know a proper solution?

HTML:

<div class="container">
  <div class="row">
    <div class="col-12">
      <ngb-carousel *ngIf="images">
        <ng-template ngbSlide>
          <img [src]="images[0]" alt="Random first slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[1]" alt="Random second slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[2]" alt="Random third slide">
        </ng-template>
      </ngb-carousel>
  </div>
  </div>
</div>

CSS:

ngb-carousel {
    width: 900px;
}

.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')
 }

TypeScript: 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

}

Thanks in advance, Tim

Upvotes: 1

Views: 3642

Answers (2)

BATspock
BATspock

Reputation: 152

I am using angular-13 and bootstrap 5. To change carousel arrows in a particular component, I had to add ::ng-deep for it to work.

::ng-deep .carousel-control-prev-icon {
    background-image: url('https://apufpel.com.br/assets/img/seta_prim.png') !important;
}

::ng-deep .carousel-control-next-icon {
    background-image: url('https://apufpel.com.br/assets/img/seta_ult.png') !important;
}

Upvotes: 0

Sneha Pawar
Sneha Pawar

Reputation: 1127

Try to make your CSS including important because of NGB carousel CSS override this CSS that you are including into your component.css file as below

ngb-carousel {
  width: 900px;
}

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

Hope this will help!!

Upvotes: 3

Related Questions