image-show-react

Simple Image Carousel Library

![NPM version]

A simple and customizable image carousel component library for React.

Features

• Easy to use and integrate.
• Fully customizable.
• Supports automatic slide transitions.

Installation

You can install the package using npm or yarn:

npm install react-image-carousel

or 

yarn add react-image-carousel

Usage

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

1. Import the Component

First, import the ImageCarousel component into your project:

import React from 'react';
import ImageCarousel from 'react-image-carousel';
import 'react-image-carousel/dist/index.css'; 

2. Use the Component

Then, use the ImageCarousel component and pass the required props:

const images = [
  'https://via.placeholder.com/800x300',
  'https://via.placeholder.com/800x300', 
  'https://via.placeholder.com/800x300',
];

const App = () => {
  return (
    <div>
      <h1>React Image Carousel Example</h1>
      <ImageCarousel images={images} autoPlay={true} animation={"default"} />
    </div>
  );
};

export default App;

Props

Name	Type	Default	Description
images	Array	[]	Array of images
itemWidth	number	''	Image Width
itemHeight	number	false	Image Height
animation	string	default	Image Slide Animation
autoPlay	boolean	false	Auto playing of Images
loop	boolean	true	Loop over the Images
dotStyle	style	{}	Nav Dot Style
navDotsContainerStyle	style	{}	Nav Dot Container Style
imageContainerStyle	string	{}	Image Container Style Prop
imagePropsStyle	style	{}	Each image Style Prop
buttonContainerStyle	style	{}	Previous & Next Button Container Style Prop
leftButtonStyle	style	{}	Previous Button Style Prop
rightButtonStyle	style	{}	Next Button Style Prop
onImageLoad	function	null	A Callback called after Image Load
onLeftBtnPress	function	null	A Callback on Left Button Press
onRightBtnPress	function	null	A Callback on Right Button Press.
autoPlayDuration	number	5000	Auto Play animation Duration in ms
fadeInEffectDuration	number	3000	Fade In Animation Duration in ms
activeNavDotWidth	number	10	Active Nav Dot Width
nonActiveNavDotWidth	number	5	Non Active Nav Dot Width
activeNavDotColor	string	#ffff	Active Nav Dot Color
nonActiveNavDotColor	string	grey	Non Active Nav Dot Color
imageCarouselContainerStyle	style	{}	Image Carousel Container Style
showVerticalScrollBar	boolean	true	Show Scroll Bar