如何用React.js+Bootstrap创建并排可滚动弹出式轮播

现成组件包推荐 #

直接用成熟组件包能快速落地需求，以下几个都适配你的场景：

• react-multi-carousel：支持centerMode配置，开箱就能让中间卡片居中突出，还能自定义样式加阴影。核心配置示例：

  import Carousel from 'react-multi-carousel';
  import 'react-multi-carousel/lib/styles.css';
  
  const responsive = {
    desktop: { breakpoint: { max: 3000, min: 1024 }, items: 3 },
    tablet: { breakpoint: { max: 1024, min: 464 }, items: 3 },
    mobile: { breakpoint: { max: 464, min: 0 }, items: 1 }
  };
  
  <Carousel
    responsive={responsive}
    centerMode={true}
    customTransition="all .5s"
    containerClass="carousel-container"
    itemClass="carousel-item-padding-40-px"
  >
    {cards.map((card, idx) => (
      <div key={idx} className={`card ${idx === activeIndex ? 'active-card' : ''}`}>
        {card.content}
      </div>
    ))}
  </Carousel>
  

  配套CSS：

  .active-card {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 10;
  }
  

• react-slick：通过centerMode: true配合自定义slide样式实现，支持滑动切换，社区资源充足。
• react-responsive-carousel：可通过修改选中项的样式实现突出效果，配置灵活。

手动实现思路（基于Bootstrap） #

如果不想依赖第三方包，可基于Bootstrap Carousel改造：

1. 引入Bootstrap Carousel组件，将默认全屏布局改为横向多卡片排列，设置overflow-x: auto允许横向滚动。
2. 用React state跟踪当前激活卡片索引，给中间激活卡片添加**缩放（transform: scale(1.1)）和阴影（box-shadow）**样式，同时提高z-index让它处于上层。
3. 实现切换逻辑：复用Bootstrap Carousel的prev/next方法，或监听鼠标、触摸事件切换激活索引，实时更新卡片样式。
4. 响应式适配：用Bootstrap栅格类或媒体查询，在不同屏幕尺寸下调整显示的卡片数量。

核心样式示例：

.carousel-inner {
  display: flex;
  align-items: center;
  overflow-x: auto;
  gap: 1rem;
  padding: 1rem 0;
}
.carousel-item {
  flex: 0 0 auto;
  width: 280px;
  transition: all 0.3s ease;
}
.carousel-item.active {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  z-index: 5;
}

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