可以在CSS样式表中隐去NG-Bootstrap carousel箭头按钮和指示点,对应的CSS HTML代码如下.
1. 具体设置 .carousel-control-prev .carousel-control-prev .carousel-control-prev 显示为 none;
2. 笔者前端开发语言使用angular 2,所以还需要在component中设置ViewEncapsulation.None;
PS: ViewEncapsulation.None 表示没有 Shadow DOM,即所有的样式都应用到整个 document,换句话说,组件的样式会受外界影响,
因此在NG-Bootstrap封装的carousel中,它的样式表会被刚才设置的CSS属性所覆盖,进而实现控制carousel部分组件属性的需求
CSS:
.my-carousel-view {
.control-property {
.carousel-control-prev {
display: none;
}
.carousel-control-next {
display: none;
}
.carousel-indicators {
display: none;
} // ... ...
}
}
HTML:
<div class="my-carousel-view">
<ngb-carousel class="control-property">
<div *ngFor="let imgItem of ima