ngb carousel interval issue

user_9297909 0
Viewed 482

I'm making a web app that selects a map for Escape from Tarkov. I'm using an ngb-carousel to provide a sort of animation making the app more visually appealing. The issue im running into is that the slides are not moving fast enough. It appears that the interval time after it hits a certain point stops moving quicker. My question is given my code is there anyway to speed this up using ngb-carousel or should I try and find another solution.

site I'm working on - https://tarkovmapselector.herokuapp.com/

myInterval is currently 100 ms

<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>
bootstrap-4 angular angularjs html
1 Answers

I have achieved this as below. I have created button click event as belo

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

Click event in ts side

//auto slide timing

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

and add this line on your ng-crousal tag [interval]="sliderAnimationSpeed". Based on the above code your slide will move once in a 4 seconds. But you can change the value as u need. Please let me know if this usefull

user_92656130
Related