Hi everyone, I have a problem with ion-slide when ionic using swiper be a component for ion-slider. I am using the freeMode of Swiper JS to make slide content.
The problem is sometimes that slides work pretty good and sometimes reopen the app will break it out ( fired or not working).
I found the last problem in ionic 4 with this link below:
But the link above may not help me lots of. Please someone advice me any idea?
Pardon me if my English not good.
Hello, i have same issue with my app. so I have just use update method when slider has initialize value and it’s worked.
just get slider ref and use the update method.
this.slider.update()
it’s work for me, i hope it will work for you.
En angular pasa lo mismo cuando inicias un porta objetos desde un componente modal o cualquier tipo de componente que se cargue primero, en el caso de los modales , los sliders se renderizan primero que el modal y cuando se termina de renderizar el modal estos pierden la configuración que le hayas establecido… la solución que ah mi me funciono es tomándome de los ganchos de los ciclos de vida las paginas para que así se retarde un poco y luego de que termine de cargar la pagina este pueda tomar la configuración sin pasos de ejecución posteriores
no se porque pero la propiedad this.Slides.update()
traida desde @ViewChild(‘Slides’,{ static: true }) Slides: IonSlides;
siempre devuelve undefined, si alguien soluciona o tiene informacion, continuar el hilo.
>// Abusemos de de los ciclos de vida de el componente
> @ViewChild('Slides',{ static: true }) Slides: IonSlides;
public viewEntered:boolean = false
public sliderOpts:any = null
[...]
ionViewDidEnter() {
this.viewEntered = true;
this.Slides.update()
}
ngOnInit() {
this.sliderOpts ={
effect: 'slide',
initialSlide: 0,
}
}
<ion-slides *ngIf="viewEntered" #Slides [options]="sliderOpts">
<ion-slide >
</ion-slide>
</ion-slides>
relativamente no se como funciona VUE pero si logras hacer una adaptación de este fragmento de código puede que te sirva 
@abhayjani Thank you very much. I was stuck in a few weeks with this problem on my project T.T.
I am so glad when someone like you help us. Thanks 
Hello @yigsvnsla0, I am thank you for helping. I will try to make a try convert Angular code to Vue. Hope it work. 
Hello everyone,
First I have a big thanks for @yigsvnsla0 explain to me the reason why the slider after platform to app devices gonna fired or not working. That made me got the idea to solve the problems.
I figured out the problem of why the slider will be fired on a mobile phone after platform to devices.
Actually, I tried to test the above example of angular code convert to vue. The result I got is a bit different in vue. In my case maybe like this:
const slidesOptions = {
on: {
beforeInit: async function () {
const swiper: any = this;
const overwriteParams = {
slidesPerView: 1.5,
spaceBetween: 10,
freeMode: true,
// this maybe help swiper not fired or
// not working after platform app to mobile (android: apk, ios: pad)
observer: true,
observeParents: true,
observeSlideChildren: true,
};
swiper.params = await Object.assign(swiper.params, overwriteParams);
swiper.originalParams = await Object.assign(
swiper.originalParams,
overwriteParams
);
},
},
};
onMounted(() => {
// this statement not sure maybe does it work on phone after platform to app
// and use on mobile (android, ios)
document.onreadystatechange = async () => {
if (document.readyState == "complete") {
// const UpdateSwiper = await slides?.value?.$el.getSwiper();
await slides?.value?.$el.update();
}
};
});
For me, finally, the code is working after platform to devices. I used to using ionViewDidEnter(). But it seems like not working, so I change to another way, maybe swiper API observer, etc…
