Javascript 当转盘到达最后一张幻灯片时，返回第一张幻灯片

我在react js项目中使用

旋转木马按预期工作，但我需要使旋转木马在到达最后一张幻灯片时从第一张幻灯片开始

完整的工作示例：

代码：

<Carousel
  ssr
  deviceType={deviceType}
  itemClass="image-item"
  responsive={responsive}
>

我加了一句,

<Carousel
  infinite={true}
  autoPlay={true}
  autoPlaySpeed={3000}
  ssr
  deviceType={deviceType}
  itemClass="image-item"
  responsive={responsive}
>

但它会自动创建无限多的幻灯片，但这不是我的要求。。一旦到达终点，则应在1秒后返回到第一张幻灯片，因为用户需要向后移动

n

次数才能到达第一张幻灯片

---

请在旋转木马到达最后一张幻灯片时，帮助我从头开始播放幻灯片（有一些延迟，比如1000ms，这样用户可以在1s内看到最后一张幻灯片，然后可以查看第一张幻灯片。

你可以通过编写自己的Autolop和使用自定义按钮来实现这一点。老实说，也许你应该选择另一个做你想做的事情的库。但是你最终的目的是，我做了一个考试请注意，您需要为新按钮组添加CSS

import React, { useEffect, useRef } from "react";
import { render } from "react-dom";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 1,
    paritialVisibilityGutter: 60
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 1,
    paritialVisibilityGutter: 50
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
    paritialVisibilityGutter: 30
  }
};
const images = [
  "https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1550133730-695473e544be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
];

  /* ADD THIS LINE */
  // Your custom Button group. CSS need to be added
const ButtonGroup = ({ next, previous, goToSlide, ...rest }) => {
  const {
    carouselState: { currentSlide }
  } = rest;
  const lastImageIndex = images.length - 1;
  return (
    <div className="carousel-button-group" style={{ position: "absolute" }}>
      <button
        onClick={() =>
          currentSlide === 0 ? goToSlide(lastImageIndex) : previous()
        }
      >
        Prev
      </button>
      <button
        onClick={() =>
          currentSlide === lastImageIndex ? goToSlide(0) : next()
        }
      >
        Next
      </button>
    </div>
  );
};
  /* TO THIS LINE */

const Simple = ({ deviceType }) => {
  /* ADD THIS LINE */
  const carousel = useRef(null);
  const lastImageIndex = images.length - 1;

  useEffect(() => {
    const autoloop = setInterval(() => {
      if (carousel.state.currentSlide === lastImageIndex) {
        carousel.goToSlide(0);
      } else {
        carousel.next();
      }
    }, 3000); // Your custom auto loop delay in ms
    return () => clearInterval(autoloop);
  }, []);
  /* TO THIS LINE */

  return (
    <Carousel
      ssr
      deviceType={deviceType}
      itemClass="image-item"
      responsive={responsive}
      /* ADD THIS LINE */
      ref={el => (carousel = el)}
      arrows={false}
      customButtonGroup={<ButtonGroup />}
      /* TO THIS LINE */
    >
      {images.slice(0, 5).map((image, index) => {
        return (
          <div key={index} style={{ position: "relative" }}>
            <img
              draggable={false}
              alt="text"
              style={{ width: "100%", height: "100%" }}
              src={image}
            />
            <p
              style={{
                position: "absolute",
                left: "50%",
                bottom: 0,
                color: "white",
                transform: " translateX(-50%)"
              }}
            >
              Legend:{index}.
            </p>
          </div>
        );
      })}
    </Carousel>
  );
};

render(<Simple />, document.getElementById("root"));

import React，{useffect，useRef}来自“React”；
从“react dom”导入{render}；
从“react multi Carousel”导入转盘；
导入“react multi carousel/lib/styles.css”；
常数响应={
桌面：{
断点：{max:3000，min:1024}，
项目：1，
巴黎视力：60
},
平板电脑：{
断点：{max:1024，min:464}，
项目：1，
巴黎视力沟：50
},
流动电话：{
断点：{max:464，min:0}，
项目：1，
巴黎视力：30
}
};
常量图像=[
"https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=800&q=60“，
"https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60“，
"https://images.unsplash.com/photo-1550133730-695473e544be?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=800&q=60“
];
/*添加这一行*/
//需要添加自定义按钮组.CSS
const ButtonGroup=（{next，previous，goToSlide，…rest}）=>{
常数{
转盘状态：{currentSlide}
}=休息；
const lastImageIndex=images.length-1；
返回(
currentSlide==0？goToSlide（lastImageIndex）：previous（）
}
>
上
currentSlide==lastImageIndex？goToSlide（0）：下一步（）
}
>
下一个
);
};
/*这条线*/
常量简单=（{deviceType}）=>{
/*添加这一行*/
const carousel=useRef（null）；
const lastImageIndex=images.length-1；
useffect（（）=>{
const autolop=setInterval（（）=>{
if（carousel.state.currentSlide==lastImageIndex）{
戈托斯里德旋转木马（0）；
}否则{
carousel.next（）；
}
}，3000）；//自定义自动循环延迟（毫秒）
return（）=>clearInterval（autolop）；
}, []);
/*这条线*/
返回(
（旋转木马=el）}
箭头={false}
customButtonGroup={}
/*这条线*/
>
{images.slice（0，5）.map（（图像，索引）=>{
返回(

图例：{index}。

);
})}
);
};
render（，document.getElementById（“根”））；

---

希望有帮助。快乐编码：）

我已经实现了您在这里给出的内容，但它会引发错误。您能检查一下吗？将const carousel更改为let carousel。这不会导致任何错误，但可能是代码沙盒问题……别忘了也清除您的间隔。您能帮我如何在基于类的组件中实现这一点吗？因为在我的实际应用程序中，我使用的是class组件和我可以看出，我们不能在类组件中使用

useffect

。它相当于componentDidMount和ComponentWillUnmount。有关详细信息，请参阅此处的文档：。开始学习挂钩对您来说确实是一件好事：）这是错误的，您将值赋给carousel ref，它是const