# Slides in modal \[v5\]

**URL:** <https://forum.ionicframework.com/t/slides-in-modal-v5/185301>\
**Category:** Ionic Framework\
**Created:** [March 17, 2020, 2:35pm UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301 "2020-03-17T14:35:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![mieszkoPl](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@mieszkoPl](https://forum.ionicframework.com/u/mieszkoPl)\
**Post date:** [March 17, 2020, 2:35pm UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/1 "2020-03-17T14:35:22Z")

</div>

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

> **[ion-slides - Ionic Documentation](https://ionicframework.com/docs/api/slides#usage)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 17, 2020, 3:12pm UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/2 "2020-03-17T15:12:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mieszkoPl](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@mieszkoPl](https://forum.ionicframework.com/u/mieszkoPl)\
**Post date:** [March 17, 2020, 4:24pm UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/3 "2020-03-17T16:24:11Z")

</div>

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](https://github.com/karol-krzeminski/ionic-modal)

---

<div class="post-metadata">

**Author:** ![mieszkoPl](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@mieszkoPl](https://forum.ionicframework.com/u/mieszkoPl)\
**Post date:** [March 18, 2020, 3:10pm UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/4 "2020-03-18T15:10:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 19, 2020, 3:13pm UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/5 "2020-03-19T15:13:03Z")

</div>

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

```auto
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

---

<div class="post-metadata">

**Author:** ![thenaim](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/thenaim/32/132732_2.png) [@thenaim](https://forum.ionicframework.com/u/thenaim)\
**Post date:** [July 7, 2020, 8:18pm UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/6 "2020-07-07T20:18:03Z")

</div>

[ionSlidesDidLoad](https://ionicframework.com/docs/api/slides) Emitted after Swiper initialization.

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

```

Calling `update` when slides initialized.

```auto
slideDidLoad(event) {
  this.slides.update();
}

```

---

<div class="post-metadata">

**Author:** ![JamesPoel](https://avatars.discourse-cdn.com/v4/letter/j/ea666f/32.png) [@JamesPoel](https://forum.ionicframework.com/u/JamesPoel)\
**Post date:** [January 18, 2021, 10:40pm UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/7 "2021-01-18T22:40:08Z")

</div>

This was my fix.

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

```

---

<div class="post-metadata">

**Author:** ![dev-group-are](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dev-group-are](https://forum.ionicframework.com/u/dev-group-are)\
**Post date:** [June 24, 2021, 12:24am UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/8 "2021-06-24T00:24:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joseph-freeman](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@joseph-freeman](https://forum.ionicframework.com/u/joseph-freeman)\
**Post date:** [July 19, 2021, 10:11pm UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/9 "2021-07-19T22:11:40Z")

</div>

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

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

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

```

---

<div class="post-metadata">

**Author:** ![klemensz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/klemensz/32/132333_2.png) [@klemensz](https://forum.ionicframework.com/u/klemensz)\
**Post date:** [September 7, 2021, 11:00am UTC](https://forum.ionicframework.com/t/slides-in-modal-v5/185301/10 "2021-09-07T11:00:37Z")

</div>

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.