Как в Swiper Slider реализовать Lazy Load на React?

Question

[Даниил Чистяков]

Попробовал сделать Lazy Load, но не могу понять почему всё равно не подгружаются фото. Может кто знает в чём дело. В документации описан лишь вариант с HTML/JS.
Ссылка на CodeSandbox

Answer 1

[0xD34F]

Надо импортировать модуль Lazy: import { Lazy } from 'swiper';. Этого вы не сделали.

Подключить его: SwiperCore.use([ Lazy ]);. Этого вы не сделали.

Экземпляру слайдера указать, что необходима ленивая загрузка: <Swiper lazy={true}>. Этого вы не сделали.

Изображениям добавить класс swiper-lazy, атрибут src заменить на data-src. Ну, хоть это у вас есть.

Comments

[Даниил Чистяков]

Спасибо!