Как сделать Swiper Slider отзывчивым в угловом - PullRequest
Новая
       35

Как сделать Swiper Slider отзывчивым в угловом

0 голосов
/ 14 февраля 2019

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

1 Ответ

0 голосов
/ 24 февраля 2019

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

...