Question

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

请参见此链接neat Mandelbrot Set generator

代码

<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;
}

角度隐藏导航箭头

2 个答案: