https://github.com/arnobt78/slider--react-fundamental-project-7
This project demonstrates a simple image slider using React. It includes two implementations: a custom carousel and a carousel using the React Slick library.
https://github.com/arnobt78/slider--react-fundamental-project-7
carousel carousel-component carousel-slider html-css-javascript image-slider netlify-deployment reack-slick react react-components react-fundamentals react-slider reactjs
Last synced: 2 months ago
JSON representation
This project demonstrates a simple image slider using React. It includes two implementations: a custom carousel and a carousel using the React Slick library.
- Host: GitHub
- URL: https://github.com/arnobt78/slider--react-fundamental-project-7
- Owner: arnobt78
- Created: 2025-02-08T21:55:16.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-08T22:01:30.000Z (3 months ago)
- Last Synced: 2025-02-08T23:18:13.338Z (3 months ago)
- Topics: carousel, carousel-component, carousel-slider, html-css-javascript, image-slider, netlify-deployment, reack-slick, react, react-components, react-fundamentals, react-slider, reactjs
- Language: JavaScript
- Homepage: https://slider-arnob.netlify.app/
- Size: 391 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Slider - React Fundamental Project 7
This project demonstrates a simple image slider using React. It includes two implementations: a custom carousel and a carousel using the React Slick library.
**Online Live:** https://slider-arnob.netlify.app/
### Project Structure
- **Custom Carousel**: Implemented in Carousel.jsx
- **React Slick Carousel**: Implemented in SlickCarousel.jsx
### Setup
1. **Install Dependencies**:
```sh
npm install
```
2. **Run Development Server**:
```sh
npm run dev
```
### Custom Carousel
- **Data**: The data for the carousel is imported from data.js.
- **State Management**: Uses React's `useState` and `useEffect` hooks to manage the current slide and auto-slide functionality.
- **Navigation**: Includes previous and next buttons to navigate through the slides.
- **Auto Slide**: Automatically transitions to the next slide every 5 seconds.
### React Slick Carousel
- **Library**: Utilizes the `react-slick` library for the carousel functionality.
- **Configuration**: Configured with settings such as `autoplay`, `dots`, and `slidesToShow`.
- **Data**: Uses the same data from data.js.
## Project Details and Steps
### Explore Data
Explore arrays in data.js
### Import Data and Set State Value
Create Carousel.jsx, import all arrays from data.js and set up state value using the useState hook, use shortList as default value (for now).
### Setup Container and Prev/Next Buttons
In the return statement, set up a container element to hold all the slides. Inside the container, iterate over the people state value to create each slide.
Set up prev and next buttons outside the container element. You can use the onClick event to trigger functions that will change the current slide.
### Setup CSS
Use CSS to style the container and slides. Set the container to position:relative and the slides and prev/next buttons to position:absolute. You can also set the width and height of the container and slides to control their size.
Switch default value in people state value. Set it equal to list or longList
### Main Logic
To move the slides back and forth, use the transform property with a translateX value. For example, to move the slides to the left, you can use the transform:translateX(-100%) property however to move the slides to the right, you can use the transform:translateX(100%) property. For the active slide we will use transform:translateX(0)
### Current Person
Create a currentPerson state value in App.jsx and set it to 0 initially. This will allow you to keep track of the current slide being displayed.
### Prev and Next
Implement the prev and next functionality using the setCurrentPerson function to update the currentPerson state value.
### Auto Slide
Implement the auto slide functionality using the setInterval function to change the currentPerson state value at regular intervals.
### Extra - React Slick Library
[React Slick Docs](https://react-slick.neostack.com/)
```sh
npm install react-slick slick-carousel --save
```
Overall, the flow of the application should look something like this:
- In App.jsx, import the people array from data.js and set it up as a state value using the useState hook.
- In the return statement, set up a container element to hold all the slides, and iterate over the people state value to create each slide.
- Set up prev and next buttons and style the container,slides and buttons.
- Uncomment the rest of the items in the people array.
- Create a currentPerson state value in App.jsx and set it to initially.
- Implement the prev and next functionality using the setCurrentPerson function to update the currentPerson state value and move the slides back and forth using the transform property with a translateX value.
- Implement the auto slide functionality using the setInterval function to change the currentPerson state value at regular intervals.