对齐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

中间实例的宽度为135px，而左实例和右实例的宽度为180px。

左内容

中间内容

我使用火虫来诊断CSS问题。

Answer 2

我把范围缩小到产品名称上。我相信这和名字里的外来语有关。当我把这些产品拿出来时，布局就会正确地解决。--现在我得想办法解决这个问题.:-)

问题是在li元素中有两个div。我把两个包在另一个div内，并给它一个固定的宽度和高度。现在这个插件使用div来计算它的大小。

谢谢你帮我通过乔治来思考这个问题！