如何将Bootstrap Logo轮播图改为每次切换4张图片？

要实现从1-4直接切换到5-8的效果，核心是调整轮播的item结构和切换偏移逻辑，以下是具体修改步骤：

1. 重构HTML结构 #

把每4个Logo放到同一个.item容器里，让每个item对应一整组要显示的内容：

<div class="carousel-inner">
  <!-- 第一组：1-4号Logo -->
  <div class="item active">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <img class="logo" src="http://via.placeholder.com/350x180?text=1">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <img class="logo" src="http://via.placeholder.com/350x180?text=2">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <img class="logo" src="http://via.placeholder.com/350x180?text=3">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <img class="logo" src="http://via.placeholder.com/350x180?text=4">
    </div>
  </div>
  <!-- 第二组：5-8号Logo -->
  <div class="item">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <img class="logo" src="http://via.placeholder.com/350x180?text=5">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <img class="logo" src="http://via.placeholder.com/350x180?text=6">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <img class="logo" src="http://via.placeholder.com/350x180?text=7">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <img class="logo" src="http://via.placeholder.com/350x180?text=8">
    </div>
  </div>
</div>

2. 简化JS脚本 #

原脚本是给单个item克隆后续3个Logo，现在每个item已经包含4张，替换成以下代码确保轮播循环逻辑正常：

$('.carousel[data-type="multi"]').on('slid.bs.carousel', function() {
  var $active = $(this).find('.carousel-inner .item.active');
  // 实现循环播放：滑到最后一组后回到第一组，滑到第一组后切到最后一组
  if (!$active.next().length) {
    $(this).find('.carousel-inner .item').first().addClass('active');
    $active.removeClass('active');
  }
  if (!$active.prev().length) {
    $(this).find('.carousel-inner .item').last().addClass('active');
    $active.removeClass('active');
  }
});

3. 调整CSS偏移量 #

修改轮播切换时的位移值，让每个item完整切换：

@media (min-width: 992px) {
  .carousel-inner .active.left {
    left: -100%; /* 改为-100%，对应整个item宽度 */
  }
  .carousel-inner .next {
    left: 100%; /* 改为100% */
  }
  .carousel-inner .prev {
    left: -100%; /* 改为-100% */
  }
}

/* 确保item内的Logo排列整齐 */
.carousel-inner .item {
  display: flex;
  flex-wrap: wrap;
}

原理说明 #

原来的结构是每个item只放1个Logo，通过JS克隆后续3个实现显示4张，但切换时还是按单个item逐张滑动。修改后每个item直接包含4张Logo，Bootstrap轮播默认每次切换一个item，自然就实现了一次切换4张的效果，同时调整CSS偏移量确保切换动画正确。

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