react-free-carousel v1.0.5

react-free-carousel

Carousel component for free flex-box tile layout built with React.

Installation

NPM

npm install --save react react-free-carousel

Don't forget to manually install peer dependencies (react) if you use npm@3.

Demo

http://pvoznyuk.github.io/react-free-carousel

Usage

Carousel with custom tiles

import React from 'react';
import ReactDOM from 'react-dom';
import ReactFreeCarousel from 'react-free-carousel';

const App = () => (
  <div>
    <ReactFreeCarousel width={'600px'} height={'400px'}>
      <div className={css.smallTileClass}>1</div>
      <div className={css.smallTileClass}>2</div>
      <div className={css.mediumTileClass}>3</div>
      <div className={css.mediumTileClass}>4</div>
      <div className={css.bigTileClass}>5</div>
      <div className={css.bigTileClass}>6</div>
    </ReactFreeCarousel>
  </div>
);

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

Carousel with ReactFreeCarousel.Tile

import React from 'react';
import ReactDOM from 'react-dom';
import ReactFreeCarousel from 'react-free-carousel';

const App = () => (
  <div style={{width: '70vw', height: '30vh'}}>
    <ReactFreeCarousel
      arrows={true}
      autoplay={false}
      tileMargin={10}>
      <ReactFreeCarousel.Tile width={140} height={'100%'}>Tile 1</ReactFreeCarousel.Tile>
      <ReactFreeCarousel.Tile width={280} height={'50%'}>Tile 2</ReactFreeCarousel.Tile>
      <ReactFreeCarousel.Tile width={280} height={'50%'}>Tile 3</ReactFreeCarousel.Tile>
      <ReactFreeCarousel.Tile width={'50%'} height={'100%'}>Tile 4</ReactFreeCarousel.Tile>
      <ReactFreeCarousel.Tile width={'25%'} height={`${100/3}%`}>Tile 5</ReactFreeCarousel.Tile>
      <ReactFreeCarousel.Tile width={'25%'} height={`${100/3}%`}>Tile 6</ReactFreeCarousel.Tile>
      <ReactFreeCarousel.Tile width={'25%'} height={`${100/3}%`}>Tile 7</ReactFreeCarousel.Tile>
      <ReactFreeCarousel.Tile width={'25%'} height="50%">Tile 8</ReactFreeCarousel.Tile>
      <ReactFreeCarousel.Tile width={'25%'} height="50%">Tile 9</ReactFreeCarousel.Tile>
    </ReactFreeCarousel>
  </div>
);

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

Properties

ReactFreeCarousel

ReactFreeCarousel.Tile

Development and testing

Currently is being developed and tested with the latest stable Node 5 on OSX and Windows.

To run example covering all ReactFreeCarousel features, use npm start dev, which will compile src/example/Example.js

git clone git@github.com:pvoznyuk/react-free-carousel.git
cd react-free-carousel
npm install
npm start dev

# then
open http://localhost:8080

Tests

# to run tests
npm start test

# to generate test coverage (./reports/coverage)
npm start test.cov

# to run end-to-end tests
npm start test.e2e

License

MIT