如何在ngx-owl-carousel中仅为居中滑块项触发指定函数？

核心实现逻辑 #

你当前的实现是将swipeup事件直接绑定在每一张轮播图的图片上，未做居中状态校验，会导致非居中的图片被滑动时也触发目标函数。需要做两个核心改动：

• 实时缓存当前处于滑块居中位置的元素标识
• 触发滑动事件前，先校验当前被滑动的元素是否和居中元素一致，匹配才执行指定函数

具体代码修改 #

1. 组件类中新增状态缓存与事件回调 #

首先在组件类中补充属性与方法，依赖ngx-owl-carousel-o自带的changed事件感知居中位置变化，无需手动计算元素位置：

// 导入需要的类型
import { OwlOptions, SlidesOutputData } from 'ngx-owl-carousel-o';

// 组件类内部
// 缓存当前居中滑块的唯一标识
currentCenteredId: string | number;

// 轮播位置变化完成后的回调
onCarouselPositionChange(data: SlidesOutputData) {
  // 开启center模式时，轮播位置固定后可从事件返回值中提取居中滑块的id
  if (data?.startPosition !== undefined && data.slides.length) {
    this.currentCenteredId = data.slides[data.startPosition].id;
  }
}

// 处理滑动事件的前置判断
handleSwipeUpTrigger(slideId: string | number, event: any) {
  // 仅当当前滑动元素与居中滑块id匹配时，才调用目标函数
  if (slideId === this.currentCenteredId) {
    this.startAnimation('swipeup', event);
  }
}

2. 模板HTML部分调整 #

给轮播组件绑定位置变化事件，同时修改图片上的滑动事件触发逻辑：

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

注意事项 #

• 依赖组件自带的changed事件做状态判断，无需手动计算元素与视口中心的距离，可自动适配你配置的响应式断点（不同屏幕下的items数量变化），不会出现位置计算偏差
• 该事件会在轮播滚动停止、位置固定后触发，不会在滚动过程中反复更新状态，性能开销极低
• 由于你配置了loop: false，无需处理循环模式下的索引偏移问题，id匹配逻辑可以直接生效

内容的提问来源于stack exchange，提问作者aditya