Clicking on thumbnail slide does not change main Swiper slider

Angular v20

Swiper v11.2.10

I am using Swiper Web Components in an Angular project to build a product gallery with a main slider (sw-primary) and a vertical thumbnail slider (sw-secondary).

The sliders render correctly, but when I click on a thumbnail, the main slider does not change slides. Pagination also stops working.

Here is a simplified version of my code:

Thumb Slider:

<swiper-container id="sw-secondary" class="mySwiper2" init=false>
@for (img of productImageList; track img) {
<swiper-slide>
<img [src]="img.fileName" />
</swiper-slide>
}
</swiper-container>


Main Slider:

<swiper-container id="sw-primary" init=false>
@for (img of productImageList; track img) {
<swiper-slide>
<img [src]="img.fileName" style="width: 100%;object-fit: cover;" />
</swiper-slide>
}
</swiper-container>


component ts:

import { SwiperOptions } from 'swiper/types';
register();


ngOnInit(): void {
const swiperPrimaryConstructor = document.querySelector('#sw-primary');
const swiperSecondaryConstructor = document.querySelector('#sw-secondary');

const swPrimaryOptions: SwiperOptions = {
autoplay: false,
navigation: {
enabled: true,
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 2,
loop: true,
pagination: true,
effect: 'fade',
fadeEffect: { crossFade: true },
thumbs: {
swiper: '.mySwiper2'
}
};

Object.assign(swiperPrimaryConstructor!, swPrimaryOptions);
this.swPrimaryElement.set(swiperPrimaryConstructor as SwiperContainer);


const swSecondaryOptions: SwiperOptions = {
direction: 'vertical',
loop: true,
freeMode: true,
autoplay: false,
slidesPerView: 2,
spaceBetween: 10,
watchSlidesProgress: true
};

Object.assign(swiperSecondaryConstructor!, swSecondaryOptions);
this.swSecondaryElement.set(swiperSecondaryConstructor as SwiperContainer);

this.productService.GetProductImages(this.productId).subscribe({
next: (res) => {
if (res?.data) {
this.productImageList = res.data;
this.swSecondaryElement()?.initialize();
this.swPrimaryElement()?.initialize();
}
},
error: (err) => console.error('API error:', err)
});
}


component.css

.mySwiper2 {
width: 100%;
height: 160px;
}

.mySwiper2 swiper-slide {
text-align: center;
font-size: 18px;
background: rgba(245, 245, 245, 255);
}


.mySwiper2 swiper-slide img {
width: 100%;
object-fit: cover;
}


Output:

Img #1



Img #2



Problem:

• Img 1 → shows the expected result (main slider + thumbnails).
• Img 2 → after clicking on any thumbnail:

the main slider does not change to the clicked image, and the navigation arrows/pagination on the main slider are disabled.

Continue reading...