问题标签 [ngx-swiper-wrapper]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
23 浏览

angular - 我在 swiper 滑块中遇到此错误,在屏幕截图中提到,滑块在平板电脑模式下未正确显示

我附上了屏幕截图,目前看起来我添加了 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>