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.:

2 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

8 Likes
#6

ionSlidesDidLoad Emitted after Swiper initialization.

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

Calling update when slides initialized.

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

This was my fix.

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