My swiper works statically, but when I attempt to add on new slides it doesn't work. Here is my code:
<swiper #slider (reachEnd)="end()" (swiper)="setSwiperInstance($event)" (slideChange)="loadNext()" [config]="config">
<ng-template swiperSlide *ngFor="let emojiBlock of initalEmojiMessages">
<ion-card class="emoji-card">
<ion-card-content class="internal-card">
<div class="emoji-carrier">
<span class="emojis">{{emojiBlock.emojis}}</span>
<span class="emojis-words">{{emojiBlock.words}}</span>
</div>
</ion-card-content>
</ion-card>
</ng-template>
</swiper>
Once I reach the last slide, end()
is called:
end() {
let index = this.swiper.swiperRef.activeIndex++;
let newEmojis = this.getEmojiSet();
this.initalEmojiMessages.push(newEmojis);
this.swiper.swiperRef.appendSlide(`
<ng-template swiperSlide>
<ion-card class="emoji-card">
<ion-card-content class="internal-card">
<p>hello world ${index}</p>
</ion-card-content>
</ion-card>
</ng-template>
`)
}
This function both adds another emoji to the array initalEmojiMessages
and adds a new slide through this.swiper.swiperRef.appendSlide
. However neither method of adding more slides works.
This is what it looks like in action:
Attempting to go to next slide:
As you can see, the new slide does not lock into place, and the appendSlide()
method worked while adding on the ngFor
didn't work.
Anyone experienced this problem/knows how to make adding slides with swiper.js in ionic work?
Not sure if this helps but i came across a similar problem in next.js. I found that a piece of CSS was causing this anomaly in conjunction with the number of slides in view. I ended up commenting all the CSS out and slowly introducing it back in to find the offending styling. Then it worked like a dream. Not sure if this will help you with your problem but if you haven't tried this then it might be a place to start.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.