如何使用 Alice 轮播一次映射一张图像？

【问题标题】：How to map one image at a time with Alice carousel?如何使用 Alice 轮播一次映射一张图像？
【发布时间】：2022-04-16 03:58:55
【问题描述】：

我正在尝试为我的产品添加轮播。我在product.images 中有一组网址图像，我想在轮播中单独显示，但是当我像这样映射它们时：

<AliceCarousel autoPlay autoPlayInterval="1500"> 
  {[product.images].map((x) => (         
    <img src={x} alt={x} className="medium" />
   ))}
</AliceCarousel>

它们不是单独显示，而是像这样一次性显示：

您将如何映射以使数组中的每个 url 单独显示在轮播中？谢谢

【问题讨论】：

标签： arrays reactjs mapping carousel

【解决方案1】：

现在可能 OP 解决了这个问题，但是如果您有响应对象，那么您可以指定何时显示您想要的元素数量。

const responsive = {
    2000: {
      items: 10,
    },
    1200: {
      items: 5,
    },
    800: {
      items: 3,
    },
    0: {
      items: 1,
    },
  };
<AliceCarousel responsive={responsive} autoPlay autoPlayInterval="1500"> 
  {[product.images].map((x) => (         
    <img src={x} alt={x} className="medium" />
   ))}
</AliceCarousel>

在这种情况下，屏幕宽度为 0px 到 799px 会有 1 个项目

来源：https://github.com/maxmarinich/react-alice-carousel

【讨论】：