react-image-gallery-slider
v1.0.0
Published
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.
Downloads
2
Readme
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.