Javascript 如何通过按钮控制Ngb引导旋转木马在角度
我有这样一个场景:Javascript 如何通过按钮控制Ngb引导旋转木马在角度,javascript,angular,typescript,carousel,ng-bootstrap,Javascript,Angular,Typescript,Carousel,Ng Bootstrap,我有这样一个场景: 显示Ngb引导转盘并通过两个按钮控制幻灯片图像:上一个和下一个 单击“上一张”按钮,然后显示上一张幻灯片图像;单击“下一张”按钮,然后显示下一张幻灯片图像 不幸的是,我的代码不起作用。有人可以帮我。以下是我的代码: HTML代码: 任何关于我的想法。 提前感谢 欢迎你,桑贝!如果你能为stackblitz提供复制品,那将是找到答案的更多机会。您可能需要手动触发更改检测。很难给出更好的建议。嗨,IAfanasov,因为我不能在Stackblizt中安装引导转盘,所以我不能复
- 显示Ngb引导转盘并通过两个按钮控制幻灯片图像:上一个和下一个
- 单击“上一张”按钮,然后显示上一张幻灯片图像;单击“下一张”按钮,然后显示下一张幻灯片图像
- 不幸的是,我的代码不起作用。有人可以帮我。以下是我的代码:
提前感谢 欢迎你,桑贝!如果你能为stackblitz提供复制品,那将是找到答案的更多机会。您可能需要手动触发更改检测。很难给出更好的建议。嗨,IAfanasov,因为我不能在Stackblizt中安装引导转盘,所以我不能复制它。但我把我的解决方案改成了弹出式视频。谢谢你的回复!
<div class="wrapper-md">
<div class="modal-header">
<h5 class="modal-title">TITLE HERE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ngb-carousel #carousel *ngIf="images" [showNavigationArrows]="false" [showNavigationIndicators]="false" [keyboard]="false">
<ng-template ngbSlide *ngFor="let image of images; index as i">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Guide image">
</div>
<div class="carousel-caption">
<h4>Slide {{i}}</h4>
</div>
</ng-template>
</ngb-carousel>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-sm btn-primary m-r" *ngIf="!isNext" (click)="skip()">Skip</button>
<button type="button" class="btn btn-sm btn-info m-r" *ngIf="isNext" (click)="previousStep()">Previous</button>
<button type="button" class="btn btn-sm btn-success" (click)="nextStep()">Next</button>
</div>
</div>
images = [62, 83, 466, 965, 982, 1043, 738].map((n) => `https://picsum.photos/id/${n}/900/500`);
@ViewChild('carousel', {static: true}) carousel: NgbCarousel;
isPrevious: boolean = false;
isNext: boolean = false;
constructor(public modal: NgbActiveModal){
}
skip()
{
this.modal.close();
}
previousStep()
{
this.isPrevious = true;
this.carousel.prev();
}
nextStep()
{
this.isNext = true;
this.carousel.next();
}