Angular 9 个轮播 ngx-bootstrap

Question

<旋转木马 [isAnimated]="true" pauseOnFocus="true" showIndicators="false" ng-repeat="幻灯片中的幻灯片" >

</slide>
<slide>
<img src="assets/img/2.jpg" alt="" style="display: block; width: 100%;">
</slide>
<slide>
<img src="assets/img/3.jpg" alt="" style="display: block; width: 100%;">
</slide>
<slide>
<img src="assets/img/4.jpg" alt="" style="display: block; width: 100%;">
</slide>
<slide>
<img src="assets/img/5.jpg" alt="" style="display: block; width: 100%;">
</slide>

我想更改指标。是否可以更改指示器的形状和位置？

Answer 1

您可以按照自己喜欢的方式设置轮播的任何样式。要么有一个特定的 bootstrap 主题，要么只是为 bootstrap 特定的类添加 css 并添加或覆盖样式。这里的重要部分是你需要让它成为全局 css sheet.

的一部分

.carousel-indicators li {
    height: 30px;
    border-radius: 50%;
}

如果您想将指示器移出实际轮播，您可以这样做：

.carousel-indicators {
  bottom: -20px;
}

如果您根本不想显示指标，您可以这样做：

.carousel-indicators {
  display: none;
}

只需调整 css 值即可获得您想要的结果。

您可能需要在 css 值上使用 !important 来覆盖现有的 ngx-bootstrap 样式

Answer 2

在之前使用 !important ；在全局样式页面中签入任何 CSS 语句。

Angular 9 个轮播 ngx-bootstrap

Angular 9 carousel ngx-bootstrap

ngx-bootstrap

angular