Question

感谢您的阅读，我尝试使用swiper.js并且它与延迟加载演示工作正常，但在演示中，每张幻灯片只有一个图像，但我想表示每张幻灯片4个imgs，结果证明只会显示每张幻灯片中的第一个img。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- Required swiper-lazy class and image source specified in data-src attribute -->
            <img data-src="1.jpg" class="swiper-lazy">
            <img data-src="2.jpg" class="swiper-lazy">
            <img data-src="3.jpg" class="swiper-lazy">
            <img data-src="4.jpg" class="swiper-lazy">
            <img data-src="5.jpg" class="swiper-lazy">
            <!-- Preloader image -->
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="2.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="3.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="4.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
    </div>
</div>

所以，我试图在swiper.js中读取jquery代码，由于我的能力，我无法弄明白，tbh，我无法理解。

任何帮助？

Answer 1

我明白了。

只要我使用与幻灯片中的src相同的src，它也会延迟加载。用diff替换所有data-srcs之后，它就可以了。

谢谢，swiper.js

swiper.js每个幻灯片多个imgs延迟加载无法正常工作

1 个答案: