如何使用引导轮播显示多个项目

Question

I am trying to use carousel in my react project to show reviews. I am using bootstrap carousel. This is the carousel I am using

But I want to use like this

Every click on the button will slide in a item and one item will slide out. I can do one at a time but not like this.

Here is my Code:

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;

Answer 1

Just put three review cards per Carousel.Item instead of one. Carousel.Item is just a wrapper for one carousel "page".

Carousel.Item is already styled in a certain way, that's why you need a container/wrapper right below it. In my example I used Stack with direction="horizontal":

<Carousel.Item style={{ height: 500 }}>
  <Stack
    direction="horizontal"
    className="h-100 justify-content-center align-items-center"
    gap={3}
  >
    <Card>...</Card>
    <Card>...</Card>
    <Card>...</Card>
  </Stack>
</Carousel.Item>

https://codesandbox.io/s/relaxed-poitras-4w774i