CODEWITHSUNDEEP
angularng-bootstrap
Sahil Katia
Sahil Katia

Reputation: 11

Angular5 ng-bootstrap, carousel indicators with dots

I am trying to customize the carousel indicators, it should be dots instead of lines and trying to change the color.

Please find below example of working carousel.

https://codesandbox.io/s/149o1qzr4l

Upvotes: 1

Views: 4517

Answers (3)

Shubham Dubey
Shubham Dubey

Reputation: 123

Here's the final code.

.carousel-indicators li {
  width : 20px!important;
  height: 20px !important;
  border-radius: 50% !important
}

.carousel-indicators li {
  width : 20px!important;
  background-color: black;
  height: 20px !important;
  border-radius: 50% !important
}

.carousel-indicators .active {
  width : 20px!important;
  background-color: yellow;
  height: 20px !important;
  border-radius: 50% !important
}

Upvotes: 0

Sandy B
Sandy B

Reputation: 123

As @ iBlehhz says add /deep/ infront of the css. Maybe ::ng-deep also works. Worked for me.

Upvotes: 0

M3ghana
M3ghana

Reputation: 1281

Try adding this in your styles.css

.carousel-indicators li {
  width : 2px!important;
}

If you want to change colour of Dots to black for example then -

.carousel-indicators li {
  width : 2px!important;
  background-color: black;
}

If you want to change the active slide/dot colour to yellow for example then -

.carousel-indicators .active {
  width : 2px!important;
  background-color: yellow;
}

Upvotes: 2

Related Questions