CODEWITHSUNDEEP
angularangular-materialcarousel
Rakin
Rakin

Reputation: 55

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

I would like to implement Carousel functionality using Angular without using any libraries. And make it responsive also

I need like, initially, the first three items should be displayed. Then, If I click Next, then the remaining data items should be displayed one by one, and similarly, if I click on Previous, then previous data items should be displayed here is my code in 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);
  }

Upvotes: 0

Views: 280

Answers (1)

zintesar
zintesar

Reputation: 26

this setShownData() function that gets six items out of our full array based on the current iteration:


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

and previous and next button click event as follow


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();
    }
}

Upvotes: 1

Related Questions