動的な数値またはforeachループから生成された要素に基づいて幅を計算してください

Question

私はprototype carouselを使用しています。私は動的に生成された要素の数でそれをしようとしているので、内側のdivの量は変わるでしょう。今のところ、スクリプトは幅を固定し、スクリプトにコード化する必要があるようです。

内側のコンテンツは、このようなforeachループで生成されます。

<div class="carousel" id="example-2"> 
<a href="javascript:" class="carousel-control next" rel="next">&rsaquo;</a> 
<a href="javascript:" class="carousel-control prev" rel="prev">&lsaquo;</a> 
    <div class="middle"> 
    <!-- how can this inner width be dynamically populated ? --> 
     <div class="inner" style="width: 3000px"> 
     <?php foreach ($_productCollection as $_product): ?> 
     <?php if($_product->isSaleable()): ?> 
     <img class="<?php echo $_product->getId() ?>" src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /> 
     <?php endif; ?> 
     <?php endforeach ?> 
     </div> 
    </div> 

    <script type="text/javascript"> 
    new Carousel($('example-2').down('.middle'), $('example-2').down('.inner').select('img'), $('example-2').select('a'), { 
           duration: 0.5, 
           transition: 'sinoidal', 
           visibleSlides: 6, 
           circular: true 
          }); 
         </script> 
       </div> 

は、どのように私は、foreachループで生成されている$ _productのdivの数から総カウント数を取得するのでしょうか？ 10があるとし、imgの固定幅、つまり50pxが何であれ、それを乗算します。次に、.inner幅に500pxを設定できます。

Answer 1

1つのアイテム（パディングを含む）が表示領域にどれくらいのスペース[ピクセル]を取るかを計算します。指定した時間に表示されているアイテムの量を掛け合わせると、表示領域の流体幅が決まります。

/* Always be sure to give your carousel items a width and a height */ 
    .yui-carousel-element li { 
     height: 75px; 
     width: 75px; 
    }