CODEWITHSUNDEEP
ionic-framework
Nizar Bouraoui
Nizar Bouraoui

Reputation: 61

ionic 5 slides i want to change slidesPerview on screen rotation or screen change

I'm trying to work with ionic slides but I could not find a solution for updating slidesPerView. All I want is to change slidesPerView on-screen rotation or on change screen width.

My code:

@ViewChild('mySlider')  slides: IonSlides;
slideOpts = {
    loop: false,
    slidesPerView: 3,
    slidesPerGroup: 6,
    grabCursor: true,
    spaceBetween: 1,
    observer:true,
    observeParents:true,
    observeSlideChilden:true
  };
@HostListener('window:resize', ['$event'])
  getScreenSize(event?) {
    this.scrHeight = window.innerHeight;
    this.scrWidth = window.innerWidth;
    this.screenSize = this.scrWidth/250;
    this.slideOpts.slidesPerView = this.screenSize;
    this.slides.update();
    console.log(this.scrHeight, this.scrWidth,this.screenSize,this.slideOpts.slidesPerView);
  }

Upvotes: 0

Views: 205

Answers (1)

Nizar Bouraoui
Nizar Bouraoui

Reputation: 61

solved by add breakpoints :

breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 2,
          spaceBetween: 20
        },
        // when window width is >= 480px
        480: {
          slidesPerView: 3,
          spaceBetween: 30
        },
        // when window width is >= 640px
        640: {
          slidesPerView: 6,
          spaceBetween: 40
        }
    }
  });

Upvotes: 1

Related Questions