Skip to content

Latest commit

 

History

History
96 lines (62 loc) · 3.4 KB

README.md

File metadata and controls

96 lines (62 loc) · 3.4 KB
Raw

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Image Slider Project Documentation

This project creates a simple image slider using React and Material UI. The slider displays a collection of images fetched from an external API and allows users to navigate through the images using arrow buttons.

Project Overview

  • Framework: React
  • Styling: Material UI (MUI)
  • Icons: React Icons (FaArrowLeft, FaArrowRight)
  • Data Fetching: Axios

Key Features

  • Image Slider: Displays images fetched from an external API.
  • Navigation Controls: Users can navigate through the images using left and right arrow buttons.
  • Dynamic Content: Images are dynamically loaded and updated using state management in React.

API Used for Data Fetching

How the Project Works

Data Fetching:

  • The fetchData function uses Axios to fetch images from the Picsum API when the component mounts (useEffect).
  • The fetched data is stored in the data state using the setdata function.

Displaying Images:

  • The slider uses the selectedImg state to keep track of the currently displayed image.
  • Images are mapped and displayed based on the selectedImg value.

Navigation Controls:

  • Left Button (FaArrowLeft): Navigates to the previous image. If on the first image, it loops to the last image.
  • Right Button (FaArrowRight): Navigates to the next image. If on the last image, it loops back to the first image.

Code Overview

State Management:

  • data: Stores the fetched images.
  • selectedImg: Keeps track of the currently selected image index.

Core Functions:

  • fetchData: Fetches the images from the Picsum API using Axios.
  • useEffect: Calls fetchData once when the component mounts to load the images.

UI Components:

  • Box: A flexbox container from Material UI to layout the content.
  • Typography: Displays the title of the image slider.
  • Button: Wrapped around the navigation icons to handle image transitions.

Usage

To use this project:

  1. Clone the repository or copy the code into a new React project.
  2. Run npm install to install necessary dependencies (axios, @mui/material, react-icons).
  3. Start the development server with npm start.

Sample Code Snippet

const fetchData = async () => {
  let response = await axios.get("https://picsum.photos/v2/list?page=1&limit=6");
  setdata(response.data);
}

useEffect(() => {
  fetchData();
}, []);

Customization

Change the Number of Images: Modify the limit parameter in the API URL to fetch more or fewer images. Styling: Customize the appearance by changing the MUI sx properties. Navigation Logic: Update the button click handlers to implement different navigation behaviors. By following this documentation, you can understand how the image slider works and make customizations as needed.