[英]How to make carousel auto change instead of click onclick with loop on ReactJs
I am try to use this carousel ways for my banner.我尝试将这种轮播方式用于我的横幅。 How do I make it auto change without click on the left right button.
如何在不单击左右按钮的情况下使其自动更改。 Due to there is only 2 image how do i make it loop?
由于只有 2 张图片,我如何让它循环播放?
import React, { useState } from "react";
import "./Carousel.css";
import { images } from "../Helpers/CarouselData";
function Carousel() {
const [currImg, setCurrImg] = useState(0);
return (
<div className="carousel">
<div
className="carouselInner"
style={{ backgroundImage: `url(${images[currImg].img})` }}
>
<div
className="left"
onClick={() => {
currImg > 0 && setCurrImg(currImg - 1);
}}
>
</div>
<div className="center">
<h1>{images[currImg].title}</h1>
<p>{images[currImg].subtitle}</p>
</div>
<div
className="right"
onClick={() => {
currImg < images.length - 1 && setCurrImg(currImg + 1);
}}
>
</div>
</div>
</div>
);
}
export default Carousel;
You can set an interval to run it in your background, changing the currImg.您可以设置一个间隔以在后台运行它,更改 currImg。 The code below assume you have 2 slides.
下面的代码假设您有 2 张幻灯片。 If you have more slide, you can customize it.
如果您有更多幻灯片,您可以自定义它。
useEffect(()=> {
const changeSlide = setInterval(() => setCurrImg(prevState => 1-prevState) , 1000) // change your switch time here.
return () => clearInterval(changeSlide);
}, [])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.