react-swipeable-carousel

React Swipeable Carousel

Table of Contents

• Installation
• Usage
  • Carousel
  • Grid Carousel
• Example
  • Carousel
  • Grid Carousel
• Contributing
• License

Installation

Using npm:

$ npm install react-swipeable-carousel --save

Usage

Carousel

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

GridCarousel

Property	Type	Description	Default
timeout	number	Interval	5 seconds
hideIndicators	boolean	Hide indicators	false

Example

First, you create your customize carousel item.

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,
};

Carousel

import {Carousel} from 'react-swipeable-carousel';

<Carousel>
  {Store.trumpetArtists.map((artist, index) => (
    <CarouselItem key={index} artist={artist} />
  ))}
</Carousel>

Grid Carousel

import {GridCarousel} from 'react-swipeable-carousel';

<GridCarousel>
  {Store.trumpetArtists.map((artist, index) => (
    <CarouselItem key={index} artist={artist} grid={true} />
  ))}
</GridCarousel>

Contributing

Contributions are definitely welcome! Check out the issues for ideas on where you can contribute.

License

MIT © Nam Vo