Показать сообщение отдельно
  #1 (permalink)  
Старый 19.02.2016, 13:00
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 19.06.2015
Сообщений: 114

Проблема с вычислением размеров элементов каруселей на странице
Всем привет!

Есть сайт интернет-магазина в разработке. Столкнулся с такой проблемой - на главной странице находятся 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();
});

Что уже только не предпринимал и задавал жестко размеры элементам и перебрасывал код с файла в файл, но лучшего отображения пока добиться не получилось... Может быть есть у кого-нить идеи?

Последний раз редактировалось ligisayan, 19.02.2016 в 15:07.
Ответить с цитированием