New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-multi-carousel
Advanced tools
react-multi-carousel - npm Package Compare versions
Comparing version 1.3.18 to 1.3.19
| { | ||
| "name": "react-multi-carousel", | ||
| "version": "1.3.18", | ||
| "description": "", | ||
| "private": false, | ||
| "version": "1.3.19", | ||
| "description": "Production-ready, lightweight fully customizable React carousel component that rocks supports multiple items and SSR(Server-side rendering) with typescript.", | ||
| "main": "index.js", | ||
@@ -17,3 +18,4 @@ "types": "./lib/types.d.ts", | ||
| "prettier": "prettier --write {examples,src,stories,test}/**/*.{js,ts,tsx}", | ||
| "lint-staged": "lint-staged" | ||
| "lint-staged": "lint-staged", | ||
| "lint": "tslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"src/**/*.js\"" | ||
| }, | ||
@@ -24,2 +26,5 @@ "repository": { | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/YIZHUANG/react-multi-carousel/issues" | ||
| }, | ||
| "keywords": [ | ||
@@ -29,9 +34,28 @@ "react", | ||
| "carousel", | ||
| "react-component", | ||
| "server-side rendering", | ||
| "ssr", | ||
| "multiple items" | ||
| "image-gallery", | ||
| "video-gallery", | ||
| "slide-show", | ||
| "swipe", | ||
| "drag", | ||
| "touch", | ||
| "multiple items", | ||
| "gallery", | ||
| "slider", | ||
| "responsive", | ||
| "mobile-friendly", | ||
| "tablet-friendly", | ||
| "breakpoint" | ||
| ], | ||
| "author": "YIZHUANG", | ||
| "engines": { | ||
| "node": ">=8" | ||
| }, | ||
| "author": { | ||
| "name": "YI ZHUANG", | ||
| "url": "https://yizhuang.fi/" | ||
| }, | ||
| "license": "MIT", | ||
| "homepage": "https://github.com/YIZHUANG/react-multi-carousel#readme", | ||
| "homepage": "https://w3js.com/react-multi-carousel/", | ||
| "jest": { | ||
@@ -64,2 +88,3 @@ "testEnvironment": "jsdom", | ||
| "@material-ui/core": "^3.9.2", | ||
| "@smartive/tslint-config": "^6.0.0", | ||
| "@storybook/addon-actions": "^4.1.13", | ||
@@ -92,2 +117,3 @@ "@storybook/addon-links": "^4.1.13", | ||
| "ts-jest": "^24.0.2", | ||
| "tslint": "^5.16.0", | ||
| "typescript": "^3.4.3" | ||
@@ -94,0 +120,0 @@ }, |
@@ -9,2 +9,4 @@ # react-multi-carousel | ||
| [](https://travis-ci.org/YIZHUANG/react-multi-carousel) | ||
| [](https://app.fossa.io/projects/git%2Bgithub.com%2FYIZHUANG%2Freact-multi-carousel?ref=badge_shield) | ||
| [](https://david-dm.org/YIZHUANG/react-multi-carousel) | ||
@@ -38,5 +40,6 @@ ### Features. | ||
| - [Contributing](https://github.com/YIZHUANG/react-multi-carousel/blob/master/contributing.md) | ||
| - [Changelog](https://github.com/YIZHUANG/react-multi-carousel/blob/master/CHANGELOG.md) | ||
| - [Releases](https://github.com/YIZHUANG/react-multi-carousel/releases) | ||
| - [TypeScript usage](https://github.com/YIZHUANG/react-multi-carousel/blob/master/TypeScriptUsage.md) | ||
| - [Ssr demo](https://react-multi-carousel.now.sh/) | ||
| - [SSR demo](https://react-multi-carousel.now.sh/) | ||
@@ -350,3 +353,3 @@ ## Bundle size | ||
| ```js | ||
| <Carousel ref={(el) => (this.Carousel = el)} additionalTransfrom={-20* 5} /> // it needs to be a negative number | ||
| <Carousel ref={el => (this.Carousel = el)} additionalTransfrom={-20 * 5} /> // it needs to be a negative number | ||
| ``` | ||
@@ -356,34 +359,34 @@ | ||
| | Name | Type | Default | Description | | ||
| | :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | responsive | `object` | `{}` | Numbers of slides to show at each breakpoint | | ||
| | deviceType | `string` | `''` | Only pass this when use for server-side rendering, what to pass can be found in the example folder | | ||
| | ssr | `boolean` | `false` | Use in conjunction with responsive and deviceType prop | | ||
| | slidesToSlide | `Number` | `1` | How many slides to slide. | | ||
| | draggable | `boolean` | `true` | Optionally disable/enable dragging on desktop | | ||
| | swipeable | `boolean` | `true` | Optionally disable/enable swiping on mobile | | ||
| | arrows | `boolean` | `true` | Hide/Show the default arrows | | ||
| | removeArrowOnDeviceType | `string or array` | `''` | Hide the default arrows at different break point, should be used with `responsive` props. Value could be `mobile` or `['mobile', 'tablet'], can be a string or array` | | ||
| | customLeftArrow | `jsx` | `null` | Replace the default arrow with your own | | ||
| | customRightArrow | `jsx` | `null` | Replace the default arrow with your own | | ||
| | customDot | `jsx` | null | Replace the default dots with your own | | ||
| | customButtonGroup | `jsx` | null | Fully customize your own control functionality if you don't want arrows or dots | | ||
| | infinite | `boolean` | false | Infinite loop | | ||
| | minimumTouchDrag | `number` | `50` | The amount of distance to drag / swipe in order to move to the next slide. | | ||
| | afterChange | `function` | `null` | A callback after sliding everytime. | | ||
| | beforeChange | `function` | `null` | A callback before sliding everytime. | | ||
| | sliderClass | `string` | `'react-multi-carousel-track'` | CSS class for inner slider div, use this to style your own track list. | | ||
| | itemClass | `string` | `''` | CSS class for carousel item, use this to style your own Carousel item. For example add padding-left and padding-right | | ||
| | containerClass | `string` | `'react-multi-carousel-list'` | Use this to style the whole container. For example add padding to allow the "dots" or "arrows" to go to other places without being overflown. | | ||
| | dotListClass | `string` | `'react-multi-carousel-dot-list'` | Use this to style the dot list. | | ||
| | keyBoardControl | `boolean` | `true` | Use keyboard to navigate to next/previous slide | | ||
| | autoPlay | `boolean` | `false` | Auto play | | ||
| | autoPlaySpeed | `number` | 3000 | The unit is ms | | ||
| | showDots | `boolean` | `false` | Hide the default dot list | | ||
| | partialVisbile | `boolean | string` | `false` | Show partial next slides. This is use with the `responsive` prop, see example for details | | ||
| | customTransition | `string` | `transform 300ms ease-in-out` | Configure your own anaimation when sliding | | ||
| | Name | Type | Default | Description | | ||
| | :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | responsive | `object` | `{}` | Numbers of slides to show at each breakpoint | | ||
| | deviceType | `string` | `''` | Only pass this when use for server-side rendering, what to pass can be found in the example folder | | ||
| | ssr | `boolean` | `false` | Use in conjunction with responsive and deviceType prop | | ||
| | slidesToSlide | `Number` | `1` | How many slides to slide. | | ||
| | draggable | `boolean` | `true` | Optionally disable/enable dragging on desktop | | ||
| | swipeable | `boolean` | `true` | Optionally disable/enable swiping on mobile | | ||
| | arrows | `boolean` | `true` | Hide/Show the default arrows | | ||
| | removeArrowOnDeviceType | `string or array` | `''` | Hide the default arrows at different break point, should be used with `responsive` props. Value could be `mobile` or `['mobile', 'tablet'], can be a string or array` | | ||
| | customLeftArrow | `jsx` | `null` | Replace the default arrow with your own | | ||
| | customRightArrow | `jsx` | `null` | Replace the default arrow with your own | | ||
| | customDot | `jsx` | null | Replace the default dots with your own | | ||
| | customButtonGroup | `jsx` | null | Fully customize your own control functionality if you don't want arrows or dots | | ||
| | infinite | `boolean` | false | Infinite loop | | ||
| | minimumTouchDrag | `number` | `50` | The amount of distance to drag / swipe in order to move to the next slide. | | ||
| | afterChange | `function` | `null` | A callback after sliding everytime. | | ||
| | beforeChange | `function` | `null` | A callback before sliding everytime. | | ||
| | sliderClass | `string` | `'react-multi-carousel-track'` | CSS class for inner slider div, use this to style your own track list. | | ||
| | itemClass | `string` | `''` | CSS class for carousel item, use this to style your own Carousel item. For example add padding-left and padding-right | | ||
| | containerClass | `string` | `'react-multi-carousel-list'` | Use this to style the whole container. For example add padding to allow the "dots" or "arrows" to go to other places without being overflown. | | ||
| | dotListClass | `string` | `'react-multi-carousel-dot-list'` | Use this to style the dot list. | | ||
| | keyBoardControl | `boolean` | `true` | Use keyboard to navigate to next/previous slide | | ||
| | autoPlay | `boolean` | `false` | Auto play | | ||
| | autoPlaySpeed | `number` | 3000 | The unit is ms | | ||
| | showDots | `boolean` | `false` | Hide the default dot list | | ||
| | partialVisbile | `boolean | string` | `false` | Show partial next slides. This is use with the `responsive` prop, see example for details | | ||
| | customTransition | `string` | `transform 300ms ease-in-out` | Configure your own anaimation when sliding | | ||
| | transitionDuration | `number |`300` | The unit is ms, if you are using customTransition, make sure to put the duration here as this is needed for the resizing to work. | | ||
| | focusOnSelect | `boolean |`false` | Go to slide on click and make the slide a current slide. | | ||
| | centerMode | `boolean |`false` | Shows the next items and previous items paritially. | | ||
| | additionalTransfrom | `number |`0` | additional transfrom to the current one. | | ||
| | focusOnSelect | `boolean |`false` | Go to slide on click and make the slide a current slide. | | ||
| | centerMode | `boolean |`false` | Shows the next items and previous items paritially. | | ||
| | additionalTransfrom | `number |`0` | additional transfrom to the current one. | | ||
@@ -402,6 +405,10 @@ ## Contribute | ||
| ## Donation | ||
| ## Donation | ||
| If this project help you reduce time to develop, you can give me a cup of coffee :) | ||
| [](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GJSPRG9RKSJLQ&source=url) | ||
| ## License | ||
| [](https://app.fossa.io/projects/git%2Bgithub.com%2FYIZHUANG%2Freact-multi-carousel?ref=badge_large) |
Fixed alerts
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by13.66%
174694
- Number of package files
- increased by7.02%
61
- Lines of code
- increased by0.63%
1436
- Number of low maintenance alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by1.74%
410
Worsened metrics
- Dev dependency count
- increased by6.67%
32
No dependency changes