t-a-e-3d-carousel-reactjs
Version:
3D responsive and customizable carousel for reactJs
69 lines (55 loc) • 3.15 kB
Markdown
A resposive and customizable carousel for reactJs
you can see the preview [here](https://terance-edmonds.github.io/3D-carousel-reactjs/)
npm i t-a-e-3d-carousel-reactjs
| Parameter | Type | Default | Description |
|------------------|----------|---------|----------------------------------------------------------------------------------|
| imageList | List | null | List of images url/path and title (optional) |
| autoplay | Boolean | false | Automatically change image slides |
| showArrows | Boolean | true | Side arrows display status |
| interval | Integer | 2000 | If autoplay is enabled, the time period in milliseconds of image slides changing |
| className | String | null | carousel class name |
| imageClassName | String | null | carousel images class name |
| onClick | function | null | on click function |
| overlayClassName | String | null | carousel image overlay class name |
| id | String | null | carousel id |
#### parameter usage
<Carousel
imageList={List}
autoplay={Boolean}
showArrows={Boolean}
interval={Integer}
className={String}
imageClassName={String}
onClick={function}
overlayClassName={String}
id={String}
>
import Carousel from 't-a-e-3d-carousel-reactjs'
function App () {
const Images = [
{
title: 'title 1',
url: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Y2Fyc3xlbnwwfHwwfA%3D%3D&auto=format&fit=crop&w=500&q=60'
},
{
title: 'title 2',
url: 'https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80'
},
{
title: '',
url: 'https://images.unsplash.com/photo-1517672651691-24622a91b550?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80'
},
{
url: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2Fyc3xlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
},
]
return (
<Carousel imageList={Images} />
)
}
export default App