CODEWITHSUNDEEP
htmlangular
Nikson
Nikson

Reputation: 940

carousel slider displays single item in Angular4

Working in an Angular4 project in this ,I have used carousel for displaying products,Products are binding from API response .

In my carousel I display the products like single row 3 column format ,If API returns 10 products the 10 th product is get displayed single slide .

I want to merge the 10th product with 1st and 2nd product then display like a 3 column slide .

Html 

<div class="col-sm-9">
                <section class="container">
                    <div class="row">
                        <div class="col-sm-1">
                            <i class="fa fa-user" style="font-size:25px"></i>
                        </div>
                        <div class="col-sm-9">
                            <h5>Popular Products</h5>
                        </div>
                    </div>
                </section>
                <hr>
                <section class="carousel slide" id="myCarousel">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 text-right mb-4">
                                <a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back">
                                    <i class="fa fa-lg fa-chevron-left"></i>
                                </a>
                                <a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more">
                                    <i class="fa fa-lg fa-chevron-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="container p-t-0 m-t-2 carousel-inner">
                        <div class="row row-equal carousel-item {{ i == 0 ? 'active' : '' }} m-t-0" *ngFor="let chunkProducts of productData;let i =index;">
                            <div class="col-sm-4" *ngFor="let slider of chunkProducts;">
                                <div class="card">
                                    <div class="card-img-top card-img-top-250 one">
                                        <img class="img-fluid" [src]="slider['PRODUCT_IMAGE']" alt="Carousel 1">
                                        <img routerLink="/my-cart" class="img-fluid two" [src]="slider['PRODUCT_IMAGE_ONHOVER']" alt="Carousel 1">
                                    </div>
                                    <div class="card-block pt-2">
                                        <div class="col-sm-12 text-center card-text">
                                            <span>{{slider.PRODUCT_NAME}}</span>
                                            <br>
                                            <input type="hidden" value="{{slider.PRODUCT_ID}}" #Pname1>
                                            <br>
                                            <span>{{slider.PRODUCT_PRICE}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

This is my html file to show the slide as 3 column format.

Component 

 ngOnInit() {
    this.CartdataService.get_New_Products().subscribe(
      data => {
          this.productData = this.chunks(data,3);
          console.log(this.productData);
      });

chunks(array, size) {
    let results = [];
    results = [];
    while (array.length) {
      results.push(array.splice(0, size));
    }
    return results;
  }

Upvotes: 2

Views: 1063

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58593

Just Change : 

this.CartdataService.get_New_Products().subscribe(data => {
    this.productData = this.chunks(data.json(),3);

    let last = this.productData[this.productData.length-1].length;
    if(this.productData.length > 1 && last < 3) {
        this.productData[this.productData.length-1] = [ ...this.productData[this.productData.length-1] , ...this.productData[0].slice(0, 3-last) ];
    }

});

WORKING DEMO

Upvotes: 2

Related Questions