Prepend slides to ion-slides


I’m trying to prepend a couple of slides to my current slide. However this results in a popping to the new slide. I suspect this comes from the fact that the current slide is for example at index 0 in the array and appending 2 items would cause the current slide to be at index 2 but it would still show the slide at index 0. I would like this to become index 2 without any flickering or crazy timeouts.

At the moment i’ve tried moving the slide to a new index (this.slides.slideTo(newIndex, 0) but this does nothing unless i put a timeout of 1s around it (which makes it pop first and then got to the right slide)

If anyone has any ideas that would be great,

With best regards,


A very interesting use-case, and, from what I understand, you are close to the answer yourself. In a recent article, I wrote how such mechanism you describe is implemented.

The main takeaways from that article are;

  • the Sliders component is initialized asynchronous; a setTimeout() seems the solution, but as you have experienced yourself it isn’t. The article describes how to work around this.
  • appending data (recreating the Slides) needs to happen within the “right” events to work properly.

If the article doesn’t provide pointers that helps you, you can always copy / paste a code snippet that gives us more context.

1 Like