UNPKG

es6-react-admin-lte

Version:

An AdminLTE Template made to use as React components.

75 lines (57 loc) 1.71 kB
# 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' } ]} /> ```