简体   繁体   中英

Creating Dynamic Slides with Swiper.js in Ionic + Angular Not Appending New Slides

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:

On last slide: 最后一张幻灯片

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM