Swiper.js Loop Mode Warning in Angular project: The number of slides is not enough for loop...

I am using Swiper.js in an Angular project to create a slider. I want the slider to loop, but I am encountering the following warning:

Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters.

My slidesPerView and slidesPerGroup parameters are set to 1, and I have a total of 4 slides. Even when I duplicate the slides (doubling the number of images), this warning persists, and the loop mode does not work.

Here is my component template:

<swiper-container
class="slider-container"
loop="true"
navigation="true"
slides-per-view="1"
slides-per-group="1"
[pagination]="{ clickable: true }">
@for (projectImagePath of projectImagesPath; track projectImagePath) {
<swiper-slide class="slider">
<img [src]="projectImagePath" alt="">
</swiper-slide>
}
</swiper-container>


What I have tried:

• Verified that slidesPerView and slidesPerGroup are both set to 1.
• Increased the total number of slides by duplicating the images in the array.
• Checked the Swiper.js documentation for loop mode requirements.

Despite these efforts, the loop functionality is not working, and the warning still appears.

Questions:

1. Why is the loop mode not working even though I have enough slides and meet the documented requirements?
2. Is there something specific about using Swiper in Angular that could cause this issue?

Continue reading...