SAP Spartacus 默认轮播组件（<cx-carousel>）不原生支持触摸滑动操作，但可通过 CSS 滚动容器 + 手势优化实现类 Swipe 的移动端导航体验。
sap spartacus 默认轮播组件（`
SAP Spartacus 的 <cx-carousel> 组件在 v4.x 至 v6.x 版本中确实未内置触摸事件监听与手势识别逻辑（如 touchstart/touchmove/touchend），因此在 iOS/Android 移动端无法通过手指左右滑动切换幻灯片——这并非配置遗漏，而是当前 OOTB（开箱即用）功能的客观限制。
不过，无需引入第三方轮播库（如 Swiper.js）或重写整个组件，即可快速提升移动端可用性。推荐采用 “横向可滚动容器 + 原生滚动行为” 的轻量级方案：
✅ 推荐方案：启用水平滚动（Scroll-based Navigation）
将轮播外层包裹为具有 overflow-x: auto 和 scroll-snap 特性的容器，并禁用默认指示器与自动播放，以模拟 Swipe 体验：
<!-- 替换原有 cx-carousel 为自定义滚动容器 -->
<div class="carousel-scroll-container">
<cx-carousel
#prp
*ngIf="products$ | async as products"
[title]="title"
[hideIndicators]="true"
[autoPlay]="false"
[interval]="0"
[product]="products"
[template]="carouselItem">
</cx-carousel>
</div>
<ng-template let-item="product" #carouselItem>
<div class="carousel-item" style="scroll-snap-align: start;">
<a class="product-image-link" [routerLink]="['/', 'product', item.code]">
<cx-media [container]="item.images?.PRIMARY" format="product"></cx-media>
</a>
<div class="product-desc">
<!-- your product title, price, etc. -->
</div>
</div>
</ng-template>配套 CSS（建议放入 styles.scss 或组件样式中）：
.carousel-scroll-container {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; /* iOS 流畅滚动 */
/* 隐藏滚动条（可选）*/
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none;
scrollbar-width: none;
}
/* 启用滚动对齐，提升滑动停驻体验 */
cx-carousel {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
}
.carousel-item {
flex: 0 0 auto;
width: 280px; /* 根据设计调整单个卡片宽度 */
scroll-snap-align: start;
}⚠️ 注意事项
- 此方案依赖浏览器原生滚动机制，不触发 cx-carousel 内部的 next()/prev() 方法，因此页码指示器、自动轮播等高级功能需自行扩展（如监听 scroll 事件计算当前可视项）；
- 若需精确控制滑动距离或添加惯性/回弹效果，可结合 IntersectionObserver 或轻量级库（如 @ionic/core 的 ion-slides）做渐进式增强；
- 在 Spartacus v7+ 中，社区已提出 RFC #18293 讨论原生 Swipe 支持，建议关注官方路线图。
✅ 总结
虽然 Spartacus 当前未提供开箱即用的触摸滑动轮播，但通过语义化滚动容器 + scroll-snap + 响应式 CSS，即可在不侵入核心组件的前提下，交付符合移动端直觉的浏览体验。该方案兼容所有现代移动浏览器，零额外依赖，且易于维护与定制。
