javascripthtmlcarouselspartacus-storefront

SAP Spartacus carousel swipe support for mobile?


With SAP Spartacus Storefront carousel component, swiping left and right doesn't work, impossible to navigate products in the carousel. I couldn't find any documentation mentioning this library doesn't support mobile swipe.

Is there any possibility to overcome the issue?

Below is the existing template which works for desktop.

    <cx-carousel #prp *ngIf="products$ | async as product" [title]="title" [hideIndicators]="true" [product]="product"
      [template]="carouselItem">
    </cx-carousel>
    
    <ng-template let-item="product" #carouselItem>
      <a class="product-image-link" tabindex="0" [routerLink]="['/', 'product', product.code]">
        <cx-media [container]="product.images?.PRIMARY" format="product"
          [attr.aria-label]="'prpref' | cxTranslate"></cx-media>
      </a>
      <div class="product-desc">
        // other code
      </div>
    </ng-template>


Solution

  • I donot see swipe feature too in OOTB. You may try scroll to right feature , simply use overflow css property on the out of the box product carousel .

    Regards KR