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:

   npm install

2. Run Development Server:

   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

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.