title: How to use antd Carousel with antd Image.Preview
body: <p>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.</p>
  <p>I tried this:</p>
  <pre><code>&lt;Image.PreviewGroup&gt;
      &lt;Carousel autoplay&gt;
          {this.images.map(
              (image: string, index: number) =&gt; {
                  return &lt;Image key={index} src={image} preview={{ getContainer: '#root' }} /&gt;;
               }
           )}
      &lt;/Carousel&gt;
  &lt;/Image.PreviewGroup&gt;
  </code></pre>
  <p>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).</p>
  <p>If I place <code>&lt;Image.PreviewGroup&gt;</code> inside the <code>&lt;Carousel&gt;</code>, then instead of having an image carousel, I have multiple images stacked under each other.</p>
  <p>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?</p>
  <p>Thanks in advance.</p>