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

时间:2018-09-11 12:18:41

标签: angular ng-bootstrap

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

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

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

3 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

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

答案 2 :(得分:0)

这是最终代码。

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