how to make swiper slider responsive in angular

Question

I have a swiper slider in my angular project. its has 4 items in desktop view. I want 1 item in the mobile view. check this link

https://stackblitz.com/edit/ngx-swiper-wrapper-demo-h9egdh?file=app/app.component.ts

Demo .ts code here

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
  };

Answer 1

you can add a breakpoints attribute to the config JSON as:

public config: SwiperConfigInterface = {
    direction: 'horizontal',
    slidesPerView: 4,
    keyboard: true,
    mousewheel: true,
    scrollbar: false,
    navigation: true,
    pagination: false,
    breakpoints:{
       640:{
            slidesPerView: 1, 
           }
    }
};

the breakpoints can be any size you require, for more info you can check: https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html