сова-карусель ленивый загрузить другое изображение для мобильного - PullRequest
Новая
       9

сова-карусель ленивый загрузить другое изображение для мобильного

0 голосов
/ 06 сентября 2018

Я использую owl-carousel 1.3.3, и я хочу загрузить, используя ленивую загрузку, 2 изображения для каждого слайда - 1 для мобильного и 1 для рабочего стола.

Что касается изображения для загрузки lazy, вам нужно загрузить класс lazyOwl и изменить src на data-src для исходного изображения. Мой конфигурационный файл: 

var homePageSlides = $("#homePageSlides");
homePageSlides.owlCarousel({
    lazyLoad: true,
    navigation : false,
    slideSpeed : 1200,
    paginationSpeed : 1200,
    singleItem:true,
    autoPlay:3500,
    stopOnHover:true,
});
$(".owl-next-main-slide").click(function () {
    homePageSlides.trigger('owl.next');
});
$(".owl-prev-main-slide").click(function () {
    homePageSlides.trigger('owl.prev');
});

Вот код в плункере (https://plnkr.co/edit/mzozFIT1fR9jvqbFI8QB)

Я уже попробовал ответ для этой темы ( Сова карусель показать другое изображение на мобильном телефоне ) 

<div class="item">
   <picture>
      <source class="lazyOwl" srcset="http://placehold.it/350x150" media="(max-width: 640px)">
      <img class="lazyOwl" srcset="http://placehold.it/1080x400">
   </picture>
</div>

но это не работает.

Для одного изображения (рабочего стола) нормально работает ленивая загрузка, но как мне лениво загрузить 2 разных изображения в сову-карусель?

...