как сделать слайдер Swiper отзывчивым в angular

У меня в угловом проекте есть слайдер Swiper. на рабочем столе есть 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
  };

typescript slider angular swiper angular6
person Harry    schedule 14.02.2019    source источник

Ответы (1)


arrow_upward
6
arrow_downward

вы можете добавить атрибут точек останова в конфигурационный 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

person mahmoud abu-seini    schedule 24.02.2019