自定义 bootstrap 轮播？

Question

我正在尝试自定义 ng-bootstrap 旋转木马，使每张幻灯片都从底部开始，并且不会自动更换幻灯片。幻灯片应该带有一些动画。我想做的另一件事是幻灯片会随着鼠标滚动而改变。我正在使用 angular 6.

这是我的代码：

<ngb-carousel *ngIf="images"> 
    <ng-template ngbSlide> 
        <img [src]="images[0]" alt="Random first slide"> 
        <div class="carousel-caption"> 
           <h3>10 seconds between slides...</h3> 
               <p>This carousel uses customized default values.</p> 
        </div> 
    </ng-template>

Answer 1

让我们依次考虑您想做的 3 件事...

1.制作动画，使幻灯片从底部开始

为此，您可以将以下 CSS 添加到包含 ngb-carousel 的组件中：

::ng-deep .carousel-item {
  display: block !important;
  position: absolute;
  transform: translateY(100%);
  opacity: 0;
  transition:all  1s;
}

::ng-deep .carousel-item.active {
  position: relative;
  transform: translateY(0);
  opacity: 1;
  top: 0;
}

您应该可以调整 CSS 直到获得您想要的确切动画。

警告： Angular 正计划弃用 /deep/、>>> 和 ::ng-deep，但是您应该能够暂时使用::ng-deep：

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

来源：https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

2。禁用自动更换幻灯片

将 ngb-carousel 的 interval 属性设置为 false - 这通常是一个数值（显示每张幻灯片的毫秒数），但设置它 false 将禁用自动幻灯片。

<ngb-carousel *ngIf="images" [interval]="false" #carousel></ngb-carousel>

3。在鼠标滚动时更改幻灯片

在您的组件中添加以下 @HostListener。这会监听鼠标滚动事件，并会在检测到该事件时执行 scroll() 函数中的代码。如果向下滚动，下面的代码加载上一张幻灯片，如果向上滚动，则加载下一张幻灯片。如果您想要反过来，请将 event.wheelDelta < 0 更改为 event.wheelDelta > 0。

@HostListener('mousewheel', ['$event'])
  scroll() { 
    if (event.wheelDelta < 0) {
      this.carousel.prev();
    } else {
      this.carousel.next();
    }
  }

要使其正常工作，您需要将 ngb-carousel 声明为变量，以便您可以在 Typescript 中访问它以调用 next() 和 prev()：

HTML

<ngb-carousel *ngIf="images" [interval]="false" #carousel>

打字稿

@ViewChild('carousel')
carousel: any;

请参阅 this StackBlitz 的工作演示。

自定义 bootstrap 轮播？

customize ng-bootstrap carousel?

ng-bootstrap

angular