hirenkvaghasiya / image-carousel-with-reactjs-18

The first React project on our list is an simple image slider or carousel.

Project 1 - Simple Image Carousel with ReactJS 18 🚀

Beginner level

• The first React project on our list is an image slider or carousel.

How you will build it? 💻

• Our carousel should allow the user to click the backwards or forwards button to go to the previous or next image.

• The images will be stored in a simple array. We will see how to use state in order to store the current image. Then we will update that state to go to the previous or next image, according to the button the user pressed.

• If the user has gone through all of the images, you will figure out how to start at the beginning of the array, to allow them to cycle through the images again. If you don't want to use images, you could also use text to make a testimonial carousel that cycles through reviews for a given product.

• Finally, if you want to take your carousel to the next level, try adding a fun transition using CSS to animate the image as it changes.

React concepts you will learn 📝

• useState (storing and updating state)
• Conditionals (ternaries)
• Lists, keys, and .map()

How to get Started 🚀

There are two methods for getting started with this repo.

Familiar with Git?

- git clone https://github.com/hirenkvaghasiya/image-carousel-with-reactjs-18.git
- cd image-carousel-with-reactjs-18/
- npm install
- npm run start OR npm start

Not Familiar with Git?

download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and:

> cd image-carousel-with-reactjs-18
> npm install
> npm run start OR npm start

Snap Shot(s) 📷

Author

@hirenkvaghasiya

License