This repository is a Software of Application with React.
Using React 17.0.1 preferably.
$ git clone https://github.com/DanielArturoAlejoAlvarez/react-slider-carousel[NAME APP]
$ yarn install
$ yarn start
Follow the following steps and you're good to go! Important:
...
const ImageSlider = ({ slides }) => {
const [current, setCurrent] = useState(0);
const length = slides.length;
const prevSlide = () => {
setCurrent(current === 0 ? length - 1 : current - 1);
};
const nextSlide = () => {
setCurrent(current === length - 1 ? 0 : current + 1);
};
if (!Array.isArray(slides) || slides.length <= 0) {
return null;
}
return (
<section className="slider">
<IoIosArrowBack className="arrow-left" onClick={prevSlide} />
<IoIosArrowForward className="arrow-right" onClick={nextSlide} />
{DataSlider.map((slide, index) => (
<div
className={index === current ? "slide active" : "slide"}
key={index}
>
{index === current && (
<img src={slide.image} alt="Ferrari image" className="image" />
)}
</div>
))}
</section>
);
};
...
Bug reports and pull requests are welcome on GitHub at https://github.com/DanielArturoAlejoAlvarez/react-slider-carousel. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
The gem is available as open source under the terms of the MIT License.