Slides in modal [v5]

Ionic Framework
1

Hi, I’m trying to add a silder inside component witch is modal. Only then does not working and does not have the option to move, autoplay, etc.
When it is embedded, e.g. on the tab, it works in a manner consistent with the documentation.

Code from doc.:

3 Likes
2

Can you make a sample project and push it to github? It’s easier to get a better idea of whats going on with it

1 Like
3

Sure, I do already.
While trying to reproduce the problem in clean project, I noticed a key relationship.
An error occurs when:

  • tab has a slider
  • the modal is opened above this tab.

However, the code says more than a thousand words…
GitHub project link

1 Like
4

Ionic v4 works, could be a bug in version 5? :thinking:

5

Took a look, not 100% sure what the issue is, but was able to work around it by calling update on the slides when they enter

import { Component, ViewChild } from '@angular/core';
import { ModalController, IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-filter-modal',
  templateUrl: './filter-modal.component.html',
  styleUrls: ['./filter-modal.component.scss'],
})
export class FilterModalComponent{
  @ViewChild(IonSlides, {static: false}) slides: IonSlides;
  slideOpts = {
    initialSlide: 1,
    speed: 400,
    autoplay: true
  };
  constructor(private modalController: ModalController) { }

  ionViewDidEnter(){
    this.slides.update();
  }

  closeModal() {
    this.modalController.dismiss(null, 'cancel');
  }

}

Could you open an issue for this? Not sure where the problem is, but we can take a look

12 Likes
6

ionSlidesDidLoad Emitted after Swiper initialization.

<ion-slides ... (ionSlidesDidLoad)="slideDidLoad($event)">
...
</ion-slides>

Calling update when slides initialized.

slideDidLoad(event) {
  this.slides.update();
}
5 Likes
7

This was my fix.

      <ion-slides @ionSlidesDidLoad="$event.target.update()">
      ...
      </ion-slides>
1 Like
8

Thanks @Thenaim, it worked for me, only i changed for other event, because ion-slide was inside in other html-simulated slide in a modal component.

9

I was having this exact issue. Our project is React based (Ionic v5.0.3). The fix was the following:

const onLoadSlides = (event: CustomEvent<void>): void => {
    (event.target as HTMLIonSlidesElement).update();
}

return (
    <IonSlides onIonSlidesDidLoad={ onLoadSlides }></IonSlides>
)
10

In our case the ion-slides worked correctly in a modal only the first time the modal was opened. Any consecutive time the modal was opened (without page reload) they were broken (paging didn’t work, pagination indicators were not shown, …)

All the workarounds posted above seem to work (calling update() either on ionViewDidEnter() or (ionSlidesDidLoad)). Ionic version: 5.6.13.