Ionic slider with slidesPerView responsive depend on device size

@alitalaee wrote:

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.15794×330 14.7 KB

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

Posts: 1

Participants: 1

Read full topic