Ionic slider issue when defined in multiple pages
I am working in an app where we have sliders on multiple pages, sliders works fine when we load those page directly in web browser. But when we navigate from one slider page to another slider page, next slider page slides hides some portion of slides except 1st and it increases with each slide and if I have 4 slides then more than half of the portion is hidden for 4th slides.
Here is the screenshot for 2 slides slider, 2nd slide is not centered and some portion is hidden on the right:
Here is the slider code: HTML:
<ion-slides [options]="quesSlideOpts" #successSlide> <ion-slide> <ion-card class="sifonn ion-text-center"> <ion-card-content> some content </ion-card-content> </ion-card> </ion-slide> <ion-slide> <ion-card class="slide-2"> <ion-card-content> some content </ion-card-content> </ion-card> </ion-slide> </ion-slides> TS file:
@ViewChild('successSlide', { static: true }) protected slides: IonSlides; quesSlideOpts = { initialSlide: 0, speed: 400, centeredSlides: true, spaceBetween: 5, slidesPerView: 1.1 }; ionViewDidEnter() { console.log('update success discover') this.slides.update() } I have added this.slides.update() by referring some answers but it didn’t help.
