我想在不使用任何库的情况下使用 Angular 实现产品轮播功能

Question

我想在不使用任何库的情况下使用 Angular 实现 Carousel 功能。并使其响应

我需要像这样，最初应该显示前三项。然后，如果我点击Next，那么剩下的数据项应该会一个一个的显示出来，同理，如果我点击Previous，那么应该会显示之前的数据项 这是我在 stackblitz 中的代码 stackblitz code

Html:

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

TS:

 previous() {}

  next() {
    this.products.splice(0, 3);
  }

Answer 1

这个 setShownData() 函数根据当前迭代从我们的完整数组中获取六个项目：


setShownData(){
    this.products = this.testData.slice(this.iTestData6, (this.iTestData+1)6);
}

上一个和下一个按钮点击事件如下


previous() {
    if(this.iTestData != 0) {
      this.iTestData = this.iTestData - 1;
      this.setShownData();
    }
}

next() {
    if( ((this.iTestData+1) * 6) < this.testData.length){
      this.iTestData = this.iTestData + 1;
      this.setShownData();
    }
}

我想在不使用任何库的情况下使用 Angular 实现产品轮播功能

I would like to implement Product Carousel functionality using Angular without using any libraries

carousel

angular-material

angular