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>
CodePudding user response:
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>
CodePudding user response:
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>