Могу ли я использовать разные картинки в Owl Carousel 2 в зависимости от размера экрана? - PullRequest
Новая
       11

Могу ли я использовать разные картинки в Owl Carousel 2 в зависимости от размера экрана?

0 голосов
/ 14 марта 2020

У меня есть Owl Carousel 2.3.4 в моем проекте и Pug как JS движок шаблонов. Мне нужно показывать разные изображения в настольной и мобильной версии. URL для изображений добавляются динамически из базы данных (3 изображения в promoSliderImgs и 3 URL в promoSliderMobile). На данный момент я сделал две карусели, которые показаны в соответствии с размером экрана (я использую @media в css для # owl-1 и # owl-2) и все работает. Я также вижу, что все 6 изображений загружаются при загрузке страницы, что не очень хорошо.

Есть ли какое-нибудь решение, отличное от моего?

PS Я не могу использовать опцию 'background-image' css из-за изображений баз данных (я могу получить их только в этом .pug файле.)

Вот мой cover.pug

  #owl-1.cover-photo.owl-carousel.owl-theme.owl-loaded
    each file in page.promoSliderImgs
      img(src=file.url)
  #owl-2.cover-photo.owl-carousel.owl-theme.owl-loaded
    each file in page.promoSliderMobile
      img(src=file.url)

А вот код для карусели в файле main.js (это просто стандарт): 

$('.owl-carousel').owlCarousel({
    center: true,
    items: 1,
    loop: true,
    autoplay: true,
    autoplaySpeed: 400,
    autoplayTimeout: 2000,
    autoplayHoverPause: true,
    dots: true,
    animateOut: 'fadeOut',
    mouseDrag: false,
  });
...