角度隐藏导航箭头

Question

我需要在以下情况下隐藏轮播中的导航箭头： 首先，您需要在第一张幻灯片上隐藏上一个导航箭头，然后 最后，当您在最后一张幻灯片上时，您需要隐藏前进导航箭头。 它现在已经在工作了。我的问题是当我组合视频和图像时。如何隐藏上一个和前进导航箭头，因为它们是分开的？

请看这个链接点击这里

法典

<div [ngClass]="{'first': myCarousel?.activeId == '0', 'last': myCarousel?.activeId == imageUrls.length - 1}">
<!-- {{ myCarousel?.activeId }} -->
<ngb-carousel #myCarousel [showNavigationArrows]="imageUrls.length > 1 || videoUrls.length > 1" [showNavigationIndicators]="false" interval="0">
<ng-template ngbSlide *ngFor="let url of imageUrls; let i = index" [id]="i">
<img class="active" [src]="url" />
</ng-template>
<ng-template ngbSlide *ngFor="let url of videoUrls; let i2 = index" [id]="i2">
<video class="active" [src]="url" controls></video>
</ng-template>
</ngb-carousel>
</div>

Answer 1

使用 css 尝试这样

:ng-deep .carousel-control-next-icon, .carousel-control-prev-icon {
display: none !important;
}

Answer 2

您可以在其中max长度

在 .ts 文件中

max(x,y):Number{
return Math.max(x,y);
}

然后

[ngClass]="{'first': myCarousel?.activeId == '0', 'last': myCarousel?.activeId == max(imageUrls.length,videoUrls.length)-1}

.css

::ng-deep .first .carousel-control-prev{
display:none !important;
}
::ng-deep .last .carousel-control-next {
display: none !important;
}