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.