Блог

Я пытаюсь использовать эту карусель для своего баннера. Как мне сделать это автоматическое изменение, не нажимая на левую правую кнопку. Из-за того, что есть только 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 amp;amp; 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 amp;amp; setCurrImg(currImg   1);
          }}
        >
          
        </div>
      </div>
    </div>
  );
}

export default Carousel;
 

Вы можете установить интервал для его запуска в фоновом режиме, изменив currImg. Приведенный ниже код предполагает, что у вас есть 2 слайда. Если у вас есть еще слайд, вы можете настроить его.

 useEffect(()=> {
   const changeSlide = setInterval(() => setCurrImg(prevState => 1-prevState) , 1000) // change your switch time here.
   return () => clearInterval(changeSlide);
}, [])