es6-react-admin-lte
Version:
An AdminLTE Template made to use as React components.
75 lines (57 loc) • 1.71 kB
Markdown
# ImageCarousel
> ./src/js/components/image-carousel/image-carousel.jsx
## Purpose
Displays a carousel that slides between slides, displaying some text over an image background.
## Props
__id__
* Required - _true_
* Data Type - _STRING_
* Functionality - _Sets the id of the component and which id the carousel sliding references while it occurs._
__defaultSlide__
* Required - _false_
* Data Type - _NUMBER_
* Functionality - _The index of the slide desired to be set as the default._
* Default - _0_
__hideIndicators__
* Required - _false_
* Data Type - _BOOLEAN_
* Functionality - _Whether you want to display the little indicator buttons that allow you to switch between slides._
* Default - _false_
__hideButtons__
* Required - _false_
* Data Type - _BOOLEAN_
* Functionality - _Whether you want to display the left and right slide navigation buttons._
* Default - _false_
__slides__
* Required - _false_
* Data Type - _ARRAY_
* Functionality - _An array of objects with details about each slide in the carousel._
* Expected Data -
[
{
caption: 'Text to display on the cell.',
image: 'URL to an image.'
}
]
* Default - _[]_
## Example
```
import ImageCarousel from './src/js/components/image-carousel/image-carousel.jsx';
<ImageCarousel
id="test-carousel"
slides={[
{
caption: 'Item 1',
image: 'http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap'
},
{
caption: 'Item 2',
image: 'http://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap'
},
{
caption: 'Item 3',
image: 'http://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap'
}
]}
/>
```