react-swipeable-carousel v1.0.5

react-swipeable-carousel

React Swipeable Carousel

Installation

Using npm:

$ npm install react-swipeable-carousel --save

Usage

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {Carousel, GridCarousel} from 'react-swipeable-carousel';

import './App.css';

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

const App = () => {
  const trumpetArtists = [
    {
      name: 'Harry James',
      born: 'March 15, 1916',
      died: 'July 5, 1983',
    },
    {
      name: 'Chet Baker',
      born: 'December 23, 1929',
      died: 'May 13, 1988',
    },
    {
      name: 'Louis Armstrong',
      born: 'August 4, 1901',
      died: 'July 6, 1971',
    },
    {
      name: 'Miles Davis',
      born: 'May 26, 1926',
      died: 'September 28, 1991',
    },
    {
      name: 'Rafael Méndez',
      born: 'March 26, 1906',
      died: 'September 15, 1981',
    },
    {
      name: 'Dizzy Gillespie',
      born: 'October 21, 1917',
      died: 'January 6, 1993',
    },
    {
      name: 'Clifford Brown',
      born: 'October 30, 1930',
      died: 'June 26, 1956',
    },
    {
      name: 'Freddie Hubbard',
      born: 'April 7, 1938',
      died: 'December 29, 2008,',
    },
    {
      name: 'Lee Morgan',
      born: 'July 10, 1938',
      died: 'February 19, 1972',
    },
  ];

  return (
    <div className="App">
      <div className="container">
        <div className="section">
          <h2>Carousel</h2>
          <Carousel>
            {trumpetArtists.map((artist, index) => (
              <CarouselItem key={index} artist={artist} />
            ))}
          </Carousel>
        </div>
        <div className="section">
          <h2>Grid Carousel</h2>
          <GridCarousel>
            {trumpetArtists.map((artist, index) => (
              <CarouselItem key={index} artist={artist} grid={true} />
            ))}
          </GridCarousel>
        </div>
      </div>
    </div>
  );
};

export default App;