Ionic slider with slidesPerView responsive depend on device size

Ionic Framework Ionic Angular
1

Hi Everyone
I want to create a slider in ionic, then change slidesPerView depend on device or browser Size;
for example I want when device size in 360 or lower , slidesPerView = 4 and when device size between 360 and 400 it is slidesPerView = 6 and so on …
like below image…

Screenshot from 2020-04-04 21.32.15
Screenshot from 2020-04-04 21.32.15794×330 14.7 KB
Screenshot from 2020-04-04 21.32.44

I tried below solution and thats work, but it is not async… I need Async way

slideOpts = {
    initialSlide: 1,
    slidesPerView: this.checkScreen(),
    speed: 600,
    slideShadows: true,
    spaceBetween: this.spaceBetween
  };

checkScreen() {
    let innerWidth = window.innerWidth;
    switch (true) {
      case 340 <= innerWidth && innerWidth <= 400:
        return 4;
      case 401 <= innerWidth && innerWidth <= 700:
        return 5;
      case 701 <= innerWidth && innerWidth <= 900:
        return 6;
      case 901 <= innerWidth:
        return 8;
    }
  }

thanks

2

Add in the constructor method this:

this.platform.resize.subscribe(async () => {
slideOpts = {
    initialSlide: 1,
    slidesPerView: this.checkScreen(),
    speed: 600,
    slideShadows: true,
    spaceBetween: this.spaceBetween
  };

}

In the HTML file:

<ion-slides [options]="slideOpts">
...
</ion-slide>