# react-responsive-carousel-v2 > React Responsive Carousel v2 Latest version **3.2.0** (published 2019-06-03) · MIT license · 0 weekly downloads ## Install ```sh npm install react-responsive-carousel-v2 pnpm add react-responsive-carousel-v2 yarn add react-responsive-carousel-v2 bun add react-responsive-carousel-v2 ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.2.0 | | Published | 2019-06-03 | | First published | 2019-06-02 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Node | >=4 | | Dependencies | 3 | | Unpacked size | 1.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Isaac Pak | | Maintainers | pak11273 | | Keywords | react, carousel, gallery, image-gallery, slider, responsive, swipe, mobile-friendly, react-component, view | ## Links - npm: https://www.npmjs.com/package/react-responsive-carousel-v2 - Repository: https://github.com/pak11273/react-responsive-carousel-v2 - Homepage: http://pak11273.github.io/react-responsive-carousel-v2/ - Issues: https://github.com/pak11273/react-responsive-carousel-v2/issues - npm.io page: https://npm.io/package/react-responsive-carousel-v2 ## Dependencies (3) - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 - [react-easy-swipe](https://npm.io/package/react-easy-swipe.md) ^0.0.16 ## Alternatives - [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads - [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads - [better](https://npm.io/package/better.md) — 42 weekly downloads - [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads - [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads ## Recent versions - 3.2.0 (latest) — 2019-06-03 - 3.1.62 — 2019-06-03 - 3.1.61 — 2019-06-03 - 3.1.60 — 2019-06-03 - 3.1.59 — 2019-06-03 - 3.1.58 — 2019-06-02 - 3.1.56 — 2019-06-02 - 3.1.54 — 2019-06-02 - 3.1.53 — 2019-06-02 - 3.1.52 — 2019-06-02 - 3.1.51 — 2019-06-02 - 3.1.50 — 2019-06-02 - 3.1.49 — 2019-06-02 ## README # React Responsive Carousel v2 [![npm version](https://badge.fury.io/js/react-responsive-carousel.svg)](https://badge.fury.io/js/react-responsive-carousel-v2) Powerful, lightweight and fully customizable carousel component for React apps. ### Features - 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) ### Installing as a package `npm install react-responsive-carousel-v2 --save` ### Usage ```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` | ### Setting up development environment - `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` ======================= ### Only after merged back to master #### Publish to npm - `npm run publish-to-npm` #### Pubish to gh-pages - `npm run publish-to-gh-pages` --- _Source: https://npm.io/package/react-responsive-carousel-v2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._