1. 程式人生 > >關閉NG-Bootstrap carousel 的箭頭按鈕和指示器

關閉NG-Bootstrap carousel 的箭頭按鈕和指示器

可以在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,
})