Всем привет!
Есть сайт интернет-магазина в разработке. Столкнулся с такой проблемой - на главной странице находятся 3 карусели товаров (в секции хиты продаж и в табах успей купить/акции). В хитах и табах должно отображаться по 3 и 4 товара соответственно и синхронно с обеих сторон смещения для следующих товаров. сейчас и размеры и смещения элементов не те.. (если вызвать инструменты разработчика f12, то карусели обновятся так, как должны быть изначально)
в файле woocommerce-mod.js карусели объявляются таким образом:
(function ($) {
$.mad_woocommerce_mod.productCarousel = function () {
var $productsCarousel = $('#sales-hit .product-carousel'),
$carousel = $(' ul.products', $productsCarousel);
if ($productsCarousel.length) {
$carousel.owlCarousel({
responsive:{
0:{
items:1
},
300:{
items:1
},
470:{
items:2
},
480:{
items:2
},
558:{
items:2
},
768:{
items:3
},
992:{
items:4
},
1199:{
items:4
}
},
dots: false,
stagePadding: 100,
loop:true,
autoPlay : false,
slideSpeed : 1000,
autoHeight : false,
stopOnHover : true,
nav : true
});
}
}
})(jQuery);
а инициализация их в табах в файле custom.js
var $ = jQuery.noConflict();
$(document).ready(function($) {
"use strict";
$('[href="#1455541613081-76d95c83-7633"]').click();
$('[href="#1455541612581-d2ed2aec-3e9d"]').click();
});
Что уже только не предпринимал и задавал жестко размеры элементам и перебрасывал код с файла в файл, но лучшего отображения пока добиться не получилось... Может быть есть у кого-нить идеи?
