MUI-Image-Slider - Image Slider for Material UI

MUI-Image-Slider is an image slider component built on Material-UI.

Demo

You can access the live demo here

Install

npm install mui-image-slider --save

Usage

import MuiImageSlider from 'mui-image-slider';

const images = [
    'https://homepages.cae.wisc.edu/~ece533/images/airplane.png',
    'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
    'https://homepages.cae.wisc.edu/~ece533/images/baboon.png',
    'https://homepages.cae.wisc.edu/~ece533/images/barbara.png',
];

<MuiImageSlider images={images}/>

API

Name	Type	Default	Description
`images`	Array	\|List of images' url string.
`classes`	Object	\|Override or extend the styles applied to the component. See CSS API below for more details.
`customArrow`	Function	\|Render a custom arrow component.
`onArrowClick`	Function	\|Callback to an arrow click. `function(currentImage: Number) {console.log(currentImage}` where `currentImage` is the index of the currently visible image.
`arrows`	Boolean	`true`	Show/Hide navigation arrows.
`autoPlay`	Boolean	`false`	Autoplay the images like a slideshow.
`arrowsColor`	String	`dimgrey`	Color of the arrows.
`arrowsBgColor`	String	`transparent`	Colors of the arrows wrapper (Background).
`arrowsBgHoverColor`	String	`#B9B9B95E`	Colors of the wrapper on hover.
`alwaysShowArrows`	Boolean	false	Arrows will always be visible.
`fitToImageHeight`	Boolean	false	Component height is adaptive to the current image's height.

Classes Object

Rule Name	Description
`root`	Styles applied to the `root` element.
`wrapper`	Styles applied to the `wrapper` element.
`arrowWrapper`	Styles applied to the `arrowWrapper` element.
`img`	Styles applied to each `img` element.

Contributing

Thanks for taking an interest in the library and the github community!

The following commands should get you started:

npm install
npm start

open http://localhost:3001/ in browser

Testing

To run the tests locally just run jest in the root folder

jest

License

The files included in this repository are licensed under the ISC license.

Package detail

mui-image-slider

readme