CODEWITHSUNDEEP
angularsassng-bootstrap
Dhanusha_Perera07
Dhanusha_Perera07

Reputation: 4656

How to change the color of carousel NavigationArrows/NavigationIndicators in ng-bootstrap

I use ng-bootstrap carousel (version ^12.1.2) but I wanted to change the color of NavigationArrows and NavigationIndicators because the user cannot see these on a white background.

I referred to several related questions on StackOverflow and came up with a solution as follows to change the color of the NavigationIndicators successfully.

:host ::ng-deep .carousel-indicators button
{
  background-color: #222831 !important;
  /*more custom style*/
}

.carousel-indicators .active {
  background-color: grey !important;
}

But IntelliJ IDEA suggests that ::ng-deep is deprecated. Warning: Deprecated symbol used, consult docs for better alternative

Question:
What is the better way to change the color of NavigationArrows and NavigationIndicators?

Additional information:
Angular CLI: 13.3.7
Node: 16.15.0
Package Manager: npm 8.5.5
OS: win32 x64

ng-bootstrap Carousel documentation

Upvotes: 0

Views: 2029

Answers (2)

coperfield
coperfield

Reputation: 1

A simple solution is to swap the default color from white to a darker color.

.carousel-control-prev, .carousel-control-next {
    filter: invert(100%); 
}

Upvotes: 0

Emad Naeim
Emad Naeim

Reputation: 165

sorry if I'm late

in your style.scss add these:

1- for arrows << >>

.carousel-control-prev-icon{
 background-image: url('https://apufpel.com.br/assets/img/seta_prim.png')
 // or any other styling you need
}

.carousel-control-next-icon{
 background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
 // or any other styling you need
}

2- for indicators --- (to change it to dots for example)

.carousel-indicators button
{
  width : 8px!important;
  height: 8px !important;
  border-radius: 100%;
  margin: 5px !important;
}

Upvotes: 0

Related Questions