Carousel 引导媒体滑块转盘重复项目

我正在使用引导媒体滑块旋转木马。但是，如果项目少于4，则是重复项目。我希望每次单击滑动一个项目

请参阅下面的代码

JQUERY

    $(document).ready(function(){
          $('#media').carousel({
            pause: true,
            interval: false
          });
          $('.carousel .item').each(function(){
            var next = $(this).next();
            if (!next.length) {
              next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));
            for (var i=0;i<2;i++) {
              next=next.next();
              if (!next.length) {
                next = $(this).siblings(':first');
              } 
              next.children(':first-child').clone().appendTo($(this));
            }
          });
     });

 $(document).ready(function(){
      $('#media').carousel({
        pause: true,
        interval: false
      });     
 });

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="carousel-pack">
   <div class="carousel-pack-inner">
     <div class="carousel slide media-carousel" id="media">
       <div class="carousel-inner">
          <div class="item  active">
            <div class="row-new">
              <div class="thumbs">
              <a class="thumbnail" href="#">1</a>
              </div>                                      
            </div>
          </div>
          <div class="item">
            <div class="row-new">
              <div class="thumbs">
              <a class="thumbnail" href="#">2</a>
              </div>                            
            </div>
          </div>
         </div>
      <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
      <a data-slide="next" href="#media" class="right carousel-control">›</a>
    </div>                          
   </div>
  </div>

 <div class="carousel-pack">
   <div class="carousel-pack-inner">
     <div class="carousel slide media-carousel" data-ride="carousel" data-wrap="true" id="media">
       <div class="carousel-inner">
         <?php 
           $active = 'active';

            $pages = array_chunk($file_array,3);

            foreach ($pages as $key => $data) { ?>
              <div class="item <?php echo $active; ?>">
                 <?php foreach ($data as $key => $value) { ?>
                   <div class="row-new">
                     <div class="thumbs">
                        <a class="thumbnail" href="#" target="_blank"><?php echo $value; ?></a>
                     </div>
                   </div>
            <?php } ?>
           </div>
      <?php $active='';
       } ?>
  </div>
  <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
  <a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>                          

---

看它重复2。我只有两个项目1和2。如何停止重复项目？

通过使用array\u chunk（）和foreach将数组拆分为块来解决此问题

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="carousel-pack">
   <div class="carousel-pack-inner">
     <div class="carousel slide media-carousel" id="media">
       <div class="carousel-inner">
          <div class="item  active">
            <div class="row-new">
              <div class="thumbs">
              <a class="thumbnail" href="#">1</a>
              </div>                                      
            </div>
          </div>
          <div class="item">
            <div class="row-new">
              <div class="thumbs">
              <a class="thumbnail" href="#">2</a>
              </div>                            
            </div>
          </div>
         </div>
      <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
      <a data-slide="next" href="#media" class="right carousel-control">›</a>
    </div>                          
   </div>
  </div>

 <div class="carousel-pack">
   <div class="carousel-pack-inner">
     <div class="carousel slide media-carousel" data-ride="carousel" data-wrap="true" id="media">
       <div class="carousel-inner">
         <?php 
           $active = 'active';

            $pages = array_chunk($file_array,3);

            foreach ($pages as $key => $data) { ?>
              <div class="item <?php echo $active; ?>">
                 <?php foreach ($data as $key => $value) { ?>
                   <div class="row-new">
                     <div class="thumbs">
                        <a class="thumbnail" href="#" target="_blank"><?php echo $value; ?></a>
                     </div>
                   </div>
            <?php } ?>
           </div>
      <?php $active='';
       } ?>
  </div>
  <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
  <a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>