Bootstrap 4自定义滑块点击切换不流畅，求修复方案

看起来你这个多滑块的核心逻辑是通过克隆前后项实现同时显示多个内容，但平滑过渡失效的原因主要是自定义CSS结构和Bootstrap默认轮播过渡逻辑不匹配，加上关键过渡属性没有正确应用到轮播项上。下面是具体的修复思路和代码调整方案：

一、核心问题分析 #

1. Bootstrap默认的.carousel-item自带transition: transform .6s ease-in-out过渡动画，但你的自定义CSS没有确保这个属性被继承或保留，导致切换时直接跳转。
2. .carousel-inner的宽度和偏移设置不够精准，过渡位移计算出现偏差，无法触发平滑动画。
3. 克隆元素后的轮播项结构，需要保证过渡动画作用于正确的层级元素。

二、具体修复步骤 #

1. 确保轮播项的过渡属性生效 #

在你的CSS中添加对.carousel-item的过渡声明，强制覆盖可能的样式冲突：

.multi-item-carousel .carousel-item {
  transition: transform 0.6s ease-in-out !important;
  position: relative; /* 确保transform属性正常生效 */
}

2. 修正.carousel-inner的宽度和偏移值 #

当前的width:240%和left:-70%计算不够合理，调整为适配3个内容项的精准数值：

.multi-item-carousel .carousel-inner {
  width: 300%; /* 3个item__third各占33.333%，总宽度设为300% */
  left: -100%; /* 让中间的item__third刚好显示在视口内 */
}

3. 调整过渡位移的精准度 #

把原来的33%位移改为33.333%，和item__third的宽度比例完全匹配，避免动画错位：

.multi-item-carousel .carousel-item-next:not(.carousel-item-left),
.multi-item-carousel .carousel-item-right.active {
  -webkit-transform: translate3d(33.333%, 0, 0);
  transform: translate3d(33.333%, 0, 0);
}

.multi-item-carousel .carousel-item-prev:not(.carousel-item-right),
.multi-item-carousel .carousel-item-left.active {
  -webkit-transform: translate3d(-33.333%, 0, 0);
  transform: translate3d(-33.333%, 0, 0);
}

4. 优化克隆元素的JS逻辑（可选） #

你的JS克隆逻辑已经能实现前后项复制，这里调整为更清晰的写法，避免潜在的结构冲突：

$('.multi-item-carousel .carousel-item').each(function() {
  // 克隆下一个项的内容到当前项末尾
  let next = $(this).next().length ? $(this).next() : $(this).siblings(':first');
  next.find('.item__third').clone().appendTo($(this));
  
  // 克隆上一个项的内容到当前项开头
  let prev = $(this).prev().length ? $(this).prev() : $(this).siblings(':last');
  prev.find('.item__third').clone().prependTo($(this));
});

三、测试验证 #

把上述调整后的CSS和JS替换掉原来的对应部分，再点击prev/next按钮，就能看到平滑的过渡效果了。另外要注意：保持.item__third的浮动布局和33.333%宽度设置，确保整个轮播的位移计算始终准确。

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