<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title>Swiper lazily initialized - Lazyload demos</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" /> <style> ul, li { list-style-type: none; margin: 0; padding: 0; } a, img { display: block; } img { border: 0; width: 220px; height: 280px; } img:not([src]) { visibility: hidden; } .swiper { width: 100%; height: 280px; } .swiper-slide { width: 220px; margin-right: 20px; } .swiper-slide img { display: block; } </style> </head> <body> <h1>Swiper lazily initialized</h1> <p>This is an eagerly loaded swiper</p> <div class="swiper swiper--eager"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img alt="Stivaletti" src="https://via.placeholder.com/220x280?text=S01E01" srcset="https://via.placeholder.com/440x560?text=S01E01 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" src="https://via.placeholder.com/220x280?text=S01E02" srcset="https://via.placeholder.com/440x560?text=S01E02 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S01E03" data-srcset="https://via.placeholder.com/440x560?text=S01E03 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S01E04" data-srcset="https://via.placeholder.com/440x560?text=S01E04 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S01E05" data-srcset="https://via.placeholder.com/440x560?text=S01E05 2x" width="220" height="280" /> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <p>Following, more lazily loaded swipers</p> <div class="swiper swiper--lazy" id="swiperLazy1"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S02E01" data-srcset="https://via.placeholder.com/440x560?text=S02E01 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S02E02" data-srcset="https://via.placeholder.com/440x560?text=S02E02 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S02E03" data-srcset="https://via.placeholder.com/440x560?text=S02E03 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S02E04" data-srcset="https://via.placeholder.com/440x560?text=S02E04 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S02E05" data-srcset="https://via.placeholder.com/440x560?text=S02E05 2x" width="220" height="280" /> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <p>Another lazy swiper</p> <div class="swiper swiper--lazy" id="swiperLazy2"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S03E01" data-srcset="https://via.placeholder.com/440x560?text=S03E01 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S03E02" data-srcset="https://via.placeholder.com/440x560?text=S03E02 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S03E03" data-srcset="https://via.placeholder.com/440x560?text=S03E03 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S03E04" data-srcset="https://via.placeholder.com/440x560?text=S03E04 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S03E05" data-srcset="https://via.placeholder.com/440x560?text=S03E05 2x" width="220" height="280" /> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <p>Yet another lazy swiper</p> <div class="swiper swiper--lazy" id="swiperLazy3"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S04E01" data-srcset="https://via.placeholder.com/440x560?text=S04E01 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S04E02" data-srcset="https://via.placeholder.com/440x560?text=S04E02 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S04E03" data-srcset="https://via.placeholder.com/440x560?text=S04E03 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S04E04" data-srcset="https://via.placeholder.com/440x560?text=S04E04 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S04E05" data-srcset="https://via.placeholder.com/440x560?text=S04E05 2x" width="220" height="280" /> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <p>And yet another yet another lazy swiper</p> <div class="swiper swiper--lazy" id="swiperLazy4"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S05E01" data-srcset="https://via.placeholder.com/440x560?text=S05E01 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S05E02" data-srcset="https://via.placeholder.com/440x560?text=S05E02 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S05E03" data-srcset="https://via.placeholder.com/440x560?text=S05E03 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S05E04" data-srcset="https://via.placeholder.com/440x560?text=S05E04 2x" width="220" height="280" /> </div> <div class="swiper-slide"> <img alt="Stivaletti" class="lazy" data-src="https://via.placeholder.com/220x280?text=S05E05" data-srcset="https://via.placeholder.com/440x560?text=S05E05 2x" width="220" height="280" /> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <script src="../dist/lazyload.min.js"></script> <script> const swiperOptions = { loop: true, slidesPerView: "auto", navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, on: { // LazyLoad swiper images after swiper initialization afterInit: (swiper) => { new LazyLoad({ container: swiper.el, cancel_on_exit: false }); } } }; // Initialize the first swiper right away const eagerSwiper = new Swiper(".swiper--eager", swiperOptions); // Initialize all other swipers as they enter the viewport new LazyLoad({ elements_selector: ".swiper--lazy", unobserve_entered: true, callback_enter: function (swiperElement) { new Swiper("#" + swiperElement.id, swiperOptions); } }); </script> </body> </html>