Owl Carousel 2 - встроенные фоновые изображения не работают

Я только что загрузил Owl Carousel 2, чтобы создать карусель со встроенными фоновыми изображениями. Я внимательно прочитал документацию, доступную по адресу: http://www.owlcarousel.owlgraphic.com/demos/lazyLoad.html

Он говорит:

Для структуры LazyLoad HTML требуются class = "owl-lazy" и data-src = "url_to_img" или / и data-src-retina = "url_to_highres_img". Если вы установите вышеуказанные настройки не на другой элемент DOM, а на другой, тогда Owl загрузит изображение во встроенный стиль фона css.

Вот моя инициализация JS:

$('.owl-carousel').owlCarousel({
    lazyLoad: true,
    margin: 20,
    loop: false,
    nav: false,
    items: 3,
});

Мой HTML-код:

<div class="owl-lazy" data-src="images/carousel/default/default04.png" data-src-retina="images/carousel/default/default04.png" alt=""></div>

Но это не загрузка того изображения, которое было введено в div. Я искал это в Google, но все в духе. Сейчас он не работает, может быть, ошибка обновления или что-то в этом роде. Или я что-то упускаю?


owl-carousel owl-carousel-2
person metior    schedule 12.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В качестве обходного пути вы можете загрузить его в тег <img> со следующими стилями:

.carousel-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

Убедитесь, что в вашем контейнере элементов совы есть position: relative;, а в содержимом z-index больше 1.

person Taytorious    schedule 03.12.2015