1

Question - How do I either replace a swiper slide with a new one or edit the contents of the HTML inside the slide using the wrapper library ngx-swiper-wrapper?

I have this code that creates a swiper slider with slides and I want to edit the slide or replace it with a new one when the 'slideNextTransitionStart' event is triggered.

<swiper 
   [config]="config" 
   [(index)]="index" 
   (slideNextTransitionStart)="slideChange($event)" 
   #swiper>
   <app-member-card *ngFor="let member of members" 
      [routerLink]="['/members', member.name]" 
      [MemberCard]="member">
   </app-member-card>
</swiper>

"app-member-card" is a custom component. I'd like either replace the slide with a new one (in typescript) or modify the "member" object and all it's data in the existing slide at a specific index, also through the typescript file.

slideChange(event: any) {
    // not sure what I can do here to change the slide or edit the slides HTML
    const sw = this.swiper;
  }

Problem - I'm not sure how to do this. I can access the swiper component in my .ts file like this:

@ViewChild('swiper', { static: false }) swiper?: SwiperComponent;

but I can't find any of the "manipulation" methods found here. And I'm not sure how to edit the HTML directly. I can dig into the component and get the HTML for the slide like this:

this.swiper.swiperSlides.nativeElement.children[0]

where children is the HTMLCollection array of each slide. But now what?

chuckd
  • 13,460
  • 29
  • 152
  • 331

0 Answers0