如何在 React 的单个页面上堆叠多个轮播组件？

Question

在我的 React 应用程序中，我想在一个页面上包含 3 个图像轮播，这些轮播堆叠在彼此之上。我正在使用来自 React-Bootstrap 的旋转木马组件，它会呈现一些本地保存在 public 文件夹中的图像文件。

Here is a link to the source code from Bootstrap

TIA！

PS：请向我解释你的回答step-by-step，就像你在和一个 5 岁的孩子说话一样！我完全是编码初学者，还不认识大多数行话！

Answer 1

我的例子的假设：

我使用了 3 个堆叠的轮播，每个轮播有 3 张图片
图像循环播放（如果您到达第一个或最后一个，您将“跳”到另一边）
轮播图片没有说明文字

设置UI并配置轮播:

使用外部垂直堆叠堆叠您的 slider/button 部分和 go-back 按钮
使用内部水平堆栈来堆叠您的两个按钮和滑块
按如下方式配置每个轮播：

.

<Carousel
    controls={false}
    indicators={false}
    interval={null}
    activeIndex={slidersState[x]}
>

controls=false 将隐藏每边的箭头。
indicators=false 将隐藏转盘中间的“笔画”。
interval=null 将停用自动滑动。

定义状态并实现逻辑：

你需要这样的状态，它可以管理你的每一个轮播。在我的例子中，我给每个旋转木马一个 id 并将状态设置为第一张图片 (=0)。编写两个按钮 onClick 处理程序 - 用于前进和后退：

const initialSlidersState = {
    1: 0,
    2: 0,
    3: 0
};
const [slidersState, setSlidersState] = React.useState(initialSlidersState);

const nextSlide = (sliderId) => setSlidersState((prev) => {
  const currentIndex = prev[sliderId];
  let newIndex;
  if (currentIndex === 2) {
    newIndex = 0;
  } else {
    newIndex = currentIndex + 1;
  }
  return { ...prev, [sliderId]: newIndex };
});

const previousSlide = (sliderId) => setSlidersState((prev) => {
  const currentIndex = prev[sliderId];
  let newIndex;
  if (currentIndex === 0) {
    newIndex = 2;
  } else {
    newIndex = currentIndex - 1;
  }
  return { ...prev, [sliderId]: newIndex };
});

当然，这已经适用于动态数量的滑块和动态数量的图像，但为了简单起见，我使用了固定数量。对于按钮，您可以选择在到达 first/last 图像时停用它们。最后，您还可以采用旋转木马组件中的本机控件，但对于这个简单的示例来说就太过分了。

请查看以下代码沙盒：

https://codesandbox.io/s/eloquent-matsumoto-f8j1zf

如何在 React 的单个页面上堆叠多个轮播组件？

How to stack multiple carousel components on a single page in React?

reactjs

react-bootstrap

create-react-app

react-component