我附上了屏幕截图，目前看起来我添加了 4 张幻灯片，但这里仅显示平板模式下的单张幻灯片 [1]：https ://i.stack.imgur.com/I7fbn.png [2]：https： //i.stack.imgur.com/hUqyL.png
滑块.ts
public config: SwiperConfigInterface = { observer:true, direction: 'horizontal', threshold: 50, breakpoints: { 320: { slidesPerView: 2.4, spaceBetween: 16, autoHeight: false, }, 480: { slidesPerView: 2.4, spaceBetween: 16, autoHeight: true, }, 640: { slidesPerView: 3.4, spaceBetween: 16, autoHeight: true, }, 800: { slidesPerView: 4.4, spaceBetween: 16, autoHeight: true, centeredSlides: true, }, 992: { slidesPerView: 5.4, spaceBetween: 16, autoHeight: true, centeredSlides: true, }, 1280: { slidesPerView: 5.3, spaceBetween: 16, autoHeight: true, }, }, };
滑块.component.html
<swiper [config]="config" [index]="selectedGameIndex"> <div *ngFor="let shop of item?.products" class="shops"> <div class="shop-card-content" (click)=" redirectToupOrVoucher(shop?.type, shop?.category) "> <app-shop-card [shop]="shop"></app-shop-card> </div> </div> </swiper>