關閉NG-Bootstrap carousel 的箭頭按鈕和指示器
阿新 • • 發佈:2019-01-23
可以在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 imageList"> <template ngbSlide> <img class="img-style" src={{imgItem}}/> </template> </div> </ngb-carousel> </div>
typescript:
@Component({
// ...
encapsulation: ViewEncapsulation.None,
})