如何仅在 ngx-owl-carousel 中从中心项目调用 function？

Question

我有一个 function，只有当元素位于 slider 的中心时才需要调用它。 我怎样才能做到这一点？

我的 HTML 是：

<owl-carousel-o [options]="customOptions">
    <ng-container *ngFor="let slide of slides">
        <ng-template carouselSlide [id]="slide.id">
            <img [src]="slide.img" (swipeup)="startAnimation('swipeup',$event)">
        </ng-template>
    </ng-container>

</owl-carousel-o>

我的 customOptions 是：

customOptions: OwlOptions = {
    loop: false,
    center: true,
    dots: false,
    nav: false,
    responsive: {
      0: {
        items: 3
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    }
  }

仅当图像位于中心时才需要调用 function startAnimation() 。

我是 Angular 的新手。 任何帮助，将不胜感激。

Answer 1

您可以附加一个警卫，这样如果您的元素的索引不等于slides.length的中间元素，它就不会执行 rest

<ng-container *ngFor="let slide of slides; let i = index"> <!-- get index here -->
   <ng-template carouselSlide [id]="slide.id">
       <img [src]="slide.img" (swipeup)="startAnimation('swipeup',$event, i, slides.length)"> <!-- pass index and length here -->
   </ng-template>
</ng-container>

startAnimation('swipeup',$event, index, slidesLength) { 
  if(index !== (Math.floor((slidesLength- 1) / 2))) {
    return;
  }
}