如何一次移动多张幻灯片 - bootstrap carousel

Question

我有一个引导旋转木马，显示6个幻灯片，一次在桌面上移动一张幻灯片，在移动设备上显示2和幻灯片1，我试图让它在桌面和2张幻灯片上一次移动6张幻灯片在移动设备上，但似乎无法找到如何做到这一点。

的Javascript

$('#itemslider .carousel-inner .item:first').addClass('active');
$('#'#itemslider').carousel({ interval: false });

$('.carousel-showmanymoveone .item').each(function(){
    var itemToClone = $(this);

      for (var i=1;i<6;i++) {
        itemToClone = itemToClone.next();
          if (!itemToClone.length) {
            itemToClone = $(this).siblings(':first');
          }

       itemToClone.children(':first-child').clone()
       .addClass("cloneditem-"+(i))
       .appendTo($(this));
     }
});

HTML

<div class="container">
  <div class="row" id="slider-text">
    <div class="col-md-6" >
      <h2>Product Slider</h2>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <div class="carousel carousel-showmanymoveone slide" id="itemslider">
        <div class="carousel-inner">
          <div class="item">
            <div class="col-xs-6 col-sm-2">
              <a href="#"><img src="holder.jpg" class="img-responsive center-block"></a>
            </div>
           </div>

           <div class="item">
             <div class="col-xs-6 col-sm-2">
               <a href="#"><img src="holder.jpg" class="img-responsive center-block"></a>
             </div>
           </div>

           <div class="item">
             <div class="col-xs-6 col-sm-2">
               <a href="#"><img src="holder.jpg" class="img-responsive center-block"></a>
             </div>
           </div>

           <div class="item">
             <div class="col-xs-6 col-sm-2">
               <a href="#"><img src="holder.jpg" class="img-responsive center-block"></a>
             </div>
           </div>

           <div class="item">
             <div class="col-xs-6 col-sm-2">
               <a href="#"><img src="holder.jpg" class="img-responsive center-block"></a>
             </div>
           </div>

           <div class="item">
             <div class="col-xs-6 col-sm-2">
               <a href="#"><img src="holder.jpg" class="img-responsive center-block"></a>
             </div>
           </div>

         </div>

         <div id="slider-control">
           <a class="left carousel-control" href="#itemslider" data-slide="prev">
            <img src="arrow_left.jpg" alt="Left" class="img-responsive">
           </a>
           <a class="right carousel-control" href="#itemslider" data-slide="next">
             <img src="arrow_right.jpg" alt="Right" class="img-responsive">
           </a>
       </div>
     </div>
   </div>
 </div>
</div>

CSS

#slider-control .carousel-control {
  position: initial;
  color: #000;
}
#slider-control .arrow-holder.right {
  right: 0;
  opacity: .8;
}
#slider-control .arrow-holder.right:hover {
  right: -12px;
  opacity: 1;
}
#slider-control .arrow-holder.left {
  left: 0;
  opacity: .8;
}
#slider-control .arrow-holder.left:hover {
  left: -12px;
  opacity: 1;
}

@media screen and (max-width: 992px){
   #slider-control img {
     padding-top: 70px;
     margin: 0 auto;
   }
}

.carousel-showmanymoveone .carousel-control {
  width: 4%;
  background-image: none;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3,
.carousel-showmanymoveone .cloneditem-4,
.carousel-showmanymoveone .cloneditem-5 {
  display: none;
}

@media all and (min-width: 321px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}

@media all and (min-width: 321px) and (transform-3d), all and (min-width: 321px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

@media all and (min-width: 768px) {
   .carousel-showmanymoveone .carousel-inner > .active.left,
   .carousel-showmanymoveone .carousel-inner > .prev {
      left: -16.666%;
   }
   .carousel-showmanymoveone .carousel-inner > .active.right,
   .carousel-showmanymoveone .carousel-inner > .next {
     left: 16.666%;
    }
    .carousel-showmanymoveone .carousel-inner > .left,
    .carousel-showmanymoveone .carousel-inner > .prev.right,
    .carousel-showmanymoveone .carousel-inner > .active {
      left: 0;
    }
    .carousel-showmanymoveone .carousel-inner .cloneditem-2,
    .carousel-showmanymoveone .carousel-inner .cloneditem-3,
    .carousel-showmanymoveone .carousel-inner .cloneditem-4,
    .carousel-showmanymoveone .carousel-inner .cloneditem-5,
    .carousel-showmanymoveone .carousel-inner .cloneditem-6  {
      display: block;
    }
 }

 @media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
    .carousel-showmanymoveone .carousel-inner > .item.active.right,
    .carousel-showmanymoveone .carousel-inner > .item.next {
      -webkit-transform: translate3d(16.666%, 0, 0);
      transform: translate3d(16.666%, 0, 0);
      left: 0;
    }
    .carousel-showmanymoveone .carousel-inner > .item.active.left,
    .carousel-showmanymoveone .carousel-inner > .item.prev {
      -webkit-transform: translate3d(-16.666%, 0, 0);
      transform: translate3d(-16.666%, 0, 0);
      left: 0;
    }
    .carousel-showmanymoveone .carousel-inner > .item.left,
    .carousel-showmanymoveone .carousel-inner > .item.prev.right,
    .carousel-showmanymoveone .carousel-inner > .item.active {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      left: 0;
    }
  }

对此有任何帮助将不胜感激。

感谢。