React Responsive Carousel v2


Powerful, lightweight and fully customizable carousel component for React apps.

$3

- Responsive
- Mobile friendly
- Swipe to slide
- Mouse emulating touch
- Server side rendering
- Keyboard navigation
- Custom animation duration
- Auto play
- Custom auto play interval
- Infinite loop
- Horizontal or Vertical directions
- Supports images, videos, text content or anything you want. Each direct child represents one slide!
- Supports any flux library (use selectedItem prop to set from the app state, and onChange callback to get the new position)
- Show/hide anything (thumbs, indicators, arrows, status)

$3

npm install react-responsive-carousel-v2 --save

$3

``javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel-v2/dist/carousel.css";
import { Carousel } from 'react-responsive-carousel-v2';

class DemoCarousel extends Component {
render() {
return (



Legend 1

Legend 2

Legend 3

);
}
});

ReactDOM.render(, document.querySelector('.demo-carousel'));

// Don't forget to include the css in your page

// Using webpack
// import styles from 'react-responsive-carousel-v2/dist/carousel.css';

// Using html tag:
//

`

| Attributes | Type | Default | Description |
| :-------------------- | :--------: | :------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| showArrows | boolean | true | show prev and next arrows |
| showStatus | boolean | true | show index of the current item. i.e: (1/8) |
| showIndicators | boolean | true | show little dots at the bottom with links for changing the item |
| showThumbs | boolean | true | show thumbnails of the images |
| thumbWidth | number | undefined | optionally specify pixel width (as an integer) of a thumbnail (including any padding) to avoid calculating values (helps with server-side renders or page cache issues) |
| infiniteLoop | boolean | false | infinite loop sliding |
| selectedItem | number | 0 | selects an item though props / defines the initial selected item |
| axis | string | horizontal | changes orientation - accepts horizontal and vertical |
| verticalSwipe | string | standard | changes vertical swipe scroll direction - accepts standard and natural |
| onChange | function | - | Fired when changing positions |
| onClickItem | function | - | Fired when an item is clicked |
| onClickThumb | function | - | Fired when a thumb it clicked |
| width | string | - | Allows to set a fixed width |
| useKeyboardArrows | boolean | false | Adds support to next and prev through keyboard arrows |
| autoPlay | boolean | false | Auto play |
| stopOnHover | boolean | true | Stop auto play while mouse is over the carousel |
| interval | number | 3000 | Interval of auto play |
| transitionTime | number | 350 | Duration of slide transitions (in miliseconds) |
| swipeScrollTolerance | number | 5 | Allows scroll when the swipe movement occurs in a different direction than the carousel axis and within the tolerance - Increase for loose - Decrease for strict |
| swipeable | boolean | true | Enables swiping gestures |
| dynamicHeight | boolean | false | Adjusts the carousel height if required. -- Do not work with vertical axis -- |
| emulateTouch | boolean | false | Allows mouse to simulate swipe |
| statusFormatter | func | (current, total) => ${current} of ${total} | Allows custom formatting of the status indicator |
| centerMode | boolean | false | Enables centered view with partial prev/next slides. Only works with horizontal axis. |
| centerSlidePercentage | number | 80 | optionally specify percentage width (as an integer) of the slides in centerMode |

$3

- git clone git@github.com:pak11273/react-responsive-carousel-v2.git
- npm install
- npm fserver
- Open your favourite browser on either localhost:9000 or 0.0.0.0:9000 - livereload will be enabled and tests will run on each change

> The fastest dev environment is on node 6. If you have nvm installed, just run nvm use 6. Tests in travis will run on node 4 and 6

#### Running only tests

- npm test

#### Running storybook

- npm run storybook

=======================

$3

#### Publish to npm

- npm run publish-to-npm

#### Pubish to gh-pages

- npm run publish-to-gh-pages`