Question

我正在使用JCarouselLite在网站上制作三个滚动框。其中2个轮播正确排列（New，Gifts)，但有三分之一没有（BestSellers）。

图像浮动到左侧，因为插件不断地计算宽度。这三个都有相同的底层HTML代码，但我无法让BestSeller Carousel正确排列。

我也尝试在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。

左内容：

<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问题。

Answer 2

我将其缩小到产品名称。我相信它与名字中的外来人物有关。当我拿出这些产品时，布局正确解析。 - 现在我必须弄清楚如何解决这个问题。： - ）

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

感谢您帮助我通过乔治思考这一点！

对齐JCarouselLite的多个实例

2 个答案: