如何在 antd Image.Preview 中使用 antd Carousel

问题描述

我正在将 React 与 ant 设计结合使用。我正在尝试创建一个包含卡片列表的页面。在每张卡片中，都有一个图像轮播。我希望当用户点击图像时，预览会打开，他们可以滑动（或点击箭头）以将所有图像视为大的全屏预览。

我试过了：

<Image.PreviewGroup>
    <Carousel autoplay>
        {this.images.map(
            (image: string,index: number) => {
                return <Image key={index} src={image} preview={{ getContainer: '#root' }} />;
             }
         )}
    </Carousel>
</Image.PreviewGroup>

但这里发生的情况是，当打开预览时，显示的不是 5 张图片，而是 11 张（图片显示了两次，其中一张图片显示了 3 次）。

如果我将 <Image.PreviewGroup> 放在 <Carousel> 中，那么我将多个图像堆叠在一起，而不是图像轮播。

我怎样才能让它显示一个可点击的轮播，当点击它时，会打开一个全屏预览，其中包含通过滑动/点击箭头可以看到的正确数量的图像？

提前致谢。

解决方法

刚刚遇到同样的问题并解决了它。对于代码结构，你尝试的第一个很好

主要问题：

主要问题在于使用 slick lib 的 carousel 。如果您检查您的页面，您会发现在轮播包装标签内，它为我们在代码中声明的每个 <img> 生成 2-3 个图像。所以自动地，包裹轮播的 Image.PreviewGroup 会检测到比它应该有的更多的 <img>

解决方案：

将 infinite={false} 道具添加到您的轮播组件中。有关更多详细信息，请参阅 slick 文档

antd reactjs reactjs