React中如何用Bootstrap Carousel实现单条滑动多评价轮播

问题背景 #

• 开发场景：在React项目中使用Bootstrap Carousel轮播组件开发用户评价展示模块
• 当前实现问题：轮播每次切换会滑动整屏宽度，仅展示1条评价，无法实现每次切换仅滑动1条评价、同屏展示多条评价的效果
• 现有效果参考：
• 目标效果参考：

原有问题代码 #

const ShowReviews = () => {
const { data: reviews, isLoading, refetch } = useQuery('reviews', () => fetch('https://.herokuapp.com/reviews',)
    .then(res => res.json()))
refetch()
if (isLoading) {
    return <Loading></Loading>
}
return (
    <div>
        <h1 className='text-center fw-bold my-5'>User Reviews ({reviews.length})</h1>
        <div className='bg-dark bg-opacity-25 container-fluid'>
            <Carousel>
                {reviews.map(review => <Carousel.Item> <ReviewCard
                    key={review._id}
                    review={review}
                ></ReviewCard></Carousel.Item>)}
            </Carousel>
        </div>
    </div>
);
};
export default ShowReviews;

原有代码存在两个核心问题：一是在组件渲染顶层直接调用refetch()会触发无限重渲染循环；二是Bootstrap Carousel默认每个轮播项占满100%容器宽度，切换时位移100%宽度，天然适配单卡整屏切换，不支持默认多卡单条滑动。

实现步骤 #

• 修正数据请求逻辑：去掉顶层的refetch()调用，如需进入页面重拉数据可通过react-query自带配置项实现，避免无限请求。
• 自定义Carousel样式：给轮播组件添加自定义类名，覆盖默认的轮播项宽度、过渡动画位移值，让每次切换的位移距离等于单张评价卡的宽度。
• 保留单条评价对应一个Carousel.Item的结构，通过flex布局让多个Item横向排列在可视区域内，容器设置横向溢出隐藏。
• 受控控制轮播激活索引，保持组件默认的前后按钮切换逻辑，每次切换索引±1即可对应单张卡片的滑动距离。

修改后可运行代码 #

首先添加自定义样式（可写入项目全局样式或组件对应样式文件，宽度值可按需调整做响应式适配）：

/* 自定义轮播容器样式 */
.review-carousel {
  overflow: hidden;
  padding: 0 2rem;
}
.review-carousel .carousel-inner {
  display: flex;
  overflow: visible;
}
.review-carousel .carousel-item {
  /* 单卡宽度设置：同屏展示3张设33.333%，2张设50%，1张设100%，配合媒体查询做响应式适配即可 */
  flex: 0 0 33.333%;
  padding: 0 1rem;
  display: block;
  margin: 0;
}
/* 覆盖默认过渡效果，保证滑动步长和单卡宽度一致 */
.review-carousel .carousel-item.active,
.review-carousel .carousel-item-next,
.review-carousel .carousel-item-prev {
  display: block;
}
.review-carousel .carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}
.review-carousel .carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

再修改组件逻辑代码：

import { useState } from 'react';
import { Carousel } from 'react-bootstrap';
import { useQuery } from 'react-query';

const ShowReviews = () => {
  const { data: reviews, isLoading } = useQuery(
    'reviews', 
    () => fetch('https://.herokuapp.com/reviews').then(res => res.json()),
    {
      refetchOnWindowFocus: false,
      refetchOnMount: true // 替代手动调用refetch，挂载时自动拉取数据
    }
  );

  // 受控管理轮播激活索引
  const [activeIndex, setActiveIndex] = useState(0);
  const handleSelect = (selectedIndex) => {
    setActiveIndex(selectedIndex);
  };

  if (isLoading) {
    return <Loading />;
  }

  return (
    <div>
      <h1 className='text-center fw-bold my-5'>User Reviews ({reviews.length})</h1>
      <div className='bg-dark bg-opacity-25 container-fluid py-5'>
        <Carousel
          className='review-carousel'
          activeIndex={activeIndex}
          onSelect={handleSelect}
          interval={null} // 关闭自动轮播，需要自动播放可设置毫秒值
          slide={true}
          wrap={false} // 滚动到边界后停止循环，需要无限循环可设为true，配合首尾卡片复制实现无缝滚动
        >
          {reviews.map(review => (
            <Carousel.Item key={review._id}>
              <ReviewCard review={review} />
            </Carousel.Item>
          ))}
        </Carousel>
      </div>
    </div>
  );
};

export default ShowReviews;

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