Oyawe / slider

A react JS carousel.

slider

Description

This was implemented this using REACT JS and pure CSS.
This project is just an array of people mapped out in a carousel.
I made use of an open source REACT library known as React Slick Library.

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, you 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.

Setup:

• install node modules

npm install

• run dev server

npm run dev

magic word for 'permission denied'

sudo chmod +x node_modules/.bin/vite

-The project loads up in your browser🌟