如何修改Bootstrap v5 Carousel实现Netflix式无缝并排滑动切换效果

完全可以通过覆盖Bootstrap默认样式实现该需求，无需修改Bootstrap核心源码。

修改说明 #

1. 先修正原React代码中混用class和className的问题，同时给轮播外层加自定义类carousel-netflix避免全局样式污染
2. 新增自定义CSS覆盖轮播默认的定位和过渡逻辑，取消原有的错位延迟，让两张幻灯片全程同步滑动

调整后的JSX代码 #

<div id="carousel" className="carousel slide carousel-netflix" data-bs-interval="false">
  <div className="carousel-inner">
    <div className="carousel-item active">
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2020%2F08%2F10%2Fblack-puppy-ball-157684732-2000.jpg&w=412&h=412&c=sc&poi=%5B620%2C519%5D&q=85" alt="dogs" />
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2020%2F08%2F10%2Fblack-puppy-ball-157684732-2000.jpg&w=412&h=412&c=sc&poi=%5B620%2C519%5D&q=85" alt="dogs" />
    </div>
    <div className="carousel-item">
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2020%2F08%2F10%2Fblack-puppy-ball-157684732-2000.jpg&w=412&h=412&c=sc&poi=%5B620%2C519%5D&q=85" alt="dogs" />
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2020%2F08%2F10%2Fblack-puppy-ball-157684732-2000.jpg&w=412&h=412&c=sc&poi=%5B620%2C519%5D&q=85" alt="dogs" />
    </div>
  </div>
  <button className="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
    <span className="visually-hidden">Previous</span>
  </button>
  <button className="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
    <span className="carousel-control-next-icon" aria-hidden="true"></span>
    <span className="visually-hidden">Next</span>
  </button>
</div>

自定义CSS代码 #

/* 覆盖Bootstrap默认轮播样式实现同步滑动 */
.carousel-netflix .carousel-inner {
  display: flex;
  overflow: hidden;
}
.carousel-netflix .carousel-item {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  margin-right: 0;
  flex: 0 0 auto;
  transition: transform 0.5s ease-in-out;
  backface-visibility: hidden;
}
/* 取消默认的绝对定位和延迟逻辑 */
.carousel-netflix .carousel-item-next,
.carousel-netflix .carousel-item-prev,
.carousel-netflix .carousel-item.active {
  display: block;
}
.carousel-netflix .active.carousel-item-end {
  transform: translateX(-100%);
}
.carousel-netflix .carousel-item-next {
  transform: translateX(100%);
}
.carousel-netflix .carousel-item-next.carousel-item-start {
  transform: translateX(0);
}
.carousel-netflix .active.carousel-item-start {
  transform: translateX(100%);
}
.carousel-netflix .carousel-item-prev {
  transform: translateX(-100%);
}
.carousel-netflix .carousel-item-prev.carousel-item-end {
  transform: translateX(0);
}

扩展说明 #

如果要实现Netflix同款多卡片并排展示的轮播效果，仅需要调整.carousel-netflix .carousel-item的宽度即可，比如设置width: 20%即可实现一屏展示5个卡片的效果，滑动逻辑完全兼容。

内容的提问来源于stack exchange，提问作者CSS-Romeo