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

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

css ecmascript html javascript john-smilga react react-hooks react-icons react-slick slider useeffect usestate vite

Last synced: 20 days ago
JSON representation

Slider Project using React

• Host: GitHub
• URL: https://github.com/pktcodes/slider-react-project-v2
• Owner: pktcodes
• Created: 2023-07-22T23:44:18.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-07-23T00:08:10.000Z (over 1 year ago)
• Last Synced: 2024-11-08T23:57:56.326Z (2 months ago)
• Topics: css, ecmascript, html, javascript, john-smilga, react, react-hooks, react-icons, react-slick, slider, useeffect, usestate, vite
• Language: JavaScript
• Homepage: https://react-slider-v2-prod.netlify.app
• Size: 26.4 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-v2-prod.netlify.app/

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

- **Slideshow** of the reviews mentioned by the people about their company.

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

- Functionality of the **Autoplay** of the slides has been implemented every 2 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`

- Alternatively, for an easier approach, another slider has been also implemented using the **React Slick** library.

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

#### Languages

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

#### Packages

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

[React Slick](https://www.npmjs.com/package/react-slick)

#### Deployment / Hosting

Netlify

---

_Note: I have developed this project ~ [8] as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga._