@cracker-test

Как подключить ленивую загрузку?

Подскажите, пожалуйста, что я сделал не правильно касательно подключения ленивой загрузки сладйера?
Ссылка
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 1
@FKV
Во первых, ознакомся с документацией на codepen. Внещние файлы стилей и скриптов подключаются не так, а через Pen Settings и в окне html пишется только содержимое body без самого тега body.
То есть в html дожно быть только:
<div class="swiper swiper-hero">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="hero__slider">
        <div class="hero__slider-link">
          <a href="#">
 <img class="hero__slider-img hero__slider-img_desktop swiper-lazy" data-src="https://images.unsplash.com/photo-1492098116625-46bb70755996?dpr=1&auto=format&fit=crop&w=1500&h=1124&q=80&cs=tinysrgb&crop=&bg=" style="width: 100% !important; height: 556px !important;">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Во вторых ты пропустил элемент swiper-wrapper, который я добавил в примере выше.
UPDATE:
в третьих не надо ничего импортировать, ты и так подключаешь bundle всего свайпера
То есть в js убери строку
import Swiper, { Navigation, Pagination, Autoplay, Lazy } from "swiper";

и соответсвенной при создании инстанса не надо указывать modules, то есть надо убрать строку
modules: [Navigation, Pagination, Autoplay],
ну и вот пример
Ах да, и ты почему-то подключаешь в теге скрипт файл css
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы