Задать вопрос
Tolly
@Tolly
css

Как в Swiper слайдере картинку подгружать как фоновое изображение?

Не могу разобрать как подгрузить картинку как фоновое изображение.
На сайте слайдера есть пример Lazy Loading Images, но там загрузка идет именно как картинка, а мне нужно загрузить как background.

Пример на сайте выглядит так (работает для картинки):
<div class="swiper-slide">
     <img data-src="http://lorempixel.com/1600/1200/nature/3/" class="swiper-lazy">
     <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>


В документации на сайте сказано, что если нужно подгрузить картинку как background, то писать:
<!-- Element with lazy background image -->
<div class="swiper-slide">
     <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
          <div class="swiper-lazy-preloader"></div>
     </div>
</div>


но когда я так пишу, то у меня слайдер не работает, вот пример:
https://codepen.io/workcode/pen/GwMQvj
  • Вопрос задан
  • 5460 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Chefranov
@Chefranov
Новичок 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">

</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <div data-background="https://www.w3schools.com/w3css/img_lights.jpg" class="swiper-lazy slider_image">
          <div class="swiper-lazy-preloader"></div>
        </div>
      </div>

      <div class="swiper-slide">
        <div data-background="https://www.w3schools.com/w3css/img_lights.jpg" class="swiper-lazy slider_image">
          <div class="swiper-lazy-preloader"></div>
        </div>
      </div>

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Navigation -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      // Enable lazy loading
      lazy: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>

</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сайт на wordpress
18 дек. 2024, в 14:43
25000 руб./за проект
Решить простые задачи по DRF
18 дек. 2024, в 14:22
750 руб./за проект
Разработать парсер сайта
18 дек. 2024, в 14:20
7500 руб./за проект
Ещё заказы