如何不使用第三方库在Angular中实现响应式产品Carousel轮播功能

你现有代码的核心问题是直接通过splice修改了原商品数组，会导致原数据丢失无法回退，只需要新增索引控制变量、通过数组切片动态生成可见商品列表即可实现需求，修改代码如下：

1. TypeScript 逻辑调整 #

// 保留原products数组不做修改
products = [/* 你的原有商品数据 */];
// 新增控制变量：当前可见区域的起始索引，默认从第0项开始
currentStartIndex = 0;
// 单屏展示的商品数量
displayCount = 3;

// 动态计算当前可见的商品列表
get currentDisplayProducts() {
  return this.products.slice(this.currentStartIndex, this.currentStartIndex + this.displayCount);
}

previous() {
  // 边界判断：起始索引最小为0
  if (this.currentStartIndex > 0) {
    this.currentStartIndex--;
  }
}

next() {
  // 边界判断：最大起始索引需保证后续还有足够的商品填满一屏
  const maxStartIndex = this.products.length - this.displayCount;
  if (this.currentStartIndex < maxStartIndex) {
    this.currentStartIndex++;
  }
}

2. HTML 模板调整 #

把原有遍历的products改为动态计算的currentDisplayProducts，同时补充Previous按钮：

<div class="data-row">
  <div class="previous" title="Previous" (click)="previous()">Previous</div>
  <div class="data-list show-in-row">
    <ng-container
      *ngFor="let item of currentDisplayProducts; let index = index"
    >
      <div class="data-container">
        <div>{{ item.id }}</div>
        <div>{{ item.price }}</div>
      </div>
    </ng-container>
  </div>
  <div class="next" title="Next" (click)="next()">Next</div>
</div>

可选优化：边界状态按钮禁用 #

可以给按钮增加禁用状态样式，提升交互体验：

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

给按钮绑定禁用类：

<div class="previous" title="Previous" (click)="previous()" [class.disabled]="currentStartIndex === 0">Previous</div>
<div class="next" title="Next" (click)="next()" [class.disabled]="currentStartIndex >= products.length - displayCount">Next</div>

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