https://github.com/pktcodes/slider-react-project

Slider Project using React
https://github.com/pktcodes/slider-react-project

css3 ecmascript html5 javascript react react-hooks react-icons slider useeffect usestate

Last synced: 20 days ago
JSON representation

Slider Project using React

• Host: GitHub
• URL: https://github.com/pktcodes/slider-react-project
• Owner: pktcodes
• Created: 2022-07-29T04:31:58.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-29T05:26:41.000Z (over 2 years ago)
• Last Synced: 2024-11-08T23:57:56.822Z (2 months ago)
• Topics: css3, ecmascript, html5, javascript, react, react-hooks, react-icons, slider, useeffect, usestate
• Language: JavaScript
• Homepage: https://react-slider-prod.netlify.app/
• Size: 368 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Slider 🎚️

> PROD [Live] : https://react-slider-prod.netlify.app/

#### Slider consists of a straightforward user interface where there is a

- **Image slider** | **Slideshow** of the reviews mentioned by the people along with the page title **Reviews**.

- Each single review card has **image**, **name**, **title**, **quote**.

- Functionality of the **Autoplay** of the slides has been implemented every 3 seconds.

- Buttons that can be clicked i.e., ◀️ for the previous slide and ▶️ for the next slide. If the user reaches the last slide, one more click resets to the first slide and vice versa.

- Data is handled by the `data.js` and styles are handled by `index.css`

- To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm start` to start up the development server on default port 3000.

#### Languages

HTML, CSS, JavaScript, ECMAScript, React - Hooks ~ useState, useEffect

#### Packages

[React Icons](https://www.npmjs.com/package/react-icons)

#### Deployment / Hosting

Netlify

#### IN ACTION

[Gatsby-Airtable Project](https://gatsby-airtable-design-project.netlify.app/)

---

*Note: I have developed this project ~ [7] as part of React and Projects Course taught by John Smilga.*