CODEWITHSUNDEEP
angularcarouselprimeng
manga boy
manga boy

Reputation: 13

Display data of primeng carousel into 2 rows

I am using primeng carousel to display the data/items but the requirements ask for the items to be displayed into 2 different rows per page 5 items for each row and then when we click next we are presented with the other items the 11nth. I have tried to manipulate it as much as I can but with no success at best I display 5 items visually correct but when I set [numVisible]="10" it all clumps up into a single row.
Does anyone know how you can achieve this with primeng carousel?

enter image description here

enter image description here

<p-carousel [value]="laboratori" [numVisible]="10" [numScroll]="5" [responsive]="true"
    *ngIf="step == 0 && laboratori.length != 0">
    <ng-template let-lab pTemplate="item">
      <div class="row">
        <div class="lab-item" style="height: 90%;">
          <div class="card card-shadow" [ngClass]="lab?.nome != laboratorioSelected?.nome? 'tail': 'tailSelected'"
            type="button" (click)="selectLaboratorio(lab)">
            <div class="card-body" style=" align-self: center;">
              <h5 class="card-title mb-0">{{lab?.nome}}</h5>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </p-carousel>

Upvotes: 0

Views: 1796

Answers (1)

Alain Boudard
Alain Boudard

Reputation: 873

If you wanted to display those 10 items, and then 10 more items the same way, you would need to create an Array with a complex item object inside, and like I said, for each item, you loop on the 10 children each time. Not that complex I guess :) Each Item has simply 10 children.

Actually, if you look closely at your example on fiddle, it does exactly what I told you about, meaning they group the items to have kind of "rows" :

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4> <h4>2</h4></div>
</div>

The items are "grouped" by 2. So if you wanted to do that, just group your items like I said in your data, it would look like something :

data = [
  { obj1: some, obj2: thing },
  { ... }
]

Or you group by 10 ... your choice really :)

Upvotes: 1

Related Questions