Question

我正在尝试自定义ng-bootstrap Carousel，以使每张幻灯片都来自底部，而不会自动更改幻灯片。幻灯片应该带有一些动画。我想做的另一件事是幻灯片将随着鼠标滚动而改变。我正在使用角度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

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

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暂时：

不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性。

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

2。禁用幻灯片的自动更改

将interval的{{1}}属性设置为ngb-carousel-通常是一个数字值（每张幻灯片放映的毫秒数），但将其设置为{{1} }将禁用自动幻灯片播放。

false

3。通过鼠标滚动更改幻灯片

在组件中添加以下false。这侦听鼠标滚动事件，并在检测到事件时执行<ngb-carousel *ngIf="images" [interval]="false" #carousel></ngb-carousel>函数中的代码。如果向下滚动，下面的代码将加载上一张幻灯片；如果向上滚动，则下面的代码将加载下一张幻灯片。如果需要，将@HostListener更改为scroll()。

event.wheelDelta < 0

要使其正常工作，您需要将event.wheelDelta > 0声明为变量，以便可以在Typescript中访问它以便调用@HostListener('mousewheel', ['$event']) scroll() { if (event.wheelDelta < 0) { this.carousel.prev(); } else { this.carousel.next(); } }和ngb-carousel：

HTML

next()

打字稿

prev()

有关有效的演示，请参见this StackBlitz。

定制ng-bootstrap轮播？

1 个答案: