carousel - Bootstrap Media Slider Carousel 重复项目

Question

我正在使用引导媒体滑块轮播。但是，如果项目少于 4 个，它会重复项目。我想每次点击滑动一个项目。

在下面查看我的代码

查询

    $(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));
            }
          });
     });

已经尝试改变 [for (var i=0;i<2;i++) {] i<4 and i<6 而不是 i<2

CSS：

/* carousel */
    .carousel-pack{height:40px; margin:0; padding:0;}
    .carousel-pack-inner{width:252px; margin: 0 auto;}
    .media-carousel 
    {
      margin-bottom: 0;
      margin-top: 20px;
    }
    .carousel-control{line-height: 24px;}
    /* Previous button  */
    .media-carousel .carousel-control.left 
    {
        left: -37px;
        background-image: none;
        background: none repeat scroll 0 0 #222222;
        border: 2px solid #FFFFFF;
        height: 32px;
        width: 32px;
        margin-top: 4px;
    }
    /* Next button  */
    .media-carousel .carousel-control.right 
    {
        right: -37px;
        background-image: none;
        background: none repeat scroll 0 0 #222222;
        border: 2px solid #FFFFFF;
        height: 32px;
        width: 32px;
        margin-top: 4px;
    }
    /* Changes the position of the indicators */
    .media-carousel .carousel-indicators 
    {
      right: 50%;
      top: auto;
      bottom: 0px;
      margin-right: -19px;
    }
    /* Changes the colour of the indicators */
    .media-carousel .carousel-indicators li 
    {
      background: #c0c0c0;
    }
    .media-carousel .carousel-indicators .active 
    {
      background: #333333;
    }
    .thumbnail
    {
      width: 48px !important;
      height: 40px!important;
      border-radius:0;
      border-radius: 8px !important;
    }
    .thumbs{
        margin-right: 15px;
        padding: 0;
        float: left;
    }
    .thumbs:first-child{margin-left: 7px;}
    .thumbs:last-child{margin-right: 7px;}

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">‹&lt;/a>
      <a data-slide="next" href="#media" class="right carousel-control">›&lt;/a>
    </div>                          
   </div>
  </div>

看到它重复 2。我只有两个项目 1 和 2。我怎样才能停止重复项目？

Answer 1

通过使用array_chunk()和foreach将数组拆分成块来解决这个问题。

HTML

 <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">‹&lt;/a>
  <a data-slide="next" href="#media" class="right carousel-control">›&lt;/a>
</div>                          

查询

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