javascript - 对齐 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: This site is not yet live, please do not shop.

Answer 1

中间实例的宽度为 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 问题。