How to use antd Carousel with antd Image.Preview

user_7976626 0
Viewed 3388

I am using React with ant design. I am trying to create a page with a list of cards. In each card, there is an image carousel. I would like that when the user clicks on and image, the preview opens and they can swipe (or click on the arrows) to see all the images as a big, fullscreen preview.

I tried this:

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

But what happens here is that when the preview is opened, instead of showing 5 images, it is showing 11 (the images are shown twice, one of the images is shown 3 times).

If I place <Image.PreviewGroup> inside the <Carousel>, then instead of having an image carousel, I have multiple images stacked under each other.

How can I get it to show a clickable carousel, which when clicked, opens a fullscreen preview with the correct number of images that can be seen by swiping/clicking on arrows?

Thanks in advance.

antd reactjs
1 Answers

just got into same issue and solved it. for the code structure, the first one you tried was fine

MAIN PROBLEM:

the main issue is on the carousel, which is using slick lib. if you inspect your page, you will find that inside the carousel wrapper tag, it generates 2-3 images for each <img> we declare in our code. so automatically, the Image.PreviewGroup that wraps the carousel, will detect more <img> than it should have

SOLUTION:

add infinite={false} props to your carousel component. for more detail , please refer to slick docs

user_85068700
Related