如何在SAP/spartacus中自动播放轮播？

Question

我正在使用 SAP/spartacus 的轮播组件。我的要求是轮播应该自动播放。请帮我解决一下。

Answer 1

正如我在源代码中看到的那样，它没有在 Spartacus 中实现 OOTB，但您可以轻松地将此功能添加到您的项目中。

请在斯巴达克斯的基础上创建您自己的CarouselComponent。

1 class 也应该实现 OnDestroy 接口

2 添加新的依赖项protected ref: ChangeDetectorRef

3 新增属性subscription = new Subscription();

4 填充方法ngOnInit按此:

    super.ngOnInit();
    this.subscription = this.size$
      .pipe(
        take(1),
        switchMap((size) =>
          interval(5000).pipe(
            tap(() => {
              this.activeSlide =
                this.activeSlide > this.items.length - size - 1
                  ? 0
                  : this.activeSlide + size;
              this.ref.markForCheck();
            })
          )
        )
      )
      .subscribe();

5 记得大约 ngOnDestroy() { this.subscription.unsubscribe(); }

然后准备您自己的 BannerCarouselComponent 版本（更改唯一的模板 - 使用您的新轮播组件代替 cx-carousel）

最后设置：

      cmsComponents: {
        RotatingImagesComponent: {
          component: YourBannerCarouselComponent,
        },
      },

如何在SAP/spartacus中自动播放轮播？

How can auto play carousel in SAP/spartacus?

spartacus-storefront