Slider with dynamically added and removed slides for horizontal monthly calendar application

Ionic Framework ionic-v3
1

I am attempting to build a slider that will show a calendar month view, where you can slide either to the left or right and the previous or next month is visible. I would like to build the slider to that when you slide to the right to the next month, the next month after that is added to the slider and the oldest month is removed, and visa versa when you slide to the previous month the next previous month is added before that slide and the newest month is removed so that you only have three slides total at any given time.

Looking at the API docs there does not seem to be any information on how to add new slides to an existing slider, any help would be appreciated.

2

Have you considered data binding?

Create an array in .ts to hold your month objects:

private months: Month[] = new Array();

Data bind slides:

<ion-slides>
    <ion-slide *ngFor="let month of Months">
    ...
    </ion-slide>
</ion-slides>

Add/remove slides by adding/removing items from months array in .ts:

// Add
this.months.push(newMonth);
this.slides.update();

// Remove
this.months.shift();
this.slides.update();