React Swipeable Carousel
Using npm:
$ npm install react-swipeable-carousel --save
Property | Type | Description | Default |
---|---|---|---|
timeout | number | Interval | 5 seconds |
controlsOnCenter | boolean | Centered left/right arrows on mobile | false |
hideControls | boolean | Hide left/right arrows | false |
hideIndicators | boolean | Hide indicators | false |
Property | Type | Description | Default |
---|---|---|---|
timeout | number | Interval | 5 seconds |
hideIndicators | boolean | Hide indicators | false |
First, you create your customize carousel item.
const CarouselItem = (props) => {
const {artist, grid} = props;
return (
<div
className={classnames('carousel-item', {
'grid-item': grid,
})}
>
<strong>{artist.name}</strong>
<p>
({artist.born} - {artist.died})
</p>
</div>
);
};
CarouselItem.propTypes = {
artist: PropTypes.object.isRequired,
grid: PropTypes.bool,
};
CarouselItem.defaultProps = {
grid: false,
};
import {Carousel} from 'react-swipeable-carousel';
<Carousel>
{Store.trumpetArtists.map((artist, index) => (
<CarouselItem key={index} artist={artist} />
))}
</Carousel>
import {GridCarousel} from 'react-swipeable-carousel';
<GridCarousel>
{Store.trumpetArtists.map((artist, index) => (
<CarouselItem key={index} artist={artist} grid={true} />
))}
</GridCarousel>
Contributions are definitely welcome! Check out the issues for ideas on where you can contribute.
MIT © Nam Vo