I want to make a “continuous” slider in Ionic 3.
I use 3 slides and update the content on each slide action. This works, though when swiping the last slide and looping back to the first, the content of the newly shown slide is not correct: all static data is shown, but all dynamic (bound) data is not shown. You need to initiate a new swipe action (just drag the page a tiny bit) to get the data shown.
This issue is not solved by Ion-slides loop (slideChangeStart) doesn't work on first slide from last slide.
See this plunker as an example of the issue:
This is the view:
<ion-content padding>
slides:
<ion-slides loop="true" (ionSlideDidChange)="slideChanged($event)">
<ion-slide>
0 {{data[0]?.title}}
</ion-slide>
<ion-slide>
1 {{data[1]?.title}}
</ion-slide>
<ion-slide>
2 {{data[2]?.title}}
</ion-slide>
</ion-slides>
</ion-content>
This is the controller:
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
appName = 'Ionic App';
slides: Slides;
public data: MonthViewData[] = [];
public date = new Date(Date.now());
monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
constructor() {
this.data.push({title:'t0'});
this.data.push({title:'t1'});
this.data.push({title:'t2'});
}
slideChanged(slides: Slides) {
this.slides = slides;
return new Promise((resolve, reject) => {
let scrollToNext = this.slides.getActiveIndex() > this.slides.getPreviousIndex();
console.log(this.slides.getActiveIndex(), this.slides.getPreviousIndex());
let currentSlideIndex: number = this.slides.getActiveIndex() - 1;
if (currentSlideIndex > 2) {
currentSlideIndex = 0;
}
if (currentSlideIndex < 0) {
currentSlideIndex = 2;
}
let previousSlideIndex = currentSlideIndex - 1;
let nextSlideIndex = currentSlideIndex + 1;
if (previousSlideIndex < 0) {
previousSlideIndex = 2;
}
if (nextSlideIndex > 2) {
nextSlideIndex = 0;
}
if (this.slides.getActiveIndex() == 1 && this.slides.getPreviousIndex() == 0) {
this.date = new Date(Date.now());
} else {
if (scrollToNext) {
this.date.setMonth(this.date.getMonth() + 1);
} else {
this.date.setMonth(this.date.getMonth() - 1);
}
}
console.log('active month', this.date);
console.log('indexes', previousSlideIndex, '->', currentSlideIndex, '->', nextSlideIndex);
this.data[currentSlideIndex].title = this.monthNames[this.date.getMonth()] + ' ' + this.date.getFullYear();
this.data[previousSlideIndex].title = this.monthNames[this.date.getMonth() - 1] + ' ' + this.date.getFullYear();
this.data[nextSlideIndex].title = this.monthNames[this.date.getMonth() + 1] + ' ' + this.date.getFullYear();
})
}
}
How can I get this right?
Thanks!
