卡片轮播，在 CSS 中使用 React 堆叠

Question

我想创造这样的东西。 卡片看起来像堆叠在一起，还有三个点来切换它们。谁能告诉我如何实现这个？

Answer 1

您的问题不够具体，给人的印象是您希望其他人为您完成工作，因此这可能就是您收到反对票的原因。但如果你问的是如何处理这样的任务，我能想到的一种可能的方法是这样的：

• 让每张卡片都成为一个带有 id 的组件，
• 在容器组件的状态下，保留 (1) 所有 id 的列表和 (2) 活动/当前 ID
• 将 id 与小点匹配，以便每个点都链接到一张卡片（用于 onClick 事件和样式）
• 显示带有活动 id 的卡片，并为点实现 onClick 事件（也可能为移动设备实现滑动事件），以便每个点将激活其关联的卡片，这样您就可以在卡片之间切换李>
• 使它们看起来像是堆叠的卡片的视觉效果可能只能在 CSS 中完成，或者是 JS 和 CSS 的组合，这取决于您希望如何为卡片开关等设置动画。

但同样，这只是众多方法中的一种。无论您是想采用这种方法还是选择其他方法，它的实际实施都取决于您。