Блог

Я создаю веб-приложение, которое выбирает карту для побега из Таркова. Я использую ngb-carousel для создания своего рода анимации, делающей приложение более визуально привлекательным. Проблема, с которой я сталкиваюсь, заключается в том, что слайды движутся недостаточно быстро. Похоже, что интервал времени после достижения определенной точки перестает двигаться быстрее. Мой вопрос заключается в том, что мой код все равно существует, чтобы ускорить это с помощью ngb-carousel, или я должен попытаться найти другое решение.

сайт, над которым я работаю — https://tarkovmapselector.herokuapp.com /

В настоящее время мой интервал составляет 100 мс

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

Щелкните событие на стороне ts

 //auto slide timing

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

и добавьте эту строку в свой тег ng-crousal [interval]="sliderAnimationSpeed" . Основываясь на приведенном выше коде, ваш слайд будет перемещаться один раз в 4 секунды.
Но вы можете изменить значение по мере необходимости.
Пожалуйста, дайте мне знать, если это полезно