Angular5 ng-bootstrap，带圆点的轮播指示器

Question

我正在尝试自定义轮播指标，应该是点而不是线，并尝试更改颜色。

请在下面找到工作轮播的示例。

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

Answer 1

尝试将其添加到您的styles.css

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

例如，如果要将点的颜色更改为黑色，则-

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

例如，如果要将活动幻灯片/点的颜色更改为黄色，则-

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

Answer 2

正如@ iBlehhz所说，在CSS的前面加上/ deep /。也许:: ng-deep也可以。为我工作。

Answer 3

这是最终代码。

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