时间戳

首页 > 解决方案 > 如何使滑动滑块以角度响应

angular - 如何使滑动滑块以角度响应

问题描述

我的角度项目中有一个滑动滑块。它在桌面视图中有 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
  };

标签： angulartypescriptsliderangular6swiper

解决方案

您可以将断点属性添加到配置 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

推荐阅读