Angular 9 轮播 ngx-bootstrap

Question

<carousel [isAnimated]="true" pauseOnFocus="true" showIndicators="false" ng-repeat="slide in slides" >

</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>

I want to change indicators. is it possible to change the shape and position of indicators?

Answer 1

You can style anything of the carousel in the way you want. Either having a specific bootstrap theme or just adding css for the bootstrap specific classes and add or overwrite styling. The important part here is that you need to have this be part of a global css sheet.

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

If you would want to move the indicators out of the actual carousel you could do:

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

If you would want to not display indicators at all you could do:

.carousel-indicators {
  display: none;
}

Just play around with the css values to get to the result you want to achieve.

You might need to use !important on your css values to overwrite the existing ngx-bootstrap styling

Answer 2

use;important just before. sign in any CSS statement in global style page.