Bootstrap Carousel动态图片分页问题：每页4张无法切换

我明白你的困扰——你想用Bootstrap 3的Carousel实现每页固定4张图片的轮播，但因为图片是动态生成的，所有图片都堆在同一个轮播项里，导致切换按钮根本没法翻页。之前尝试的slice()和wrapAll()思路是对的，只是可能没用到正确的结构上，咱们来调整一下：

核心问题分析 #

Bootstrap Carousel的切换逻辑是基于.item元素的——每一个.item对应轮播的一页。你现在的代码里所有图片都放在同一个.item.active容器内，自然没有其他“页”可以切换到。我们需要把每4个图片列（.col-md-3）分组，分别包裹到独立的.item中，每个.item内部用.row来排列这4个图片。

解决方案代码 #

下面是修改后的完整实现，包含动态分组的JS逻辑：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="our-partners-wrap hidden-xs">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <h2 class="text-center section-heading">Our Partners</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div id="Carousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">
            <!-- 临时容器：存放动态生成的图片列 -->
            <div class="row justify" id="partner-images-container">
              <!-- 这里可以放入动态生成的图片列 -->
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/300x250.jpg" alt="Image" style="max-width:100%;"></a>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/Tissue_World_Miami-300x250.png" alt="Image" style="max-width:100%;"></a>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/300x250 kenya.jpg" alt="Image" style="max-width:100%;"></a>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/300x250 tanzania.jpg" alt="Image" style="max-width:100%;"></a>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/300x250 tanzania.jpg" alt="Image" style="max-width:100%;"></a>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/300x250 tanzania.jpg" alt="Image" style="max-width:100%;"></a>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/300x250 tanzania.jpg" alt="Image" style="max-width:100%;"></a>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/300x250 tanzania.jpg" alt="Image" style="max-width:100%;"></a>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/300x250 tanzania.jpg" alt="Image" style="max-width:100%;"></a>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="thumbnail"><img src="https://cdn.paperindex.com/banner/300x250 kenya.jpg" alt="Image" style="max-width:100%;"></a>
              </div>
            </div>
          </div>
          <!--.carousel-inner-->
          <div class="pi-carousel-controls hidden-xs visible-md-up">
            <a data-slide="prev" href="#Carousel" class="left carousel-control"><i class="fa fa-angle-left"></i></a>
            <a data-slide="next" href="#Carousel" class="right carousel-control"><i class="fa fa-angle-right"></i></a>
          </div>
        </div>
        <!--.Carousel-->
      </div>
    </div>
  </div>
  <!--.container-fluid-->
</div>

<script>
$(document).ready(function() {
  // 获取所有图片列元素
  var $items = $('#partner-images-container .col-md-3');
  // 每页展示的图片数量
  var itemsPerPage = 4;
  
  // 按数量分组处理
  for (var i = 0; i < $items.length; i += itemsPerPage) {
    // 截取当前组的图片列
    var $group = $items.slice(i, i + itemsPerPage);
    // 将组包裹为Carousel需要的.item结构
    $group.wrapAll('<div class="item"><div class="row justify"></div></div>');
  }
  
  // 给第一个轮播项添加active类，确保初始显示
  $('.carousel-inner .item').first().addClass('active');
  
  // 手动初始化Carousel（动态生成后自动初始化可能失效）
  $('#Carousel').carousel({
    interval: false // 关闭自动轮播，可根据需求调整
  });
  
  // 移除临时容器
  $('#partner-images-container').remove();
});
</script>

代码说明 #

1. 临时容器：先把所有动态图片列放在#partner-images-container里，方便后续批量处理。
2. 分组逻辑：用slice()按每4个元素截取一组，再通过wrapAll()把每组包裹成符合Bootstrap Carousel要求的.item结构，每组对应一页轮播内容。
3. 激活初始页：必须给第一个.item添加active类，这是Bootstrap Carousel识别初始显示页面的必要条件。
4. 手动初始化：动态生成DOM后，自动初始化可能不生效，手动调用carousel()方法确保轮播功能正常，这里关闭了自动轮播，你可以根据需求修改interval参数。

这样修改后，点击左右切换按钮就能正常切换每页4张图片的轮播了。

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