ngFor - Display 3 Images of Array in 1 Swipe before next "swiperSlide" starts

Question

I have a swiper with images in the array "ktv", but I want to display 3 images one below the other, before the next "swiperSlide" begins. Any solutions for this ngFor?

<swiper [config]="pageKtvSlideOpts" #swiper>
  <ng-template *ngFor="let k of ktv" swiperSlide>
    <img [src]="k.img">
  </ng-template>
</swiper>

score 1 · Accepted Answer · answered Aug 11 '22 at 04:22

Thank you. This solution with ngFor & ngIf solved my problem:

<swiper [config]="pageKtvSlideOpts" #swiper>
  <ng-container *ngFor="let k of ktv; let ind = index;">
    <ng-template *ngIf="ind % 3 == 0" swiperSlide>
      <ng-container>
        <img [src]="ktv[ind].img">
        <img [src]="ktv[ind+1].img">
        <img [src]="ktv[ind+2].img">
      </ng-container>
    </ng-template>
  </ng-container>
</swiper>

score 0 · Answer 2 · answered Aug 10 '22 at 09:20

You could create a pipe (below called split), that transforms ktv array to an array of arrays, where each subarray has the length 3.

<swiper [config]="pageKtvSlideOpts" #swiper>
  <ng-template *ngFor="let subArr of ktv | split" swiperSlide>
    <ng-container *ngFor="let k of subArr">
       <img [src]="k.img">
    </ng-container>
  </ng-template>
</swiper>

ngFor - Display 3 Images of Array in 1 Swipe before next "swiperSlide" starts

2 Answers2