javascript - 簡単なjsスライダーで一部の画像が繰り返されています

Question

こんにちは、画像のスライドに簡単な js スライダーを使用しています。スライドごとに3つの画像を表示したい。ここに私のjsコードがあります

 <?php
 $slide = true;
 $noOfItems = 3;
  //count($this->statSummary['top_products_data'] is having 5
 if (count($this->statSummary['top_products_data']) <= $noOfItems) {
   $slide = false;
 }
 ?>
$(document).ready(function(){   
    $("#slider").easySlider({
        hoverStop:false,
        auto: false,
        hoverStop:false,
        continuous: false,
        controlsFade:true,
       <?php if ($slide) { ?>
            controlsShow: true,
       <?php } else { ?>
            controlsShow: false,
       <?php } ?>
        verticalHeight: 150
    });

});

何が起こっているのか、次の矢印が付いた 3 つの写真が表示されます。次のボタンをクリックすると、1 つの画像がスライドし、別の画像が表示され、前のボタンも表示されます。しかし、最初の2つの画像が再び表示され（それらが繰り返されます）、次の矢印が消えます。なぜそれが起こっているのかわかりません。最初の 2 つの画像の繰り返しを停止する方法を教えてもらえますか?

これが私のhtmlです

    <li class="rate sliderli">
     <div id="slider">
       <ul>
         <?php
            if (isset($this->statSummary['top_products_data']))
            {
              foreach ($this->statSummary['top_products_data'] as $top_product)
              {
                ?><li><img src="<?php echo $top_product['image_small']; ?>" alt="<?php echo $top_product['product_name']; ?>"/></li><?php
               }
              }
             ?>
           </ul>
        </div>
      </li>

そして、私のCSSは次のようになります

 #slider{
 width: 474px;
 margin:10px auto;
}
#slider li{
width: 150px;
height: 150px;
}
#summaryBox ul li.sliderli{
position: relative;
width: 650px;
}