如何使用Angular9显示多个项目轮播？

Question

我有以下一段代码。我想在不使用任何库的情况下使用 Angular 9 实现 Carousel 功能。

目前，所有数据项都是连续的（它们超出了给定的边框宽度）。

但是，我需要这样，给定的数据项在执行时默认情况下应在给定的边框宽度内连续显示前六个项目。然后，如果我点击 Next，那么剩余的数据项应该只显示在该边框宽度内，同样，如果我点击 Previous，那么之前的数据项应该显示在给定的边框内 -仅宽度。

html:

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

app.component.ts:

export class AppComponent {
  testData: any;
  constructor(private myServices: MyServices) {}
  ngOnInit() {
    this.myServices.getData().subscribe(
      data => {
        this.testData = data;
        console.log("data: "+JSON.stringify(this.testData));//[{"id":1,"name":"First"},{"id":2,"name":"Second"},{"id":3,"name":"Third"},{"id":4,"name":"Fourth"},{"id":5,"name":"Fifth"},{"id":6,"name":"Sixth"},{"id":7,"name":"Seventh"},{"id":8,"name":"Eigth"},{"id":9,"name":"Ninth"}]
      },
      (err: HttpErrorResponse) => {
        console.log("error on parsing: " + err.message);
      }
    );
  }

  previous() {}
  next() {}
}

已创建Stackblitz

任何人都可以帮助我解决这个问题。提前致谢。

Answer 1

要在容器 'data-row' 中显示最多六列，每列 'data-container' 的宽度必须达到 16,667%（= 100 除以 6）。

.data-container {
  width: 16.667%;
  text-align: center;
}

为了能够仅显示数组中的六个项目，我们将创建第二个仅包含这六个项目的数组。我们还需要跟踪我们所处的迭代，以了解轮播中要显示的项目。前六后六等

testData: any;
testDataShown: any;
iTestData: number;

我们创建一个函数，根据当前迭代从我们的完整数组中获取六个项目：

setShownData(){
    this.testDataShown = this.testData.slice(this.iTestData*6, (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();
    }
}

您可以找到修改后的 Stackblitz here。

注意：添加固定的列宽会使您的网站无响应。您真的应该考虑使用响应式设计框架 (f.ex。Bootstrap)。

如何使用Angular9显示多个项目轮播？

How to display multiple item carousel using Angular 9?

carousel

typescript

angular

angular8

angular9