我的角度项目中有一个滑块滑块。它在桌面视图中有4个项目。我想在移动视图中显示1个项目。检查此链接
https://stackblitz.com/edit/ngx-swiper-wrapper-demo-h9egdh?file=app/app.component.ts
在这里演示.ts代码
public slides = [
'First slide',
'Second slide',
'Third slide',
'Fourth slide',
'Fifth slide',
'Sixth slide'
];
public type: string = 'component';
public disabled: boolean = false;
public config: SwiperConfigInterface = {
direction: 'horizontal',
slidesPerView: 4,
keyboard: true,
mousewheel: true,
scrollbar: false,
navigation: true,
pagination: false
};
您可以在配置JSON中添加断点属性:
public config: SwiperConfigInterface = {
direction: 'horizontal',
slidesPerView: 4,
keyboard: true,
mousewheel: true,
scrollbar: false,
navigation: true,
pagination: false,
breakpoints:{
640:{
slidesPerView: 1,
}
}
};
断点可以是您需要的任何大小,您可以查看更多信息:https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html