如何在react-responsive-carousel中制作连续循环的幻灯片？

Question

我在我的应用程序中使用react-responsive-carousel。当我滚动最后一张幻灯片中的下一张幻灯片时，它会移至第一张幻灯片。但它会转到第一张幻灯片，并穿过中间的所有幻灯片。如何防止这种行为并使其连续循环移动（在最后一张幻灯片之后立即显示第一张幻灯片？

这是基本代码：

import React from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

const App = () => {
  return (
    <Carouel    
      infiniteLoop={true}
    >
      <div>
        <img src="./img-1.jpg"></img>
      </div>
      <div>
        <img src="./img-2.jpg"></img>
      </div>
      <div>
        <img src="./img-3.jpg"></img>
      </div>       
    </Carousel>
  );
};

export default App;

这里是codesandbox的链接：https://codesandbox.io/s/react-responsive-carousel-complete-demo-8gkkqj?file=/src/App.js:1044-1126&resolutionWidth=320&resolutionHeight=675

Answer 1

谢谢你，我花了很长时间试图解决这个问题！我的代码现在完美运行！