owl-carousel 在 ssr Angular 17 中滑动重复项

Question

我正在使用 Angular 17 和 ngx-owl-carousel-0 : 17.0.0 包。

我的自定义选项设置为：

customOptions: OwlOptions = {
  loop: true,
  mouseDrag: false,
  touchDrag: false,
  pullDrag: false,
  dots: false,
  navSpeed: 700,
  margin:10,
  navText: ["<", ">"],
  responsive: {
    0: {
      items: 1
    },
    400: {
      items: 2
    },
    760: {
      items: 3
    },
    1000: {
      items: 4
    }
  },
  nav: true
}

目前在我的页面中我有默认模板：

<owl-carousel-o [options]="customOptions">
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/92c952" alt="img 1" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/771796" alt="img 2" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/24f355" alt="img 3" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/d32776" alt="img 4" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/f66b97" alt="img 5" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/56a8c2" alt="img 6" />
    </div>
  </ng-template>
</owl-carousel-o>

这是我的输出。您可以看到当我使用 ssr 时创建了重复项。

Answer 1

customOptions: OwlOptions = {}


constructor() {
      afterNextRender(() => {
        this.carouselOptions = {
          loop: false,
          autoplay: false,
          autoplayTimeout: 5000,
          autoWidth: false,
          dots: false,
          margin: 24,
          rtl: this.IStmxHostService.getTranslateDirection(),
          nav: true,
          navText: ['chevron_left', 'chevron_right'],
      
          responsive: {
            
          },
      
        };
      })
  }

我将 carouselOptions 移至 afterNextRender，它开始正常工作。