自定义Bootstrap Carousel使用flex和gap滑动时间隙异常问题

问题根源 #

你现在的问题出在布局模式不一致：只有.active的carousel-item用了display: flex和column-gap设置间隙，非活跃轮播项还是用float: left布局且无间隙。轮播滑动时，元素在活跃/非活跃状态间切换，布局模式突然变化，就会出现间隙消失又重现的视觉bug。

修复步骤 #

1. 统一所有轮播项的Flex布局

给所有carousel-item设置display: flex，不再区分active状态，同时把间隙属性加到所有轮播项上，确保滑动过程中间隙始终存在。

2. 调整Carousel Inner的尺寸与定位

原宽度计算基于float布局，改用flex后需重新计算carousel-inner的宽度和left值，保证轮播可视区域正确。

3. 移除Float干扰样式

删掉.product_card上的float: left，flex布局下该属性会干扰元素排列。

4. 统一间隙变量（可选）

把间隙值抽成变量，方便后续统一调整，避免重复修改。

修改后的Sass代码 #

// Mobile
.newProductsCarousel {
  .carousel {
    overflow: hidden;

    &-item {
      .product_card:first-child,
      .product_card:last-child {
        display: none;
      }

      .product_card {
        height: 340px;
        text-align: center;
      }
    }
  }
}

// Desktop
.newProductsCarousel {
  $fragment_width: 25%;
  $gap: 20px; // 统一管理间隙值

  // 适配flex布局的滑动偏移计算
  .carousel-item-next:not(.carousel-item-start),
  .carousel-item-end.active {
    transform: translateX(calc(33.333% + #{$gap}));
    -webkit-transform: translateX(calc(33.333% + #{$gap}));
  }
  .carousel-item-prev:not(.carousel-item-end),
  .carousel-item-start.active {
    transform: translateX(calc(-33.333% - #{$gap}));
    -webkit-transform: translateX(calc(-33.333% - #{$gap}));
  }

  .carousel {
    &-inner {
      // 重新计算宽度：3个元素宽度 + 2个间隙
      width: calc((100% - 2 * #{$fragment_width}) * 3 + 2 * #{$gap});
      left: calc(3 * #{$fragment_width} - 100%);
    }

    &-item {
      // 所有轮播项统一flex布局
      display: flex;
      column-gap: $gap;
      flex-wrap: nowrap;

      .product_card {
        display: block !important;
        height: 340px;
        width: 33.33333333%;
        text-align: center;
        position: relative;
        padding: 30px 0;
        float: none; // 移除float属性
      }
    }
  }
}

修复逻辑说明 #

• 统一flex布局后，所有轮播项的间隙始终存在，滑动时不会因为布局切换导致间隙消失。
• 滑动偏移计算加入了间隙宽度，确保元素滑动距离准确，避免偏移错误。
• 抽离间隙为变量，后续调整时只需修改一处即可。

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