Ionic 4/5 issue with ion-slide and modal

Ionic Framework
1

I am trying to show an image preview using ion-slide inside the ion-modal. But zoom functionality is not working. I have added slideOptions. But not working. Subsequently, the zoom functionality is working with the normal page.

Second issue backdropDismiss : true not closing modal when the backdrop is clicked

here is the code

page.html

<ion-slides [options]="slideOpts">
    <ion-slide *ngFor="let p of products">
          <img [src] = 'p.image_url' tappable (click)="openPreview(p.image_url)">
    
     </ion-slide>
 </ion-slides>

page.ts

async openPreview(image_url){
    console.log(image_url)

    const modal = await this.modalController.create({
      component: ImageModalPage,
      showBackdrop:true,
      backdropDismiss: true,
      componentProps: {
        image_url : image_url,
      },
    });
    return await modal.present();

  }

modal.html

<ion-item class="close-fake" lines="none" text-center>
    <ion-button (click)="close()" fill="clear" color="light">
      <ion-icon name="close" slot="start"></ion-icon>
      back
    </ion-button>

    <ion-slides [options]="sliderOpts">
        <ion-slide>
          <div class="swiper-zoom-container">
            <img [src] ='image_url'>
          </div>
        </ion-slide>
      </ion-slides>

modal.ts

sliderOpts = {
        zoom: {
          maxRatio: 5,
        }
      }

close(){
    this.modalController.dismiss()
  }
1 Like
2

I have the exact same problem, try to add the zoom property to the slides container like this:

 <ion-slides [options]="sliderOpts" zoom>
3

And if that doesnt solve the problem add the following code to your modal.ts:

@ViewChild(IonSlides, {static: false})slider: IonSlides ;
 


ionViewDidEnter(){
    this.slider.update();
  }
2 Likes
4

In order to close modal:

Second issue `backdropDismiss : true

Just paste <ion-backdrop></ion-backdrop> before <img [src] = 'p.image_url' tappable (click)="openPreview(p.image_url)">

Hope this will help.

5

Sweet joy. Yep this was the fix for me in the situation where opening/closing (creating/destroying) modal multiple times.