I went through the swiperjs official documentation found at: swiperjs doc
To display images, I created a method to configure and initialize the swiper only when necessary.
Below is the HTML code snippet:
<swiper-container #swiperRef init="false">
<swiper-slide *ngFor="let src of srcPhotos">
<img [src]="src" style="width: 100%; height: 100%; object-fit: cover;">
</swiper-slide>
</swiper-container>
And here's the corresponding TypeScript code:
_initSwiper() {
const swiperEl: any = document.querySelector('swiper-container');
const swiperParams = {
slidesPerView: 1,
breakpoints: {
640: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
},
on: {
init() {
// ...
},
},
};
// Assign all parameters to Swiper element
Object.assign(swiperEl, swiperParams);
// Initialize the swiper
swiperEl.initialize();
The swiper functions correctly, but an error message appears in the console every time:
Specifically related to this line of code:
swiperEl.initialize();
I'm struggling to identify the source of the problem.
Despite trying different initialization methods, the same error persists consistently.