使用Bootstrap 4轮播结合jQuery在视口中显示6个项目

嘿，我来帮你搞定这个6项轮播的问题！你已经改了网格和CSS的translateX，但核心的jQuery克隆逻辑和初始偏移没调整，所以导致滚动异常。下面是具体的修改步骤和代码：

1. 确认Bootstrap网格修改 #

原来的4项是用col-md-3（12/4=3），现在要显示6项，需要把每个轮播项的网格类改成col-md-2（12/6=2），确保一行刚好放下6个项目：

<div class="carousel-item">
  <div class="col-md-2">
    <!-- 你的项目内容 -->
  </div>
</div>

2. 修正CSS中的translateX值 #

把transform: translateX(25%);改成精确的16.6667%（因为1/6≈16.6667%，避免小数误差导致的错位）：

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(16.6667%);
}
.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
  transform: translateX(-16.6667%);
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

3. 关键：调整jQuery克隆与滚动逻辑 #

原来的代码是克隆前后4个元素来实现无缝滚动，现在要改成克隆前后6个元素，同时调整初始偏移量，确保页面加载时显示的是原始的6个项目：

$(document).ready(function() {
  const $carousel = $('#multi-item-carousel');
  const $carouselInner = $carousel.find('.carousel-inner');
  const $items = $carouselInner.find('.carousel-item');
  const cloneCount = 6; // 克隆数量改为6

  // 克隆前6个元素追加到轮播末尾，实现循环滚动
  $items.slice(0, cloneCount).clone().appendTo($carouselInner);
  // 克隆后6个元素前置到轮播开头
  $items.slice(-cloneCount).clone().prependTo($carouselInner);

  // 计算单个轮播项的宽度
  const itemWidth = $('.carousel-item').outerWidth();
  // 初始偏移：跳过开头克隆的6个元素，显示原始的第一个项目组
  $carouselInner.css('transform', `translateX(-${itemWidth * cloneCount}px)`);

  // 下一页按钮逻辑
  $('.carousel-control-next').click(function() {
    const currentTransform = parseInt($carouselInner.css('transform').split(',')[4]);
    let newTransform = currentTransform - itemWidth;

    // 当滚动到末尾克隆元素时，无缝跳回原始起始位置
    if (Math.abs(newTransform) >= ($items.length + cloneCount) * itemWidth) {
      newTransform = -cloneCount * itemWidth;
      $carouselInner.css('transition', 'none'); // 取消过渡，避免跳转动画
    } else {
      $carouselInner.css('transition', 'transform 0.5s ease');
    }
    $carouselInner.css('transform', `translateX(${newTransform}px)`);
  });

  // 上一页按钮逻辑
  $('.carousel-control-prev').click(function() {
    const currentTransform = parseInt($carouselInner.css('transform').split(',')[4]);
    let newTransform = currentTransform + itemWidth;

    // 当滚动到开头克隆元素时，无缝跳回原始末尾位置
    if (newTransform >= 0) {
      newTransform = -($items.length + cloneCount - 1) * itemWidth;
      $carouselInner.css('transition', 'none');
    } else {
      $carouselInner.css('transition', 'transform 0.5s ease');
    }
    $carouselInner.css('transform', `translateX(${newTransform}px)`);
  });
});

额外注意事项 #

• 确保所有轮播项的box-sizing设置为border-box，避免padding/margin导致宽度超出：

  .carousel-item .col-md-2 {
    box-sizing: border-box;
  }
  

• 如果需要自动轮播，记得把自动轮播的逻辑和手动滚动保持一致，同样处理克隆元素的跳转。
• 测试响应式场景，比如移动端可以调整为col-sm-4（显示3项），此时对应的translateX要改成33.3333%，克隆数量也需要对应调整为3。

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