title: Iterate 3 items in Angular Carousel in a Page as in the example dynamically
body: <p>I want to display angular Carousel dynamically showing three items in the page as the example given here <a href="https://github.com/lijoos/angular-carousal" rel="nofollow noreferrer">https://github.com/lijoos/angular-carousal</a> But all the items are getting displayed in a single page instead of pagination happening as per the example in the link above    </p>
  
  <p>I have tried as per the example given in <a href="https://github.com/lijoos/angular-carousal" rel="nofollow noreferrer">https://github.com/lijoos/angular-carousal</a></p>
  
  <pre><code>&lt;mat-card class="mat-parent"&gt;
      &lt;carousel&gt;
          &lt;div class="carousel-inner" align="center" role="listbox"&gt;
  
              &lt;slide&gt;
                  &lt;div class="carousel-item" style="display: block; width: 100%;"   &gt;
                      &lt;div class="col-md-4"  *ngFor="let vehicle of vehichleArry;let i = index" &gt;
                          &lt;mat-card class="example-card"&gt;
                              &lt;img mat-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Photo of a Shiba Inu"&gt;
                              &lt;mat-card-content&gt;
                                  &lt;div class="card-body"&gt;
                                      &lt;h4 class="card-title"&gt;{{vehichleArry[i].vehicleType}}&lt;/h4&gt;
                                      &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card's
                                          content.
                                      &lt;/p&gt;
                                      &lt;button mat-raised-button color="primary" (click)="navigate(vehicle)"&gt;Primary&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/mat-card-content&gt;
                          &lt;/mat-card&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4" *ngIf="vehichleArry[i+1]" &gt;
                              &lt;mat-card class="example-card"&gt;
                                  &lt;img mat-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Photo of a Shiba Inu"&gt;
                                  &lt;mat-card-content&gt;
                                      &lt;div class="card-body"&gt;
                                          &lt;h4 class="card-title"&gt;{{vehichleArry[i+1].vehicleType}}&lt;/h4&gt;
                                          &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card's
                                              content.
                                          &lt;/p&gt;
                                          &lt;button mat-raised-button color="primary" (click)="navigate(vehicle)"&gt;Primary&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/mat-card-content&gt;
                              &lt;/mat-card&gt;
                          &lt;/div&gt;
  
                    &lt;div class="col-md-4" *ngIf="vehichleArry[i+2]" &gt;
                          &lt;mat-card class="example-card"&gt;
                              &lt;img mat-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Photo of a Shiba Inu"&gt;
                              &lt;mat-card-content&gt;
                                  &lt;div class="card-body"&gt;
                                      &lt;h4 class="card-title"&gt;{{vehichleArry[i+2].vehicleType}}&lt;/h4&gt;
                                      &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card's
                                          content.
                                      &lt;/p&gt;
                                      &lt;button mat-raised-button color="primary" (click)="navigate(vehicle)"&gt;Primary&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/mat-card-content&gt;
                          &lt;/mat-card&gt;
                      &lt;/div&gt;
                &lt;/div&gt;
              &lt;/slide&gt;
  
             &lt;/div&gt;
      &lt;/carousel&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>Expected Result is I have an array of objects which should be shown three at a time in a page whereas the actual results show all the items in the page.</p>