Notes on using Swiper’s loop and lazyloading

When using both loop and lazyloading at the same time in Swiper, a problem may occur where some objects are duplicated and the image is not displayed correctly.

One solution to this problem is to set opacity: 1 in CSS for the lazyloading element in the Swiper container.

.swiper-lazy { opacity: 1; }

This will ensure that the lazyloading element is always visible, eliminating the image display problem during the loop.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top