Картинки слайдера съезжают

[kulich]

Привет еще раз - след проблема:

Слайдер производителей на главной странице.

Вот код

Код Выделить Развернуть

.jcarousel-skin-tango {
    background: #fff;


}
.jcarousel-skin-tango .jcarousel-container { margin:0;  }
.jcarousel-skin-tango .jcarousel-container li { padding: 0 !important;}
.jcarousel-skin-tango .jcarousel-container li a {line-height: 0;}
.jcarousel-skin-tango .jcarousel-container li img {display: block;}
.jcarousel-skin-tango .jcarousel-direction-rtl { direction: rtl; }
.jcarousel-skin-tango .jcarousel-container-horizontal {
  /*  width: 860px;*/
    padding: 10px 60px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
  /*  width:  880px;*/
 
}
.jcarousel-skin-tango .jcarousel-item {


}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
    margin-right: 20px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
    margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 26px;
    right: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../img/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(../img/prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 26px;
    left: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../img/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: -10px;
    background-image: url(../img/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    opacity:0.6
}

В общем если здесь .jcarousel-skin-tango .jcarousel-item {} ничего не указывать, то картинки начинают съезжать в несколько строчек. Если же указать длину каждого элемента, даже 1px, то они выстраиваются в ряд. Проблема последнего способа в том, что все картинки разной ширины, поэтому расстояние между ними получается разное. В первом случае расстояние равное, но они почему-то съезжают в несколько рядов.

Помогите пожалуйста.

Съехавшие



С указанной длиной 75px. Как видите, всё равно не хватает. Если сделать больше, совсем некрасиво.

[kulich]

Парни, помогите пожалуйста. Не могу, очень бесит эта проблемка)

[kulich]

Еще немного порылся.

Проблема в том, что в коде откуда-то берется длина в 300px. Всё, что сверху (+240) это отступы, которые я сам задаю. Откуда берется эта длина в 300px не понимаю.

[Vasiy]

Ну наверно из CSS какая версия PS.

[kulich]

1.5.5.0

[kulich]

Вот код шаблона

Код Выделить Развернуть

<link rel="stylesheet" type="text/css" href="{$module_dir}css/skin.css"/>
<script src="{$module_dir}js/jquery.jcarousel.min.js" type="text/javascript"></script>
    <script src="{$module_dir}js/slide.js" type="text/javascript"></script>
   
{if $manufacturers}
   <ul id="mycarousel" class="jcarousel-skin-tango">
      {foreach from=$manufacturers item='manufacturer' name=manufacturer}
<li>
<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{$manufacturer.name|truncate:25:'...'|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}tmp/manufacturer_mini_{$manufacturer.id_manufacturer}_1.jpg" alt="{$manufacturer.name|truncate:15:'...'|escape:'htmlall':'UTF-8'}" /></a>
</li>
      {/foreach}
    </ul>
 

{/if}




Вот код skin.css

Код Выделить Развернуть




.jcarousel-skin-tango {
    background: #fff;




}
.jcarousel-skin-tango .jcarousel-container { margin:0;  }
.jcarousel-skin-tango .jcarousel-container li { padding: 0 !important;}
.jcarousel-skin-tango .jcarousel-container ul {width: 300px;}
.jcarousel-skin-tango .jcarousel-container li a {line-height: 0;}
.jcarousel-skin-tango .jcarousel-container li img {display:  block;}
.jcarousel-skin-tango .jcarousel-direction-rtl { direction:rtl; }
.jcarousel-skin-tango .jcarousel-container-horizontal {
  /*  width: 860px;*/
 
    padding: 10px 60px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {

  /*  width:  880px;*/
 
}
.jcarousel-skin-tango .jcarousel-item {




}


.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
    margin-right: 20px;

}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
    margin-right: 0;

}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;

}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 26px;
    right: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../img/next-horizontal.png) no-repeat 0 0;

}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(../img/prev-horizontal.png);

}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 26px;
    left: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../img/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: -10px;
    background-image: url(../img/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    opacity:0.6
}


Как я понимаю, дело в этой строчке. Как ее исправить не понимаю.

[kulich]

Код Выделить Развернуть

.jcarousel-skin-tango .jcarousel-container ul {width: 300px;}
Эта строчка моя, извиняюсь, удалил уже.

[kulich]

Начал искать где находится mycarousel из

Код Выделить Развернуть

<ul id="mycarousel" class="jcarousel-skin-tango">
потому что без него логотипы выстраиваются просто в стандартный список в столбик.
Нашел только здесь в js файле.

Код Выделить Развернуть

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 1,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});

Как понял, отсюда вызывается функция jcarousel. Можно здесь как-то задать размеры? В скриптах совсем ничего не понимаю.

[kulich]

Нашел, всем спасибо 

[DarinSr]

Расчет ширины элементов просиходит в файле slide.js.