Всем доброго времени суток.
Установил EXT Owl Carousel products for JoomShopping. Карусель работает отлично - нареканий нет.
Решил на её основе сделать модуль карусели для фото. Карусель сделать получилось, но не работает lazy load изображений. А точнее загружаются первые 2 фото, ещё 2 грузятся после пролистывания (всего выводиться по 4 шт.)
Посмотреть можно : demo.silkplaster-shop .точка ru/2222/bike-1
На странице: "похожие цвета" и "сопутствующие товары" - это модули EXT Owl Carousel products. Карусель фото (внизу) это запиленный мной модуль.
В слайдере "EXT Owl Carousel products for JoomShopping" lazy load работает без нареканий.
В модуле используется OwlCarousel v1.31.
Ошибок в консоле нет. Не пойму в чём проблема...
Инициализация скрипта
jQuery(document).ready(function(){
jQuery("#owl_example_photo").owlCarousel({
items : 4,
itemsCustom : false,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet : [991,3],
itemsTabletSmall : [768,2],
itemsMobile : [479,1],
lazyLoad : true,
lazyFollow : false,
lazyEffect : "fade",
navigation : true,
pagination : false,
paginationNumbers : false
});
});
HTML
<div class="mod_ext_owl_carousel_jshopping_products">
<div class="owl-wrapper-outer">
<div class="owl-wrapper">
<div id="owl_example_photo" class="owl-carousel owl-theme">
<div class="owl-item">
<div class="ext-item-wrap">
<div class="block_item">
<div class="item_image">
<span>
<img class="lazyOwl" data-src="/images/interiors/interior_1.jpg" alt="Интерьер 1">
</span>
</div>
<div class="item_zoom">
<a class="product_zoom" title="Интерьер 1" href="/images/interiors/interior_1_full.jpg" data-fancybox="gallery" data-caption="Интерьер 1"><i class="fa fa-search"></i></a>
</div>
<div class="item_name">
слайд 1
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="ext-item-wrap">
<div class="block_item">
<div class="item_image">
<span>
<img class="lazyOwl" data-src="/images/interiors/interior_3.jpg" alt="Интерьер 3">
</span>
</div>
<div class="item_zoom">
<a class="product_zoom" title="Интерьер 3" href="/images/interiors/interior_3_full.jpg" data-fancybox="gallery" data-caption="Интерьер 3"><i class="fa fa-search"></i></a>
</div>
<div class="item_name">
слайд 3
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="ext-item-wrap">
<div class="block_item">
<div class="item_image">
<span>
<img class="lazyOwl" data-src="/images/interiors/interior_2.jpg" alt="Интерьер 2">
</span>
</div>
<div class="item_zoom">
<a class="product_zoom" title="Интерьер 2" href="/images/interiors/interior_2_full.jpg" data-fancybox="gallery" data-caption="Интерьер 2"><i class="fa fa-search"></i></a>
</div>
<div class="item_name">
слайд 2
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="ext-item-wrap">
<div class="block_item">
<div class="item_image">
<span>
<img class="lazyOwl" data-src="/images/interiors/interior_4.jpg" alt="Интерьер 4">
</span>
</div>
<div class="item_zoom">
<a class="product_zoom" title="Интерьер 4" href="/images/interiors/interior_4_full.jpg" data-fancybox="gallery" data-caption="Интерьер 4"><i class="fa fa-search"></i></a>
</div>
<div class="item_name">
слайд 4
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="ext-item-wrap">
<div class="block_item">
<div class="item_image">
<span>
<img class="lazyOwl" data-src="/images/interiors/interior_5.jpg" alt="Интерьер 5">
</span>
</div>
<div class="item_zoom">
<a class="product_zoom" title="Интерьер 5" href="/images/interiors/interior_5_full.jpg" data-fancybox="gallery" data-caption="Интерьер 5"><i class="fa fa-search"></i></a>
</div>
<div class="item_name">
слайд 5
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="ext-item-wrap">
<div class="block_item">
<div class="item_image">
<span>
<img class="lazyOwl" data-src=/images/interiors/interior_6.jpg" alt="Интерьер 6">
</span>
</div>
<div class="item_zoom">
<a class="product_zoom" title="Интерьер 6" href="/images/interiors/interior_6_full.jpg" data-fancybox="gallery" data-caption="Интерьер 6"><i class="fa fa-search"></i></a>
</div>
<div class="item_name">
слайд 6
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="ext-item-wrap">
<div class="block_item">
<div class="item_image">
<span>
<img class="lazyOwl" data-src="http://demo.silkplaster-shop.ru/images/interiors/interior_7.jpg" alt="Интерьер 7">
</span>
</div>
<div class="item_zoom">
<a class="product_zoom" title="Интерьер 7" href="/images/interiors/interior_7_full.jpg" data-fancybox="gallery" data-caption="Интерьер 7"><i class="fa fa-search"></i></a>
</div>
<div class="item_name">
слайд 7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
31.10.2020, 11:26:09