Generating slides dynamically in Slider and navigate to them


#1

I’m using a slider inside a modal and i have a list inside each slide .I want to generate the next slide once the user clicks on the list item and navigate to that slide automatically.

Every thing is working fine , but once i click on the list item , the slide is generated but i have to click again in order to go to the next slide .
How can i achieve that in one click , generating the slide and navigating to it.

<ion-slides #slider >
<ion-slide *ngFor=“let cate of arrayOfData;”>

<ion-item *ngFor=“let item of cate; let i=index ;” (click)=“getNext(item.name,item.id)”>
{{item.name}}


getNext(selectedName,selectedID){
this.currentIndex = this.slides.getActiveIndex();
this.nextIndex=this.currentIndex+1;
this.subCate=[{name:‘sub1’,id:25},{name:‘sub2’,id:30}];
//Add new array to the slides
this.arrayOfData[this.nextIndex]=this.subCate;
this.slides.update();
this.slides.slideNext(500, true);

}


#2

I have the same problem. Have you found a solution? A workaround I am using is to call slideNext in a timeout, but it only works if the timeout is big enough (100ms seems to work in the browser), and I’m not sure what that would mean on different devices.

setTimeout(() => {
    this.slides.slideNext(500, true);
    }, 100);

If anyone has any better suggestions, please advise. I assume the data binding update is asynchronous, but don’t see any events that I can catch to know that it is finished.