How to implement Lazy Load in React in Swiper Slider?

Question

React

I tried to make a Lazy Load, but I can't figure out why the photos still don't load. Maybe someone knows what's wrong. The documentation describes only the version with HTML / JS.
Link to CodeSandbox

Answer 1

You need to import the Lazy module: . You didn't. Connect it: . You didn't. Indicate to the slider instance that lazy loading is required: . You didn't. Add class to images , replace attribute with . Well, at least you have it. import { Lazy } from 'swiper';
swiper-lazysrcdata-src