react-responsive-carousel
Advanced tools
react-responsive-carousel - npm Package Compare versions
Comparing version 3.2.1 to 3.2.3
@@ -10,4 +10,32 @@ # Changelog | ||
| ## [Unreleased](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.57...HEAD) | ||
| ## [Unreleased](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.3...HEAD) | ||
| ## [v3.2.3](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.1...v3.2.3) - 2020-04-12 | ||
| ### Commits | ||
| - gh-427: Remove and git ignore lib folder [`2973bd5`](https://github.com/leandrowd/react-responsive-carousel/commit/2973bd586cb9f9f043f91f76123a5e7d954129d1) | ||
| - gh-427: Get rid of gulp files [`97fe6f1`](https://github.com/leandrowd/react-responsive-carousel/commit/97fe6f1ce8837f9fa22a9d3ee6673c8072934e87) | ||
| - gh-427: Replace gh-pages task [`5ace1b9`](https://github.com/leandrowd/react-responsive-carousel/commit/5ace1b97883c22d0d73366034a1fa762a04c48c2) | ||
| ## [v3.2.1](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.58-next.1...v3.2.1) - 2020-04-12 | ||
| ### Commits | ||
| - Remove rc version [`25d5407`](https://github.com/leandrowd/react-responsive-carousel/commit/25d54072848781237faf61c739561db458192dca) | ||
| ## [v3.1.58-next.1](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.58-next.0...v3.1.58-next.1) - 2020-04-12 | ||
| ### Commits | ||
| - gh-422: Include codesandbox in the repo to allow auto update [`15c24dc`](https://github.com/leandrowd/react-responsive-carousel/commit/15c24dca3b6bc2076b0398533ab0c52aa49ccb60) | ||
| ## [v3.1.58-next.0](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.57...v3.1.58-next.0) - 2020-04-12 | ||
| ### Commits | ||
| - gh-422: Upgrade storybook and reorganize stories [`3e712c1`](https://github.com/leandrowd/react-responsive-carousel/commit/3e712c195fb87a9b0fb74402827bd10e1539f6d2) | ||
| - gh-422: Publish cjs and es modules to npm [`b67f32b`](https://github.com/leandrowd/react-responsive-carousel/commit/b67f32b0ca81cb2a5f3bcb2a4bf8c25cd58825b3) | ||
| - gh-422: Update react + babel and get tests to pass [`56eaefc`](https://github.com/leandrowd/react-responsive-carousel/commit/56eaefcaaaecbbd00d1c42ca8df9f1df8e515270) | ||
| ## [v3.1.57](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.56...v3.1.57) - 2020-04-07 | ||
@@ -14,0 +42,0 @@ |
@@ -7,55 +7,74 @@ "use strict"; | ||
| var _Carousel = _interopRequireDefault(require("./components/Carousel")); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _onChange() { | ||
| console.log('onChange', arguments); | ||
| } | ||
| function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
| function _onClickItem() { | ||
| console.log('onClickItem', arguments); | ||
| } | ||
| function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| function _onClickThumb() { | ||
| console.log('onClickThumb', arguments); | ||
| } // Begin DemoSliderControls | ||
| Promise.resolve().then(function () { | ||
| return _interopRequireWildcard(require('./components/Carousel')); | ||
| }).then(function (_ref) { | ||
| var Carousel = _ref.default; | ||
| var DemoCarousel = function DemoCarousel() { | ||
| return /*#__PURE__*/_react.default.createElement(Carousel, { | ||
| showArrows: true, | ||
| infiniteLoop: true, | ||
| autoPlay: true, | ||
| emulateTouch: true, | ||
| onClickItem: function onClickItem() { | ||
| var _console; | ||
| var DemoCarousel = function DemoCarousel() { | ||
| return /*#__PURE__*/_react.default.createElement(_Carousel.default, { | ||
| showArrows: true, | ||
| infiniteLoop: true, | ||
| autoPlay: true, | ||
| emulateTouch: true, | ||
| onClickItem: _onClickItem, | ||
| onChange: _onChange, | ||
| onClickThumb: _onClickThumb | ||
| }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/1.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 1")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/2.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 2")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/3.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 3")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/4.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 4")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/5.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 5")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/6.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 6"))); | ||
| }; | ||
| for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| _reactDom.default.render( /*#__PURE__*/_react.default.createElement(DemoCarousel, null), document.querySelector('.demo-carousel')); | ||
| return (_console = console).log.apply(_console, ['onClickItem'].concat(args)); | ||
| }, | ||
| onChange: function onChange() { | ||
| var _console2; | ||
| for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
| args[_key2] = arguments[_key2]; | ||
| } | ||
| return (_console2 = console).log.apply(_console2, ['onChange'].concat(args)); | ||
| }, | ||
| onClickThumb: function onClickThumb() { | ||
| var _console3; | ||
| for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
| args[_key3] = arguments[_key3]; | ||
| } | ||
| return (_console3 = console).log.apply(_console3, ['onClickThumb'].concat(args)); | ||
| } | ||
| }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/1.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 1")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/2.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 2")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/3.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 3")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/4.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 4")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/5.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 5")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", { | ||
| src: "assets/6.jpeg" | ||
| }), /*#__PURE__*/_react.default.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 6"))); | ||
| }; | ||
| _reactDom.default.render( /*#__PURE__*/_react.default.createElement(DemoCarousel, null), document.querySelector('.demo-carousel')); | ||
| }); |
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import Carousel from './components/Carousel'; | ||
| import( | ||
| /* webpackChunkName: "carousel-component" */ | ||
| './components/Carousel').then(function (_ref) { | ||
| var Carousel = _ref.default; | ||
| function _onChange() { | ||
| console.log('onChange', arguments); | ||
| } | ||
| var DemoCarousel = function DemoCarousel() { | ||
| return /*#__PURE__*/React.createElement(Carousel, { | ||
| showArrows: true, | ||
| infiniteLoop: true, | ||
| autoPlay: true, | ||
| emulateTouch: true, | ||
| onClickItem: function onClickItem() { | ||
| var _console; | ||
| function _onClickItem() { | ||
| console.log('onClickItem', arguments); | ||
| } | ||
| for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| function _onClickThumb() { | ||
| console.log('onClickThumb', arguments); | ||
| } // Begin DemoSliderControls | ||
| return (_console = console).log.apply(_console, ['onClickItem'].concat(args)); | ||
| }, | ||
| onChange: function onChange() { | ||
| var _console2; | ||
| for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
| args[_key2] = arguments[_key2]; | ||
| } | ||
| var DemoCarousel = function DemoCarousel() { | ||
| return /*#__PURE__*/React.createElement(Carousel, { | ||
| showArrows: true, | ||
| infiniteLoop: true, | ||
| autoPlay: true, | ||
| emulateTouch: true, | ||
| onClickItem: _onClickItem, | ||
| onChange: _onChange, | ||
| onClickThumb: _onClickThumb | ||
| }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/1.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 1")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/2.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 2")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/3.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 3")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/4.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 4")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/5.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 5")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/6.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 6"))); | ||
| }; | ||
| return (_console2 = console).log.apply(_console2, ['onChange'].concat(args)); | ||
| }, | ||
| onClickThumb: function onClickThumb() { | ||
| var _console3; | ||
| ReactDOM.render( /*#__PURE__*/React.createElement(DemoCarousel, null), document.querySelector('.demo-carousel')); | ||
| for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
| args[_key3] = arguments[_key3]; | ||
| } | ||
| return (_console3 = console).log.apply(_console3, ['onClickThumb'].concat(args)); | ||
| } | ||
| }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/1.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 1")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/2.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 2")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/3.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 3")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/4.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 4")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/5.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 5")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", { | ||
| src: "assets/6.jpeg" | ||
| }), /*#__PURE__*/React.createElement("p", { | ||
| className: "legend" | ||
| }, "Legend 6"))); | ||
| }; | ||
| ReactDOM.render( /*#__PURE__*/React.createElement(DemoCarousel, null), document.querySelector('.demo-carousel')); | ||
| }); |
| { | ||
| "name": "react-responsive-carousel", | ||
| "version": "3.2.1", | ||
| "version": "3.2.3", | ||
| "description": "React Responsive Carousel", | ||
@@ -26,3 +26,3 @@ "author": { | ||
| "scripts": { | ||
| "start": "parcel ./src/index.html", | ||
| "start": "parcel src/index.html src/assets/**/*", | ||
| "storybook": "start-storybook -p 9001 -s ./src -c .storybook", | ||
@@ -37,9 +37,15 @@ "changelog": "auto-changelog --ignore-commit-pattern=\"(Merge pull request|Merge branch|Updating changelog|Prepare for publishing)\"", | ||
| "update-snapshots": "jest --updateSnapshot", | ||
| "prebuild": "yarn test", | ||
| "build": "yarn build-cjs && yarn build-es && yarn build-styles", | ||
| "build-cjs": "babel ./src -d lib/cjs --ignore './src/__tests__'", | ||
| "build-es": "MODULE=true babel ./src -d lib/es --ignore './src/__tests__'", | ||
| "build-website": "yarn jest && parcel build ./src/index.html --out-dir temp/website && cp -r ./src/assets temp/website/assets && cp -r ./CNAME temp/website/CNAME", | ||
| "build-storybook": "build-storybook -s ./src -o ./temp/website/storybook", | ||
| "build-styles": "node --harmony ./node_modules/gulp/bin/gulp build-styles", | ||
| "build": "yarn lib:build", | ||
| "lib:build": "yarn lib:build-cjs && yarn lib:build-es && yarn lib:build-styles", | ||
| "lib:build-cjs": "babel ./src -d lib/cjs --ignore './src/__tests__'", | ||
| "lib:build-es": "MODULE=true babel ./src -d lib/es --ignore './src/__tests__'", | ||
| "lib:build-styles": "mkdir -p lib/styles && node-sass src/carousel.scss > lib/styles/carousel.css && node-sass --output-style compressed src/carousel.scss > lib/styles/carousel.min.css", | ||
| "lib:pre-publish": "npm version patch && git push origin master && yarn changelog", | ||
| "lib:publish": "npm publish && git push --tags", | ||
| "lib:build-and-publish": "yarn lib:build && yarn lib:pre-publish && yarn lib:publish", | ||
| "website:build": "parcel build ./src/index.html --out-dir temp/website", | ||
| "website:copy-assets": "cp -r ./src/assets temp/website/assets && cp -r ./CNAME temp/website/CNAME", | ||
| "website:storybook": "build-storybook -s ./src -o ./temp/website/storybook", | ||
| "website:deploy": "gh-pages -d temp/website", | ||
| "website:create-and-publish": "yarn website:build && yarn website:copy-assets && yarn website:storybook && yarn website:deploy", | ||
| "prepublish-to-npm": "git pull && yarn build && git add . && git commit -m 'Prepare for publishing'", | ||
@@ -49,4 +55,3 @@ "publish-to-npm": "(git pull origin master && npm version patch && git push origin master && npm publish && git push --tags)", | ||
| "prepublish-prerelease-to-npm": "git pull && yarn build && git add . && git commit -m 'Prepare for publishing prerelease'", | ||
| "publish-prerelease-to-npm": "(git pull && npm version prerelease --preid=next && npm publish)", | ||
| "publish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp publish-gh-pages" | ||
| "publish-prerelease-to-npm": "(git pull && npm version prerelease --preid=next && npm publish)" | ||
| }, | ||
@@ -80,15 +85,6 @@ "repository": { | ||
| "enzyme-adapter-react-16": "^1.15.2", | ||
| "gh-pages": "^0.11.0", | ||
| "gulp": "^3.8.9", | ||
| "gulp-clean-css": "^2.0.12", | ||
| "gulp-concat": "^2.3.4", | ||
| "gulp-connect": "^5.0.0", | ||
| "gulp-copy": "0.0.2", | ||
| "gulp-notify": "^2.2.0", | ||
| "gulp-rename": "^1.2.0", | ||
| "gulp-sass": "^4.0.2", | ||
| "gulp-streamify": "1.0.2", | ||
| "gulp-util": "^3.0.0", | ||
| "gh-pages": "^2.2.0", | ||
| "husky": "^3.0.9", | ||
| "jest-cli": "^25.3.0", | ||
| "node-sass": "^4.13.1", | ||
| "parcel-bundler": "^1.12.4", | ||
@@ -95,0 +91,0 @@ "prettier": "^1.18.2", |
135
README.md
| # React Responsive Carousel | ||
| # Help wanted | ||
| # Help wanted | ||
| Things here are running very slowly as I have a lot of other stuff to take care at the moment so please don't be upset if I don't answer your question or if a PR sits unreviewed for a few days or weeks. Anyone interested in helping it move faster can help by submitting or reviewing PR's and answering each other's questions. (https://github.com/leandrowd/react-responsive-carousel/issues/160) | ||
@@ -15,26 +15,27 @@ | ||
| - 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) | ||
| - 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) | ||
| ### Important links: | ||
| - [Before contributing](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md) | ||
| - [Customizable example](https://codesandbox.io/s/lp602ljjj7) | ||
| - [Demos](http://react-responsive-carousel.js.org/storybook/) | ||
| - [Changelog](https://github.com/leandrowd/react-responsive-carousel/blob/master/CHANGELOG.md) | ||
| - [Troubleshooting](https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md) | ||
| - [Codesandbox playground](https://codesandbox.io/s/github/leandrowd/react-responsive-carousel/tree/master/codesandbox/default) | ||
| - [Storybook](http://react-responsive-carousel.js.org/storybook/) | ||
| - [Changelog](https://github.com/leandrowd/react-responsive-carousel/blob/master/CHANGELOG.md) | ||
| - [Before contributing](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md) | ||
| - [Troubleshooting](https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md) | ||
| ### Demo | ||
| <http://leandrowd.github.io/react-responsive-carousel/> | ||
@@ -45,5 +46,7 @@ | ||
| Customize it yourself: | ||
| - Codesandbox: <https://codesandbox.io/s/lp602ljjj7> | ||
| - Codesandbox: <https://codesandbox.io/s/lp602ljjj7> | ||
| ### Installing as a package | ||
| `yarn add react-responsive-carousel` | ||
@@ -92,43 +95,43 @@ | ||
| | 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` | | ||
| | labels | `object [key: string]: string` | `{ leftArrow, rightArrow, item }` | optionally specify labels to be applied to controls | | ||
| | onSwipeStart | `function` | - | Fired when a swiping gesture has started | | ||
| | onSwipeEnd | `function` | - | Fired when a swiping gesture has ended | | ||
| | onSwipeMove | `function` | - | Fired when a swiping gesture is happening | | ||
| | renderArrowPrev | `(onClickHandler: () => void, hasPrev: boolean, label: string): React.ReactNode` | `default arrow` | Allows replacement of arrow button previous. | | ||
| | renderArrowNext | `(onClickHandler: () => void, hasNext: boolean, label: string): React.ReactNode` | `default arrow` | Allows replacement of arrow button next. | | ||
| | renderIndicator | `(onClickHandler: () => void, isSelected: boolean, index: number, label: string): React.ReactNode` | `default indicator` | Allows replacement of default indicators | | ||
| | renderItem | `(item: React.ReactNode, props: {isSelected: boolean}): React.ReactNode` | `item` | Allows consumers to intercept the item before rendering for manipulating as needed | | ||
| | renderThumbs | `(children: React.ReactChildren): React.ReactChildren` | `children` | Allows consumers to intercept the children before they are rendered as thumbs, giving the chance to handle them. Useful for finding thumbnails for videos for instance | | ||
| | 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` | | ||
| | labels | `object [key: string]: string` | `{ leftArrow, rightArrow, item }` | optionally specify labels to be applied to controls | | ||
| | onSwipeStart | `function` | - | Fired when a swiping gesture has started | | ||
| | onSwipeEnd | `function` | - | Fired when a swiping gesture has ended | | ||
| | onSwipeMove | `function` | - | Fired when a swiping gesture is happening | | ||
| | renderArrowPrev | `(onClickHandler: () => void, hasPrev: boolean, label: string): React.ReactNode` | `default arrow` | Allows replacement of arrow button previous. | | ||
| | renderArrowNext | `(onClickHandler: () => void, hasNext: boolean, label: string): React.ReactNode` | `default arrow` | Allows replacement of arrow button next. | | ||
| | renderIndicator | `(onClickHandler: () => void, isSelected: boolean, index: number, label: string): React.ReactNode` | `default indicator` | Allows replacement of default indicators | | ||
| | renderItem | `(item: React.ReactNode, props: {isSelected: boolean}): React.ReactNode` | `item` | Allows consumers to intercept the item before rendering for manipulating as needed | | ||
| | renderThumbs | `(children: React.ReactChildren): React.ReactChildren` | `children` | Allows consumers to intercept the children before they are rendered as thumbs, giving the chance to handle them. Useful for finding thumbnails for videos for instance | | ||
| ======================= | ||
| ### Contributing | ||
| The [contributing guide](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md) contains details on how to create pull requests and setup your dev environment. Please read it before contributing! | ||
@@ -139,21 +142,11 @@ | ||
| ### Raising issues | ||
| When raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting. | ||
| * A new option is to create an example with the code that causes the bug. Fork this [example from codesandbox](https://codesandbox.io/s/lp602ljjj7) and add your code there. Don't forget to fork, save and add the link for the example to the issue. | ||
| - A new option is to create an example with the code that causes the bug. Fork this [example from codesandbox](https://codesandbox.io/s/github/leandrowd/react-responsive-carousel/tree/master/codesandbox/default) and add your code there. Don't forget to fork, save and add the link for the example to the issue. | ||
| ======================= | ||
| ### Examples | ||
| #### webpack + es6 setup | ||
| <https://github.com/leandrowd/demo-react-responsive-carousel-es6> | ||
| ## License | ||
| #### Storybook | ||
| <http://react-responsive-carousel.js.org/storybook/> | ||
| #### Codesandbox | ||
| <https://codesandbox.io/s/lp602ljjj7> | ||
| ======================= | ||
| ## License | ||
| [](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel?ref=badge_large) |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.07%
193206
- Dev dependency count
- decreased by-22.5%
31
- Lines of code
- increased by1.84%
2761
Worsened metrics
- Number of lines in readme file
- decreased by-4.49%
149
No dependency changes