Выравнивание нескольких экземпляров JCarouselLite

Question

Я использую JCarouselLite , чтобы создать три поля прокрутки на веб-сайте. 2 из каруселей расположены правильно (New, Gifts), а третье - нет (BestSellers).

Изображение плавает влево, потому что плагин продолжает неправильно вычислять ширину. Все три имеют один и тот же базовый HTML-код, но я не могу заставить BestSeller Карусель правильно выстроиться.

Я также пытался запустить его на window.load. и init работает в нижнем колонтитуле.

Что мне не хватает?

Обновление

Вот код, который инициализирует карусель:

 jQuery(document).ready(function($){
       $(".rotateNewContent").jCarouselLite({
          btnNext: ".next", btnPrev: ".prev",
          speed: 800, visible: 1 
       });
       $(".rotateBestsellerContent").jCarouselLite({
          btnNext: ".nextBest", btnPrev:
          ".prevBest", speed: 800, visible: 1
       });
       $(".rotateGiftContent").jCarouselLite({
          btnNext: ".nextGift", btnPrev:
          ".prevGift", speed: 800, visible: 1
       });
 });

вот HTML первого и второго списков.

<button class="prev"></button>
   <div class="rotateWrapper"><div class="rotateNewContent">
     <ul class="NewProductList">
                                                   <li class="Odd">
        <div class="ProductImage">
            <a href="#"  ><img src="#" alt="" /></a>
        </div>
        <div class="ProductDetails">
            <strong>
                          <a href="#">Organic Maple Syrup from Mount Cabot</a>
                    </strong>
        </div>
        <div class="ProductPriceRating">
            <em>$13.00</em>
        </div>
      </li>
  <li class="Even">
    <div class="ProductImage">
              <a href="#"  ><img src="#" alt="" /></a>
        </div>
        <div class="ProductDetails">
            <strong>
                          <a href="#">Sicilian Marmalades from Marchesi di San 
                          Giuliano</a>
                    </strong>
        </div>
        <div class="ProductPriceRating">
            <em>$15.00</em>
        </div>
    </li>                       
</ul>
</div></div><button class="next"></button>
   <button class="prevBest"></button>
    <div class="rotateWrapper"><div class="rotateBestsellerContent">
       <ul class="NewProductList">
        <li>
            <div class="ProductImage"><a href="#" alt="" /></a>
        </div>
        <div class="ProductDetails">
            <strong><a href="#">Farro from Rustichella d&#039;Abruzzo</a></strong>
        <em>$8.75</em>
        </div>
        </li>                           
             <li>
        <div class="ProductImage">
        <a href="#" alt="" /></a>
        </div>
        <div class="ProductDetails">
            <strong><a href="#">Mariage Frères Marco Polo</a></strong>
            <em>$22.00</em>
            </div>
    </li>                   
    </ul>

NB : Этот сайт еще не запущен, пожалуйста, не делайте покупки.

Answer 1

Я сузил его до названия продуктов. я считаю, что это как-то связано с иностранными символами в именах. когда я вынимаю эти продукты, макет решается правильно. - Теперь я должен выяснить, как это исправить. : -)

проблема заключалась в том, что внутри элемента li было два элемента div. я обернул оба внутри другого div и дал ему заданную ширину и высоту. теперь плагин использует этот div для вычисления его размера.

спасибо, что помогли мне подумать об этом через Джорджа!

Answer 2

Средний экземпляр имеет ширину 135px, тогда как левый и правый экземпляры имеют ширину 180px.

Содержание слева :

<div class="rotateNewContent" style="overflow: hidden; visibility: visible; position:
 relative; z-index: 2; left: 0px; width: 180px;">

Среднее содержание :

<div class="rotateBestsellerContent" style="overflow: hidden; visibility: visible; 
position: relative; z-index: 2; left: 0px; width: 135px;">

Я использовал Firebug для диагностики проблем с CSS.