[Решено] Карусель дополнительных изображений в карточке товара

[Electr0n 1]

Помогите пожалуйста решить вот такую задачу:

 

Добавил карусель в карточку товара дополнительных изображений. 

 

в  шаблона product.tpl перед строкой:  <?php echo $footer; ?>

 

вставил вот такой скрипт:

 

<?php if (count($images) > 2) { ?>

<?php $add_height = $this->config->get('config_image_additional_height'); ?>

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/carousel.css" />

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel.min.js"></script>

<script type="text/javascript"><!--

$(function() {

var visible = 2;

var thumb_width = $('.product-info .left').outerWidth(true);

$('.image-additional a').wrap('<li />');

$('.image-additional li').wrapAll('<ul class="jcarousel-skin-opencart" />');

$('.image-additional').width(thumb_width);

$('.product-info > .left + .right').css('margin-left', thumb_width + 'px');

$('.jcarousel-skin-opencart').jcarousel({

auto: 50,

scroll: 1,

visible: visible

});

$('.jcarousel-prev,.jcarousel-next').css('top',parseInt((<?php echo $add_height; ?>-$('.jcarousel-prev').height())/2)+'px');

$('.jcarousel-prev').css('left','5px');

});

//--></script>

<?php } ?>

 

 

Карусель работает:

 

 

Но, если обновить страницу раз 5-10 она слетает:

 

 

 

Как сделать, чтоб карусель не слетала и отображала 4 изображения?

 

 

Думаю, что проблема скорее всего в скрипте, но найти причину не получается. 

сайт

 

P.S. ставил на чистый ocstore 1.5.5.1.2 такая же проблема. 

Изменено 27 ноября, 2015 пользователем Electr0n

[Einshtein 678]

у Вас прописано
 

var visible = 2;

замените на 4

 

это что касается количества изображений. Другую проблему не понял

Изменено 27 ноября, 2015 пользователем Einshtein

[Electr0n 1]

у Вас прописано

 

var visible = 2;

замените на 4

 

это что касается количества изображений. Другую проблему не понял

Заменил. С количеством теперь все хорошо:

 

 

 

Но проблема с "съезжанием" осталась:

 

 

Чтоб это увидеть нужно обновить страницу примерно раз 5

[Einshtein 678]

обновил раз 20 - проблему не увидел

[Electr0n 1]

обновил раз 20 - проблему не увидел

Странно. может это касается определенных браузеров.

С google chrome смотрел 

Изменено 27 ноября, 2015 пользователем Electr0n

[Electr0n 1]

Проблема действительно. В браузерах

Firefox отображает корректно

 

В Opera и Google Chrome слетает. 

 

Не могу понять в чем проблема. 

[Einshtein 678]

смотрел в хроме, опере, мазиле - везде корректно. Проблема видимо в конкретной версии браузера

[Electr0n 1]

смотрел в хроме, опере, мазиле - везде корректно. Проблема видимо в конкретной версии браузера

Не знаете случайно как это адаптировать ? 

 

Или возможно есть другие варианты, наподобие моего? 

 

Ставил вот это , но не совсем то что нужно. Так как стрелки всегда активны. 

[Electr0n 1]

смотрел в хроме, опере, мазиле - везде корректно. Проблема видимо в конкретной версии браузера

В общем разобрался. Проблема была в верстке правого блока карточки товара. 

 

Значение    margin-left: 425px;

Не известно откуда берется, в product.tpl его нет.

 

Добавил в: product-info > .right {

 

Вот это: margin-left: 25px !important;

 

Скорее всего это не совсем правильно, так как лучше бы margin-left: 425px; совсем убрать.

 

Но не знаю где. Возможно в js это прописано. 

 

Изменено 30 ноября, 2015 пользователем Electr0n