React Image Gallery Slider

A simple, responsive image gallery slider for React applications. This component fetches images from an API and displays them in a sleek slider format using react-slick. It's perfect for portfolios, product showcases, and more.

Features

• Fetches images dynamically from an API.
• Fully responsive slider.
• Customizable settings for autoplay, speed, and more.
• Easy to integrate and use in any React project.

Installation

Install `react-image-gallery-slider` with npm:

npm install react-image-gallery-slider

Don't forget to include slick-carousel's CSS in your project. You can import it in your main CSS file or in your component like so:

import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";

##USAGE First, ensure you have a working API endpoint that returns an array of image objects. Each object should at least contain a URL for the image source.

Here's a basic example of how to use the ImageGallery component in your React app:

import React from 'react';
import ImageGallery from 'react-image-gallery-slider';

function App() {
  return (
    <div className="App">
      <ImageGallery apiUrl="https://your-api.com/images" />
    </div>
  );
}

export default App;

Props

apiUrl: String. The URL of the API endpoint from which to fetch images. The API should return a JSON object with an array of image objects. Customizing the Slider ImageGallery uses react-slick under the hood, so you can pass any react-slick settings as props to customize the slider. For a full list of settings, check out the react-slick documentation.

Example with custom settings:

<ImageGallery
  apiUrl="https://your-api.com/images"
  settings={{
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3,
    autoplay: true,
  }}
/>

#Contributing Contributions are always welcome! Please read the contribution guidelines first.

#License Distributed under the MIT License. See LICENSE for more information.

#Support If you have any questions or issues, please open an issue on the GitHub repository.