Simple react carousel
Today we are going to create a simple carousel using react.
First things first, you need to create a new react project, then run nem start to see if everything is working fine:
run npx create-react-app react-carouselcode react-carouse // to open the project inside the visual studio code ORcd react-carousel // to enter in the projectnpm start
After that, we’re going to open the App.css, erase all the content, and paste this styles:
In the App.js, create a new state called activeImageIndex, and paste this mocked image array:
Now, delete all the code inside the div with the App class, create a div with the carousel-details class, with the main image tag:
This code shows a image with the index we’re going to select later, by clicking in the image. To do that, we need to create the structure with the image's thumbs, below the main image:
Now we need to set the activeImageIndex with the index of the image we clicked:
Now, to end with class (ha) we’re going to put a fade class in all the images that are NOT selected:
Thats it! if you have any doubts, check out the github repository:
