要自定义Angular ng-bootstrap轮播箭头,您可以使用ng-bootstrap提供的自定义模板功能。下面是一个示例解决方案:
import { Component, ViewChild } from '@angular/core';
import { NgbCarousel, NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
@ViewChild('carousel', {static : true}) carousel: NgbCarousel;
showNavigationArrows
为true
,以显示箭头:constructor(config: NgbCarouselConfig) {
config.showNavigationArrows = true;
}
ngbCarouselNext
和ngbCarouselPrevious
指令,并将自定义模板传递给它们:
在上述代码中,我们将自定义模板应用于最后一个幻灯片,通过将[ngbSlide]="carousel"
属性设置为轮播组件引用,将[ngbSlideNext]="customNext"
设置为自定义下一个箭头模板,将[ngbSlidePrev]="customPrevious"
设置为自定义上一个箭头模板。
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
color: white;
font-size: 24px;
cursor: pointer;
}
.carousel-arrow:focus {
outline: none;
}
通过调整样式中的属性,您可以自定义箭头的外观。
这样就可以自定义Angular ng-bootstrap轮播箭头了。请注意,这只是一个示例解决方案,您可以根据需要进行修改和扩展。