在 Angular 中自定义 OF Bootstrap 个轮播

Question

我的 Angular 项目中有一个 ng-bootstrap 轮播，我想更改一些内容，但不知道如何去做。

首先，我想在幻灯片切换时有淡入淡出的效果，在下一张图片刚出现的那一刻。

其次，我想有自己的箭头和滑动指示器或改变样式！我试图通过 CSS 做到这一点，但我的代码 none 似乎被接受了。

在我的幻灯片组件下方：

  images = [1, 2, 3, 4, 5, 6, 7].map(() => `https://picsum.photos/900/500?random&t=${Math.random()}`);

  paused = false;
  unpauseOnArrow = false;
  pauseOnIndicator = false;
  pauseOnHover = true;

  @ViewChild('carousel', {static : true}) carousel: NgbCarousel;

  togglePaused() {
    if (this.paused) {
      this.carousel.cycle();
    } else {
      this.carousel.pause();
    }
    this.paused = !this.paused;
  }

  onSlide(slideEvent: NgbSlideEvent) {
    if (this.unpauseOnArrow && slideEvent.paused &&
      (slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)) {
      this.togglePaused();
    }
    if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) {
      this.togglePaused();
    }
  }

幻灯片组件 html

<ngb-carousel #carousel interval="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
  <ng-template ngbSlide *ngFor="let img of images; index as i">
      <div class="picsum-img-wrapper">
        <img [src]="img" alt="My image {{i + 1}} description">
      </div>
  </ng-template>
</ngb-carousel>

幻灯片组件css

.picsum-img-wrapper {
 img {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  display: block;
  margin: 0;
 }
}

.carousel-indicators > li {
 visibility: hidden;
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}

a.carousel-control-prev,
a.carousel-control-next {
 span {
  display: none;
 }
}

Answer 1

你需要使用 encapsulation:ViewEncapsulation.None (*)

这允许您覆盖 css。在ngb-carousel中，控制项目的class是.carousel-item和carousel-item.active。 carousel-item 有 display:none 而 carouse-item.active 有 display:block，所以你需要改变 opacity:0 和 opacity:1。使用自己的 .css 进行转换。有些人喜欢 (see stackblitz

@Component({selector: 'ngbd-carousel-basic', 
templateUrl: './carousel-basic.html',
encapsulation: ViewEncapsulation.None,
styles:[`
  .carousel-item
  {
    display:block;
    opacity:0;
    transition: opacity 2s;
  }
  .carousel-item.active
  {
    display:block;
    opacity:1;
    transition: opacity 2s;

  }
  .carousel-control-next-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.568 18.005l-1.414-1.415 4.574-4.59-4.574-4.579 1.414-1.416 5.988 5.995-5.988 6.005z'/%3e%3c/svg%3e");

}  .carousel-control-prev-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3e%3cpath d='M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z'/%3e%3c/svg%3e");

}
`]
}
)

已更新 如果您想在 "Angular style" 处制作动画，您也需要覆盖 class

styles:[`
  .carousel-item
  {
    display:block;
  }
  .carousel-caption
  {
    display:block
  }

并创建类似

的动画

animations: [
    trigger('simpleFadeAnimation', [
      state('false', style({opacity: 0})),
      transition('*=>false', [
        style({opacity: 1}),
        animate(600 )
      ]),
      transition('false=>*',
        animate(600, style({opacity: 1})))
    ])
  ]

.html 看起来像

<ngb-carousel #carousel *ngIf="images" interval=0 wrap="true" >
  <ng-template ngbSlide id="id1">
    <div  class="picsum-img-wrapper" [@simpleFadeAnimation]="carousel &&carousel.activeId=='id1'">
      <img [src]="images[0]" width="100%" alt="Random first slide">
    <div class="carousel-caption" >
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
    </div>
  </ng-template>
  <ng-template ngbSlide id="id2">
    <div class="picsum-img-wrapper" [@simpleFadeAnimation]="carousel &&carousel.activeId=='id2'">
      <img [src]="images[1]" width="100%" alt="Random second slide">
    <div class="carousel-caption" >
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    </div>
  </ng-template>
  <ng-template ngbSlide id="id3">
    <div class="picsum-img-wrapper" [@simpleFadeAnimation]="carousel &&carousel.activeId=='id3'">
      <img [src]="images[2]" width="100%" alt="Random third slide">
    <div class="carousel-caption" >
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
    </div>
  </ng-template>
</ngb-carousel>

查看 new stackblitz

更新 2 如果我们希望幻灯片从左到右，我们可以使用类似

的动画

  animations: [
    trigger('simpleTranslation', [
      state('outright', style({ transform: `translateX(100%)` })),
      state('outleft', style({ transform: `translateX(-100%)` })),
      state('inleft', style({ transform: `translateX(0)` })),
      state('inright', style({ transform: `translateX(0)` })),
      transition('*=>inleft',[
        style({transform:`translateX(-100%)`}),
        animate('260ms ease-in')
      ]),
      transition('*=>inright',[
        style({transform:`translateX(100%)`}),
        animate('260ms ease-in')
      ]),
      transition('*=>outright', [
        animate('260ms ease-in', style({ transform: `translateX(-100%)` }))
      ]),
      transition('*=>outleft', [
        animate('260ms ease-in',style({ transform: `translateX(100%)` }))
      ]),
    ])
  ]

我们需要在子视图中获取幻灯片并使用幻灯片事件

  @ViewChildren(NgbSlide) slides: QueryList<NgbSlide>
  slideControl: any[] = []
  onSlide(event) {
    this.slides.forEach((x, index) => {
      if (x.id == event.current) {
        this.slideControl[index] = 'in' + event.direction
      }
      if (x.id == event.prev) {
        this.slideControl[index] = 'out' + event.direction
      }
    })
  }

.html 喜欢

<ngb-carousel #carousel *ngIf="images" interval=0 wrap="true"  (slide)=onSlide($event)>
  <ng-template ngbSlide id="id1">
    <div  class="picsum-img-wrapper" [@simpleTranslation]="slideControl[0]">
      <img [src]="images[0]" alt="Random first slide">
    <div class="carousel-caption" >
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
    </div>
  </ng-template>
  <ng-template ngbSlide id="id2">
    <div class="picsum-img-wrapper" [@simpleTranslation]="slideControl[1]">
      <img [src]="images[1]"  alt="Random second slide">
    <div class="carousel-caption" >
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    </div>
  </ng-template>
   ...
</ngb-carousel>

见another stackblitz

(*)ViewEncapsultaion.None 使您的 .component 中的 .css 适用于所有应用程序。所以请小心使用它，例如你在你的组件中写了一个 css h1{color:red} 你所有的 h1 在你的应用程序中变成 "red"

在 Angular 中自定义 OF Bootstrap 个轮播

Customise NG Bootstrap carousel in Angular

html

css

ng-bootstrap

angular