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

Propertie	Type	Default Value	Description
className	string	null	Just className.
interval	number	5000	Slide changing interval.
transitionSpeed	number	500	Slide changing speed.
height	string or number	'100%'	Carousel height.
width	string or number	'100%'	Carousel width.
tileMargin	string or number	0	Margin between ReactFreeCarousel.Tile tiles.
autoplay	boolean	true	Autostart carousel.
page	number	0	Page to show (0-indexed).
slide	number	null	Slide to scroll to (0-indexed).
showPagination	boolean	true	Show pagination.
minPagesToShowPagination	number	2	Min number of page to show the pagination.
paginationClass	string	''	Pagination className.
paginationDotClass	string	''	Pagination dot className.
paginationDotActiveClass	string	''	Pagination active dot className.
arrows	boolean	false	Show/hide the prev/next arrows.
arrowPrevClass	string	''	Previous button className.
arrowNextClass	string	''	Next button className.

ReactFreeCarousel.Tile

Propertie	Type	Default Value	Description
className	string	null	Tile custom className.
height	string or number	'100%'	Tile height.
width	string or number	'100%'	Tile width.

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 [email protected]: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