如何让Bootstrap响应式轮播滑块显示4个项目（仿电商轮播）

我看了你写的轮播代码，发现几个关键问题导致没法同时显示4个项目——每个轮播项里只有一个内容模块、CSS的宽度比例是按3项设置的，还有JS克隆元素的数量没跟上。咱们一步步调整，就能实现你想要的电商风格4项轮播啦！

1. 调整HTML结构 #

首先把每个内容块的列类改成col-xs-3 col-sm-3（因为4个项目平分宽度，每个占1/4，对应Bootstrap的col-*-3），同时去掉多余的col-sm-12，避免宽度冲突：

<div class="container-fluid">
 <div class="row">
 <div class="col-md-12">
 <div class="carousel slide multi-item-carousel" id="theCarousel">
 <div class="carousel-inner">
 <!-- 第一个活跃轮播项 -->
 <div class="item active">
 <div class="col-xs-3 col-sm-3"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
 </div>
 <div class="item">
 <div class="col-xs-3 col-sm-3"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
 </div>
 <div class="item">
 <div class="col-xs-3 col-sm-3"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
 </div>
 <div class="item">
 <div class="col-xs-3 col-sm-3"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
 </div>
 <div class="item">
 <div class="col-xs-3 col-sm-3"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
 </div>
 <div class="item">
 <div class="col-xs-3 col-sm-3"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
 </div>
 </div>
 <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
 <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
 </div>
 </div>
 </div>
 </div>

2. 修改CSS样式 #

原来的CSS是按3个项目设置的33%宽度，现在要改成25%，同时修正轮播项的过渡位置，还要修复拼写错误（原来的.carouse-control少了个l，改成.carousel-control）：

.multi-item-carousel {
  .carousel-inner {
    > .item { transition: 500ms ease-in-out left; }
    .active {
      &.left { left: -25%; }
      &.right { left: 25%; }
    }
    .next { left: 25%; }
    .prev { left: -25%; }
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item {
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none !important;
      }
    }
  }
  .carousel-control {
    &.left, &.right { background-image: none; }
  }
}
// 非相关样式保持不变
body { background: #333; color: #ddd; }
h1 { color: white; font-size: 2.25em; text-align: center; margin-top: 1em; margin-bottom: 2em; text-shadow: 0px 2px 0px rgba(0, 0, 0, 1); }

3. 调整JS克隆逻辑 #

原来的JS只克隆了2个元素，现在需要克隆3个，这样每个.item里就会有4个内容块（自身1个+克隆3个），同时处理轮播项到末尾的边界情况：

// 初始化Bootstrap轮播
$('.multi-item-carousel').carousel({ interval: 3000 });

$('.multi-item-carousel .item').each(function(){
  var $currentItem = $(this);
  
  // 克隆第一个下一项
  var nextItem = $currentItem.next();
  if (!nextItem.length) {
    nextItem = $currentItem.siblings(':first');
  }
  nextItem.children(':first-child').clone().appendTo($currentItem);
  
  // 克隆第二个下一项
  var nextNextItem = nextItem.next();
  if (!nextNextItem.length) {
    nextNextItem = $currentItem.siblings(':first');
  }
  nextNextItem.children(':first-child').clone().appendTo($currentItem);
  
  // 克隆第三个下一项（凑够4个项目）
  var nextNextNextItem = nextNextItem.next();
  if (!nextNextNextItem.length) {
    nextNextNextItem = $currentItem.siblings(':first');
  }
  nextNextNextItem.children(':first-child').clone().appendTo($currentItem);
});

这样修改后，每个轮播项里就会包含4个内容模块，CSS的25%宽度让每个模块刚好占满1/4的空间，轮播切换时会整体移动25%的宽度，完美实现同时显示4个项目的响应式轮播效果。

内容的提问来源于stack exchange，提问作者pri