Question

该代码在{{slide.txt}上显示了键入文本的动画，但仅显示了第一张幻灯片，其余部分始终显示该文本。如何使动画能够显示在幻灯片的所有实例上。

//before ng onInit
          sliderPos = 0;

              slides = [
                {img: "theme/images/home01.jpg", txt: 'widsds psds'},
                {img: "theme/images/home02.jpg", txt: 'wis'},
                {img: "theme/images/home03.jpg", txt: 'with a respdsdsivr sdsdte'}
              ]
              slideConfig = {autoplay: true,"slidesToShow": 1, "slidesToScroll": 1, speed:800, "autoplaySpeed": 5000, cssEase: 'cubic-bezier(0.250,  0.060, 0.050, 0.040)'};



//after OnInit       
    afterChange(event) {
     if( event.currentSlide == 0 ){
        this.sliderPos = 0;
      }
      if( event.currentSlide == 1 ) {
        this.sliderPos = 1;
      }
      if( event.currentSlide == 2 ) {
        this.sliderPos = 2;
      }
    }

html

    <ngx-slick-carousel class="carousel" class="lazy slider" 
              #slickModal="slick-carousel" 
              [config]="slideConfig" (beforeChange)="beforeChange($event)" (afterChange)="afterChange($event)">
                <div ngxSlickItem *ngFor="let slide of slides" class="slide">
                  <h1>Empower your business <span typingAnimation [typeSpeed]="50" (complete)="onComplete()">{{slide.txt}}</span></h1>
                  <figure><img src="{{slide.img}}" width="509" alt="responsive websites" class="img-responsive"></figure>
                </div>
              </ngx-slick-carousel>

Answer 1

在讨论评论时，您应该使滑块容器延迟加载。为此，请像这样更改您的html。我不确定这是否行得通，但是如果您在stackblitz上分享演示时没有，我可以尝试为您提供更多帮助。

component.html

<ngx-slick-carousel class="carousel" class="lazy slider" #slickModal="slick-carousel" [config]="slideConfig" (beforeChange)="beforeChange($event)" (afterChange)="afterChange($event)">
    <div ngxSlickItem *ngFor="let slide of slides; let i = index" class="slide">
        <ng-container *ngIf="sliderpos == i">
            <h1>Empower your business 
        <span typingAnimation [typeSpeed]="50" (complete)="onComplete()">{{slide.txt}}</span>
      </h1>
      <figure><img src="{{slide.img}}" width="509" alt="responsive websites" class="img-responsive"></figure>
    </ng-container>
    </div>
</ngx-slick-carousel>

如何仅在第一个ngFor元素中显示动画

1 个答案: