awesome-carousel-component
v1.0.0
Published
Infinite carousel
Downloads
6
Readme
awesome carousel component
Component accepts an array of either react elements or an array of react components from as prop children.
Installation
npm
npm install awesome-carousel-component
Example
Example code
import React from 'react';
import Slider from 'awesome-carousel-component';
const SimpleSlider = () => {
return ({
<Slider>
{[
<div key="1">
<img />
</div>,
<div key="2">
<img />
</div>,
<div key="3">
<img />
</div>
]}
</Slider>
});
};
Props
| Prop | Description | Default | Type | |------|-------------|---------|------| | children | array of either react elements or an array of react components | ! | ! | | centerSlide | the index of the slide in the array, which is set to the center of the slider | 0 | number | | visualSlidesCount | number of displayed slides per page | 3 | number | | slideMargin | margin to the right and left of each slide | 10 | number (in px) | | duration | duration of slide transition animation | 400 | number (in ms) | | sliderHeight | height for slider | auto | string (in px) | | visualPartWidth | width of the slider display window | 100% | string (in %, in px, etc.) | | slideWidth | width of one slide | auto | number (in px)| | inMinSteps | the jump to the desired slide can follow the closest path from the current location through the beginning or end of the array to get fewer steps to the desired slide | false | boolean | | isFlipping | do I need buttons to scroll to the right and left on the page | true | boolean | | isFlicktyDots | do I need flickity page dots on the page | true | boolean |
Prop children is required, others may not be. Props can be changed at any time except for prop children.