https://github.com/hirenkvaghasiya/image-carousel-with-reactjs-18
The first React project on our list is an simple image slider or carousel.
https://github.com/hirenkvaghasiya/image-carousel-with-reactjs-18
javascript javascript-framework reactjs reactjs-project
Last synced: 4 months ago
JSON representation
The first React project on our list is an simple image slider or carousel.
- Host: GitHub
- URL: https://github.com/hirenkvaghasiya/image-carousel-with-reactjs-18
- Owner: hirenkvaghasiya
- Created: 2023-04-12T10:48:03.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-12T14:05:12.000Z (about 2 years ago)
- Last Synced: 2025-01-14T15:17:26.635Z (5 months ago)
- Topics: javascript, javascript-framework, reactjs, reactjs-project
- Language: JavaScript
- Homepage:
- Size: 4.02 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/hirenkvaghasiya)
## License
