Hello, I have a problem making my slider Component working and I don’t know if it is even possible.
I want to dynamically add slides to the front and to the back, as loading all the slides at once would heavily impact performance. Right now I load up to 20 slides and if the user want to see articles beyond that, the slides should be add in time. So when the end is reached, a new slides is added to the DOM and the user can slide to the now last slide and so on.
This works perfectly for slides in the end on the list, but not for slides at the front. It is probably due to the tact that is it easier to just concat a value onto a list then adding an item to the start of the list. Concating keeps indexes in place while adding at the front does not.
Here are my html for the slides and the code that runs on reaching the start or the end of the slides.
Like I said, prepareNextSlide() works while preparePrevSlides() does not.
<ion-item>
<ion-slides (ionSlideReachEnd)="prepareNextSlide()" (ionSlideReachStart)="preparePrevSlide()">
<ion-slide *ngFor="let slide of currentShownArticle">
<ion-card>
<ion-row>
<ion-col>
<p text-left>Price: </p>
</ion-col>
<ion-col>
<p text-right>{{numberFormat.formatNumber(slide?.price)}} €</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p text-left>Seller: </p>
</ion-col>
<ion-col>
<p text-right>{{slide?.seller.username}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p text-left>Card Language:</p>
</ion-col>
<ion-col>
<p text-right>{{slide?.language.languageName}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p text-left>Seller Country: </p>
</ion-col>
<ion-col>
<p text-right>{{slide?.seller.address.country}}</p>
</ion-col>
</ion-row>
</ion-card>
</ion-slide>
</ion-slides>
</ion-item>
prepareNextSlide(){
console.log("last");
let lastElement = this.currentShownArticle[this.slides.getActiveIndex()];
this.cardArticleList.some((article, index)=>{
if(lastElement.idArticle == article.idArticle){
if(index + 2 > this.cardArticleList.length){
return true;
}
else{
this.currentShownArticle.push(this.cardArticleList[index + 2]);
this.slides.update();
return true;
}
}
});
}
preparePrevSlide(){
console.log("first");
let firstElement = this.currentShownArticle[this.slides.getActiveIndex()];
this.cardArticleList.some((article, index)=>{
if(firstElement.idArticle == article.idArticle){
if(index - 2 < 0){
return true;
}
else{
this.currentShownArticle.unshift(this.cardArticleList[index - 2]);
this.slides.update();
return true;
}
}
});
}