0

I'm working on a recently migrated app (IONIC 3 to IONIC 6) and during the updates, the deprecated message for the Ion-Slide component showed up, so we launched an issue on our project and started the migration to the Swiper.js lib. On the previous app version (IONIC 3) we could work with dynamic data added to the DOM using angular and use its index without problems:

<ion-slides spaceBetween="-40" style="margin-top: 0px;" (ionSlideDidChange)="atualizaVeiculoSelecionado()"> <ion-slide *ngFor="let veiculo of _veiculos">....

Since we changed to IONIC 6 this doesn't work anymore. After adding data to our variable _veiculos the view updates but the index can't be found for the new object, so calling slideTo on Swiper make its array index simply moves to the last index available when the page was created, ignoring the new element. I'm currently trying to understand how the swiper.js works using its doc and the ionic doc but without success.

Currently using Swiper 9.2.0 (Bundle version following the IONIC doc) on @ionic/angular 6.7.1 and @angular/core 15.2.5 (We updated all our packages during Swiper installation so i guess we're up to date)

We tried updating the array and calling update() on the Swiper but also seems to do nothing (Even updateSlides()) since Swiper.slides still keep its original size. We also tried destroying and re-creating Swiper but also failed.

Here's a simulation I've made to describe better

We are really stuck on this situation so any help would be appreciated

Marcos Vinicius
  • 1
  • 3

2 Answers2

0

You can use the manipulation functions.

 this.swiper.addSlide(3, `<swiper-slide>test</swiper-slide`);

Here's a few methods I tested.

Boat
  • 402
  • 4
  • 14
  • I've tested this approach but didn't work out for us :/ Inserted the slide HTML inside a string but the whole thing just broke the screen layout Fortunately we found a solution, not the best one, but worked out. Thanks for the answer anyway! – Marcos Vinicius Jun 02 '23 at 14:33
0

Didn't find a way to solve this issue, but we manage to bypass it using a 500ms timeout before checking the Swiper.

setTimeout(() => { this.slideVeiculos.slideTo(index, 500); }, 500);

Definitely not the best approach, but til now its been working.

Marcos Vinicius
  • 1
  • 3