Swiper 9 Angular Ionic - thumbs carousel stops selecting the main slide when loop is turned on

This is a question to enable me to post an answer I have established after much experimentation in case anyone else hits a similar issue as I have not found it documented so well - any improvement ideas would be great.


I setup a swiper with a main carousel and a thumbs carousel (to select the image in the main one) like the below (in an Angular / Ionic project, with Swiper 9).

This worked great when run in a browser on PC through Ionic.

<swiper-container style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" thumbs-swiper=".my-thumbs" space-between="10" navigation="true" class="mySwiper" #largeSwiper>
<swiper-slide *ngFor="let image of images">
<img [src]="image" alt="Slide Image">
</swiper-slide>
</swiper-container>

<swiper-container class="my-thumbs" slides-per-view="3" space-between="10" watch-slides-progress="true" #thumbsSwiper>
<swiper-slide *ngFor="let image of images>
<img [src]="image" alt="Slide Image">
</swiper-slide>
</swiper-container>


const swiperEl = this.largeSwiper.nativeElement;
const thumbsswiperEl = this.thumbsSwiper.nativeElement;

const options: SwiperOptions = {
pagination: { clickable: true },
slidesPerView: 1,
spaceBetween: 10,
watchSlidesProgress: true,
loopedSlides: 4,
freeMode: true,
};

const thumbsOptions: SwiperOptions = {
pagination: { clickable: true },
slidesPerView: 2,
spaceBetween: 10,
watchSlidesProgress: true,
loopedSlides: 4,
loop: true,
freeMode: true,
};

Object.assign(swiperEl, options);
Object.assign(thumbsswiperEl, thumbsOptions);


I then added in a 'loop' for the thumbs carousel - the change made was to the thumbsOptions by adding the parameter:

loop: true


Now whilst the thumbs carousel would loop, when I selected a slide from the thumbs carousel it did not change the slide in the main carousel - the core functionality had broken. When I removed the new entry, functionality resumed (but naturally the tumbs carousel did not loop)

I searched through various artlicles, bugs, and documents most suggesting setting various events e.g.

on: {
slideChange: (swiper: any) => {
this.thumbsSwiper.nativeElement.swiper.activeIndex = swiper.realIndex;
}
}


Variations on this theme did not work out well - I also tried setting the SlideChangeTransitionEnd hook.

Continue reading...