NGB轮播间隔问题



我正在制作一个web应用程序,为逃离塔尔科夫选择地图。我使用ngb-carousel来提供一种动画,使应用程序更具视觉吸引力。我遇到的问题是幻灯片移动得不够快。似乎间隔时间在达到某一点后停止了更快的移动。我的问题是,我的代码是有加速使用ngb-carousel或我应该尝试找到另一个解决方案。

网站我正在工作- https://tarkovmapselector.herokuapp.com/

myInterval当前为100ms

<div class="has-text-centered" *ngIf="isShow">
<ngb-carousel [showNavigationArrows]="false"
[showNavigationIndicators]="false"
[pauseOnHover]="false"
[keyboard]="true"
[wrap]="true"
[interval]="myInterval">
<ng-template ngbSlide id="slide1">
<div class="picsum-img-wrapper">
<div class="is-family-code has-text-white is-size-3">
Factory
</div>
<img src="assets/images/Factory-Day_Banner.png">
</div>
</ng-template>
<ng-template ngbSlide id="slide2">
<div class="picsum-img-wrapper">
<div class="is-family-code has-text-white is-size-3">
Customs
</div>
<img src="assets/images/Customs_Banner.png">
</div>
</ng-template>
<ng-template ngbSlide id="slide3">
<div class="picsum-img-wrapper">
<div class="is-family-code has-text-white is-size-3">
Woods
</div>
<img src="assets/images/Banner_woods.png">
</div>
</ng-template>
<ng-template ngbSlide id="slide4">
<div class="picsum-img-wrapper">
<div class="is-family-code has-text-white is-size-3">
Shoreline
</div>
<img src="assets/images/Banner_shoreline.png">
</div>
</ng-template>
<ng-template ngbSlide id="slide5">
<div class="picsum-img-wrapper">
<div class="is-family-code has-text-white is-size-3">
Reserve
</div>
<img src="assets/images/Reserve.png">
</div>
</ng-template>
<ng-template ngbSlide id="slide6">
<div class="picsum-img-wrapper">
<div class="is-family-code has-text-white is-size-3">
Labs
</div>
<img src="assets/images/TheLabBanner.png">
</div>
</ng-template>
</ngb-carousel>
</div>

我已经做到了如下。我已经创建了按钮点击事件如下

<button type="button" (click)="setSlideTiming()"
class="btn btn-outline-dark btn-sm">Auto slide moving</button>

点击左边的事件

//auto slide timing
setSlideTiming(){
this.autoSlideMoving = !this.autoSlideMoving;
if (this.autoSlideMoving===true) {
this.sliderAnimationSpeed=4000;
}
else{
this.sliderAnimationSpeed=0;
}
}

,并将这一行添加到ng-crousal标签[interval]="sliderAnimationSpeed"上。根据上面的代码,你的幻灯片将在4秒内移动一次。但是你可以根据需要改变这个值。如果这有用,请告诉我。

相关内容

  • 没有找到相关文章

最新更新