Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
nuka-carousel
Advanced tools
nuka-carousel - npm Package Compare versions
Comparing version 4.8.4 to 5.0.0
@@ -5,10 +5,4 @@ // Definitions by: Roman Charugin <https://github.com/Romic> | ||
| import * as CSS from 'csstype'; | ||
| import * as React from 'react'; | ||
| export default class Carousel extends React.Component< | ||
| CarouselProps, | ||
| CarouselState | ||
| > {} | ||
| export type CarouselScrollModeProp = 'page' | 'remainder'; | ||
@@ -111,8 +105,2 @@ | ||
| /** | ||
| * All available DOM style properties and their types | ||
| * https://www.npmjs.com/package/csstype | ||
| */ | ||
| export interface CSSProperties extends CSS.Properties<string | number> {} | ||
| export interface CarouselProps { | ||
@@ -195,3 +183,3 @@ /** | ||
| key: CarouselControlContainerProp | ||
| ) => CSSProperties; | ||
| ) => React.CSSProperties; | ||
@@ -204,10 +192,10 @@ /** | ||
| nextButtonClassName?: string; | ||
| nextButtonStyle?: CSSProperties; | ||
| nextButtonStyle?: React.CSSProperties; | ||
| nextButtonText?: string; | ||
| prevButtonClassName?: string; | ||
| prevButtonStyle?: CSSProperties; | ||
| prevButtonStyle?: React.CSSProperties; | ||
| prevButtonText?: string; | ||
| pagingDotsContainerClassName?: string; | ||
| pagingDotsClassName?: string; | ||
| pagingDotsStyle?: CSSProperties; | ||
| pagingDotsStyle?: React.CSSProperties; | ||
| }; | ||
@@ -404,3 +392,3 @@ | ||
| */ | ||
| style?: CSSProperties; | ||
| style?: React.CSSProperties; | ||
@@ -507,9 +495,14 @@ /** | ||
| export interface PreviousButtonProps extends CarouselSlideRenderControlProps {} | ||
| export default class Carousel extends React.Component< | ||
| CarouselProps, | ||
| CarouselState | ||
| > {} | ||
| export type PreviousButtonProps = CarouselSlideRenderControlProps; | ||
| export const PreviousButton: React.FC<PreviousButtonProps>; | ||
| export interface NextButtonProps extends CarouselSlideRenderControlProps {} | ||
| export type NextButtonProps = CarouselSlideRenderControlProps; | ||
| export const NextButton: React.FC<NextButtonProps>; | ||
| export interface PagingDotsProps extends CarouselSlideRenderControlProps {} | ||
| export type PagingDotsProps = CarouselSlideRenderControlProps; | ||
| export const PagingDots: React.FC<PagingDotsProps>; |
@@ -1,5 +0,5 @@ | ||
| module.exports = require('./lib').default; | ||
| module.exports = require('./lib-v5').default; | ||
| module.exports.default = module.exports; | ||
| module.exports.NextButton = require('./lib').NextButton; | ||
| module.exports.PreviousButton = require('./lib').PreviousButton; | ||
| module.exports.PagingDots = require('./lib').PagingDots; | ||
| module.exports.NextButton = require('./lib-v5').NextButton; | ||
| module.exports.PreviousButton = require('./lib-v5').PreviousButton; | ||
| module.exports.PagingDots = require('./lib-v5').PagingDots; |
| { | ||
| "name": "nuka-carousel", | ||
| "version": "4.8.4", | ||
| "version": "5.0.0", | ||
| "description": "Pure React Carousel", | ||
@@ -9,9 +9,10 @@ "main": "index.js", | ||
| "types": "index.d.ts", | ||
| "engines": { | ||
| "node": ">=12.0.0" | ||
| }, | ||
| "dependencies": { | ||
| "csstype": "^2.6.6", | ||
| "d3-ease": "^1.0.3", | ||
| "exenv": "^1.2.0", | ||
| "prop-types": "^15.6.0", | ||
| "react-move": "^6.5.0", | ||
| "wicg-inert": "^3.1.0" | ||
| "react-move": "^6.5.0" | ||
| }, | ||
@@ -24,31 +25,44 @@ "devDependencies": { | ||
| "@babel/plugin-transform-runtime": "^7.10.4", | ||
| "@babel/plugin-transform-typescript": "^7.16.8", | ||
| "@babel/polyfill": "^7.10.4", | ||
| "@babel/preset-env": "^7.10.4", | ||
| "@babel/preset-react": "^7.10.4", | ||
| "babel-eslint": "^8.2.2", | ||
| "@storybook/addon-actions": "^6.4.18", | ||
| "@storybook/addon-essentials": "^6.4.18", | ||
| "@storybook/addon-links": "^6.4.18", | ||
| "@storybook/builder-webpack5": "^6.4.18", | ||
| "@storybook/manager-webpack5": "^6.4.18", | ||
| "@storybook/react": "^6.4.18", | ||
| "@types/d3-ease": "^3.0.0", | ||
| "@types/exenv": "^1.2.0", | ||
| "@types/react": "^16.9.56", | ||
| "@types/react-dom": "^17.0.11", | ||
| "@typescript-eslint/eslint-plugin": "^5.5.0", | ||
| "@typescript-eslint/parser": "^5.5.0", | ||
| "babel-loader": "8.1.0", | ||
| "builder": "^5.0.0", | ||
| "chromatic": "^6.2.0", | ||
| "cypress": "^9.3.1", | ||
| "enzyme": "^3.3.0", | ||
| "enzyme-adapter-react-16": "^1.15.6", | ||
| "eslint": "^4.8.0", | ||
| "eslint-config-formidable": "^3.0.0", | ||
| "eslint-config-jest-enzyme": "^6.0.0", | ||
| "eslint": "^8.3.0", | ||
| "eslint-config-formidable": "^4.0.0", | ||
| "eslint-config-jest-enzyme": "^7.1.2", | ||
| "eslint-config-prettier": "^2.9.0", | ||
| "eslint-plugin-filenames": "^1.2.0", | ||
| "eslint-plugin-import": "^2.22.1", | ||
| "eslint-plugin-prettier": "^2.6.0", | ||
| "eslint-plugin-react": "^7.14.3", | ||
| "eslint-plugin-cypress": "^2.12.1", | ||
| "eslint-plugin-filenames": "^1.3.2", | ||
| "eslint-plugin-import": "^2.25.3", | ||
| "eslint-plugin-prettier": "^4.0.0", | ||
| "eslint-plugin-promise": "^5.2.0", | ||
| "eslint-plugin-react": "^7.27.1", | ||
| "jest": "^24.7.1", | ||
| "jest-enzyme": "^7.0.2", | ||
| "jest-puppeteer-preset": "^2.0.1", | ||
| "prettier": "2.1.2", | ||
| "puppeteer": "^5.5.0", | ||
| "react": "^16.9.0", | ||
| "react-dom": "^16.9.0", | ||
| "tslint": "^5.12.0", | ||
| "typescript": "^3.6.2", | ||
| "typescript": "^4.5.2", | ||
| "url-loader": "^4.1.1", | ||
| "webpack": "5.61.0", | ||
| "webpack-cli": "^4.9.1", | ||
| "webpack-dev-server": "^4.4.0" | ||
| "webpack-dev-server": "^4.6.0" | ||
| }, | ||
@@ -63,2 +77,6 @@ "peerDependencies": { | ||
| "scripts": { | ||
| "build-v5": "builder concurrent --buffer build-v5-lib build-v5-es", | ||
| "build-v5-babel": "babel src-v5 --extensions .ts,.tsx", | ||
| "build-v5-es": "builder run --env \"{\\\"BABEL_ENV\\\":\\\"esm\\\"}\" build-v5-babel -- -d es-v5", | ||
| "build-v5-lib": "builder run build-v5-babel -- -d lib-v5", | ||
| "build": "builder concurrent --buffer build-lib build-es", | ||
@@ -70,18 +88,23 @@ "build-babel": "babel src", | ||
| "build-watch": "builder concurrent build-lib build-es -- --watch", | ||
| "check": "npm run lint-js && npm run check-typescript && npm run test", | ||
| "check-typescript": "tsc index.d.ts && npm run lint-dts", | ||
| "lint": "npm run lint-js && npm run lint-dts", | ||
| "lint-dts": "tslint index.d.ts --format verbose", | ||
| "lint-fix": "npm run lint-js -- --fix && npm run lint-dts -- --fix", | ||
| "lint-js": "eslint .", | ||
| "prettier": "prettier \"**/*.{js,json,ts,css,md}\"", | ||
| "check": "npm run lint && npm run check-typescript && npm run test", | ||
| "check-typescript": "tsc --noEmit", | ||
| "lint": "eslint --ext .js,.ts,.tsx .", | ||
| "lint-fix": "eslint --ext .js,.ts,.tsx . --fix", | ||
| "prettier": "prettier \"**/*.{js,json,ts,tsx,css,md}\"", | ||
| "prettier-fix": "prettier \"**/*.{js,json,ts,tsx,css,md}\" --write", | ||
| "preversion": "npm run check", | ||
| "start": "webpack-dev-server --mode development", | ||
| "start:next": "cd ./examples/nextjs && yarn dev", | ||
| "start:next:ci": "cd ./examples/nextjs && yarn install && yarn dev", | ||
| "test": "jest test --config jest.unit.config.js", | ||
| "test-e2e": "jest test --config jest.e2e.config.js", | ||
| "version": "npm run build" | ||
| "test:e2e": "cypress open", | ||
| "test:e2e:ci": "cypress run", | ||
| "version": "npm run build", | ||
| "storybook": "start-storybook -p 6006", | ||
| "storybook-build": "build-storybook", | ||
| "chromatic": "chromatic --exit-zero-on-changes" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/kenwheeler/nuka-carousel.git" | ||
| "url": "https://github.com/FormidableLabs/nuka-carousel.git" | ||
| }, | ||
@@ -93,3 +116,3 @@ "keywords": [ | ||
| ], | ||
| "author": "Ken Wheeler", | ||
| "author": "@FormidableLabs", | ||
| "license": "MIT", | ||
@@ -96,0 +119,0 @@ "bugs": { |
109
README.md
@@ -5,2 +5,5 @@ [![Maintenance Status][maintenance-image]](#maintenance-status) | ||
| > :warning: We are currently working on the new version of the library (**v5**). The goal of the new version is to remove most of nuka-carousel dependencies, | ||
| > make it more performant, support server-side rendering and reduce parameters, but not functionalities. You can read more about [nuka-carousel v5 here](https://github.com/FormidableLabs/nuka-carousel/tree/main/src-v5). | ||
| A Pure ReactJS Carousel Component | ||
@@ -17,3 +20,5 @@ | ||
| ``` | ||
| OR | ||
| ```bash | ||
@@ -59,2 +64,13 @@ $ npm install nuka-carousel | ||
| ### Running Storybook | ||
| Once you have cloned this repo locally, run the following to launch Storybook: | ||
| ```bash | ||
| yarn | ||
| yarn storybook | ||
| ``` | ||
| You can access Storybook on your localhost at the following url: <a href="http://localhost:6006/" target="_blank">Storybook</a> | ||
| ### Keyboard Controls | ||
@@ -75,46 +91,46 @@ | ||
| | Name | PropType | Description | Default | | ||
| | :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------- | | ||
| | afterSlide | `React.PropTypes.func` | Hook to be called after a slide is changed. | | | ||
| | animation | `React.PropTypes.oneOf(['zoom'])` | Adds a zoom effect on the currently visible slide. A `transform: scale(0.85)` is set as default, however, the scale can be customized using `zoomScale` prop. Property is applied on all slides except the current 1. Use `cellAlign` to align the slide with zoom effect where you'd like. | | | ||
| | autoGenerateStyleTag | `React.PropTypes.bool` | When set to `true`, it will generate a `style` tag to help ensure images are displayed properly. Set to `false` if you don't want or need the style tag generated. | `true` | | ||
| | autoplay | `React.PropTypes.bool` | Autoplay mode active. | `false` | | ||
| | autoplayInterval | `React.PropTypes.number` | Interval for autoplay iteration. | `3000 milliseconds` | | ||
| | autoplayReverse | `React.PropTypes.bool` | Only meaningful when `autoplay` is already true. When `autoplayReverse` is also true, autorotation cycles through slides indexes from high to low. | `false` | | ||
| | beforeSlide | `React.PropTypes.func` | Hook to be called before a slide is changed | | | ||
| | cellAlign | `React.PropTypes.oneOf(['left', 'center', 'right'])` | When displaying more than one slide, sets which position to anchor the current slide to. **Is overridden to `left` when `transitionMode="fade"`** | | | ||
| | cellSpacing | `React.PropTypes.number` | Space between slides, as an integer, but reflected as `px` | | | ||
| | enableKeyboardControls | `React.PropTypes.bool` | When set to `true` will enable keyboard controls when the carousel has focus. If the carousel does not have focus, keyboard controls will be ignored. | `false` | | ||
| | keyCodeConfig | `PropTypes.exact({ previousSlide: PropTypes.arrayOf(PropTypes.number), nextSlide: PropTypes.arrayOf(PropTypes.number), firstSlide: PropTypes.arrayOf(PropTypes.number), lastSlide: PropTypes.arrayOf(PropTypes.number), pause: PropTypes.arrayOf(PropTypes.number) })` | If `enableKeyboardControls` prop is true, you can pass configuration for the keyCode so you can override the default keyboard keys configured. | `{ nextSlide: [39, 68, 38, 87], previousSlide: [37, 65, 40, 83], firstSlide: [81], lastSlide: [69], pause: [32] }` | | ||
| | getControlsContainerStyles | `React.PropTypes.func` | callback function to provide style to controls containers | | | ||
| | defaultControlsConfig | `React.PropTypes.shape({ containerClassName: PropTypes.string, nextButtonClassName: PropTypes.string, nextButtonStyle: Proptypes.object, nextButtonText: PropTypes.string, prevButtonClassName: PropTypes.string, prevButtonStyle: PropTypes.object, prevButtonText: PropTypes.string, pagingDotsContainerClassName: PropTypes.string, pagingDotsClassName: PropTypes.string, pagingDotsStyle: PropTypes.object })` | This prop lets you apply custom classes and styles to the default `Container`. `Next`, `Previous`, and `Paging Dots` controls. More information on how to customize these controls can be found below. | `{}` | | ||
| | disableAnimation | `React.PropTypes.bool` | When set to `true`, will disable animation. | `false` | | ||
| | disableEdgeSwiping | `React.PropTypes.bool` | When set to `true`, will disable swiping before first slide and after last slide. | `false` | | ||
| | dragging | `React.PropTypes.bool` | Enable mouse swipe/dragging. | `true` | | ||
| | easing | `React.PropTypes.string` | Animation easing function. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease) | | | ||
| | edgeEasing | `React.PropTypes.string` | Animation easing function when swipe exceeds edge. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease) | | | ||
| | frameOverflow | `React.PropTypes.string` | Used to set overflow style property on slider frame. | `hidden` | | ||
| | framePadding | `React.PropTypes.string` | Used to set the margin of the slider frame. Accepts any string dimension value such as `"0px 20px"` or `"500px"` | | | ||
| | heightMode | `React.PropTypes.oneOf(['first', 'current', 'max'])` | Change the height of the slides based either on the first slide, the current slide, or the maximum height of all slides. Overrides height set by `initialSlideHeight` | | | ||
| | innerRef | `React.PropTypes.oneOfType([ React.PropTypes.func, React.PropTypes.shape({ current: React.PropTypes.elementType })])` | React `ref` that should be set on the carousel element | | | ||
| | initialSlideHeight | `React.PropTypes.number` | Initial height of the slides in pixels. | `100` | | ||
| | initialSlideWidth | `React.PropTypes.number` | Initial width of the slides in pixels | | | ||
| | pauseOnHover | `React.PropTypes.bool` | Pause autoPlay when mouse is over carousel. | `true` | | ||
| | renderAnnounceSlideMessage | `React.PropTypes.func` | Renders message in the ARIA live region that is announcing the current slide on slide change | Render function that returns `"Slide {currentSlide + 1} of {slideCount}"` | | ||
| | scrollMode | `React.PropTypes.oneOf(['page', 'remainder'])` | When `scrollMode` is set to `remainder`, the carousel will only scroll the amount of slides necessary without showing blank slides. If `scrollMode` is set to `page` then `slidesToScroll` will equal `slidesToShow` and the final page may contain blank slides. | `remainder` | | ||
| | slideIndex | `React.PropTypes.number` | Manually set the index of the slide to be shown | | | ||
| | slideOffset | `React.PropTypes.number` | While using prop `animation = "zoom"`, you can configure space around current slide with slideOffset. | 25 | | ||
| | slidesToScroll | `React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.oneOf(['auto'])])` | Slides to scroll at once. Set to `"auto"` to always scroll the current number of visible slides. Is overridden to `slidesToShow` when `transitionMode="fade"` | | | ||
| | slidesToShow | `React.PropTypes.number` | Number of slides to show at once. Will be cast to an `integer` when `transitionMode="fade"` | | | ||
| | slideWidth | `React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])` | Manually set slideWidth. If you want hard pixel widths, use a string like `slideWidth="20px"`, and if you prefer a percentage of the container, use a decimal integer like `slideWidth={0.8}` | | | ||
| | speed | `React.PropTypes.number` | Animation duration/Transition speed in milliseconds | | | ||
| | swiping | `React.PropTypes.bool` | Enable touch swipe/dragging | `true` | | ||
| | transitionMode | `React.PropTypes.oneOf(['scroll', 'fade', 'scroll3d'])` | Set the way slides transition from one to the next. | `scroll` | | ||
| | vertical | `React.PropTypes.bool` | Enable the slides to transition vertically | | | ||
| | width | `React.PropTypes.string` | Used to hardcode the slider width. Accepts any string dimension value such as `"80%"` or `"500px"` | | | ||
| | withoutControls | `React.PropTypes.bool` | Used to remove all controls at once. Overwrites the `render[Top, Right, Bottom, Left]CenterControls()`. | `false` | | ||
| | wrapAround | `React.PropTypes.bool` | Sets infinite wrapAround mode. An option similar to repeat or infinite in other libs. | `false` | | ||
| | zoomScale | `React.PropTypes.number` | Adds a number value to set the scale of zoom when `animation === "zoom"`. The number value should be set in a range of (0,1). The default value is set to `zoomScale: 0.85` | | ||
| | opacityScale | `React.PropTypes.number` | Adds a number value to set the scale of the opacity for the 'scroll3d' transition mode. The number value should be set in a range of (0,1). The default value is set to `opacityScale: 0.65` | | ||
| | onDragStart | `React.PropTypes.func` | Adds a callback to capture event at the start of swiping/dragging slides | | ||
| | Name | PropType | Description | Default | | ||
| | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------- | | ||
| | afterSlide | `React.PropTypes.func` | Hook to be called after a slide is changed. | | | ||
| | animation | `React.PropTypes.oneOf(['zoom'])` | Adds a zoom effect on the currently visible slide. A `transform: scale(0.85)` is set as default, however, the scale can be customized using `zoomScale` prop. Property is applied on all slides except the current 1. Use `cellAlign` to align the slide with zoom effect where you'd like. | | | ||
| | autoGenerateStyleTag | `React.PropTypes.bool` | When set to `true`, it will generate a `style` tag to help ensure images are displayed properly. Set to `false` if you don't want or need the style tag generated. | `true` | | ||
| | autoplay | `React.PropTypes.bool` | Autoplay mode active. | `false` | | ||
| | autoplayInterval | `React.PropTypes.number` | Interval for autoplay iteration. | `3000 milliseconds` | | ||
| | autoplayReverse | `React.PropTypes.bool` | Only meaningful when `autoplay` is already true. When `autoplayReverse` is also true, autorotation cycles through slides indexes from high to low. | `false` | | ||
| | beforeSlide | `React.PropTypes.func` | Hook to be called before a slide is changed | | | ||
| | cellAlign | `React.PropTypes.oneOf(['left', 'center', 'right'])` | When displaying more than one slide, sets which position to anchor the current slide to. **Is overridden to `left` when `transitionMode="fade"`** | | | ||
| | cellSpacing | `React.PropTypes.number` | Space between slides, as an integer, but reflected as `px` | | | ||
| | enableKeyboardControls | `React.PropTypes.bool` | When set to `true` will enable keyboard controls when the carousel has focus. If the carousel does not have focus, keyboard controls will be ignored. | `false` | | ||
| | keyCodeConfig | `PropTypes.exact({ previousSlide: PropTypes.arrayOf(PropTypes.number), nextSlide: PropTypes.arrayOf(PropTypes.number), firstSlide: PropTypes.arrayOf(PropTypes.number), lastSlide: PropTypes.arrayOf(PropTypes.number), pause: PropTypes.arrayOf(PropTypes.number) })` | If `enableKeyboardControls` prop is true, you can pass configuration for the keyCode so you can override the default keyboard keys configured. | `{ nextSlide: [39, 68, 38, 87], previousSlide: [37, 65, 40, 83], firstSlide: [81], lastSlide: [69], pause: [32] }` | | ||
| | getControlsContainerStyles | `React.PropTypes.func` | callback function to provide style to controls containers | | | ||
| | defaultControlsConfig | `React.PropTypes.shape({ containerClassName: PropTypes.string, nextButtonClassName: PropTypes.string, nextButtonStyle: Proptypes.object, nextButtonText: PropTypes.string, prevButtonClassName: PropTypes.string, prevButtonStyle: PropTypes.object, prevButtonText: PropTypes.string, pagingDotsContainerClassName: PropTypes.string, pagingDotsClassName: PropTypes.string, pagingDotsStyle: PropTypes.object })` | This prop lets you apply custom classes and styles to the default `Container`. `Next`, `Previous`, and `Paging Dots` controls. More information on how to customize these controls can be found below. | `{}` | | ||
| | disableAnimation | `React.PropTypes.bool` | When set to `true`, will disable animation. | `false` | | ||
| | disableEdgeSwiping | `React.PropTypes.bool` | When set to `true`, will disable swiping before first slide and after last slide. | `false` | | ||
| | dragging | `React.PropTypes.bool` | Enable mouse swipe/dragging. | `true` | | ||
| | easing | `React.PropTypes.string` | Animation easing function. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease) | | | ||
| | edgeEasing | `React.PropTypes.string` | Animation easing function when swipe exceeds edge. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease) | | | ||
| | frameOverflow | `React.PropTypes.string` | Used to set overflow style property on slider frame. | `hidden` | | ||
| | framePadding | `React.PropTypes.string` | Used to set the margin of the slider frame. Accepts any string dimension value such as `"0px 20px"` or `"500px"` | | | ||
| | heightMode | `React.PropTypes.oneOf(['first', 'current', 'max'])` | Change the height of the slides based either on the first slide, the current slide, or the maximum height of all slides. Overrides height set by `initialSlideHeight` | | | ||
| | innerRef | `React.PropTypes.oneOfType([ React.PropTypes.func, React.PropTypes.shape({ current: React.PropTypes.elementType })])` | React `ref` that should be set on the carousel element | | | ||
| | initialSlideHeight | `React.PropTypes.number` | Initial height of the slides in pixels. | `100` | | ||
| | initialSlideWidth | `React.PropTypes.number` | Initial width of the slides in pixels | | | ||
| | pauseOnHover | `React.PropTypes.bool` | Pause autoPlay when mouse is over carousel. | `true` | | ||
| | renderAnnounceSlideMessage | `React.PropTypes.func` | Renders message in the ARIA live region that is announcing the current slide on slide change | Render function that returns `"Slide {currentSlide + 1} of {slideCount}"` | | ||
| | scrollMode | `React.PropTypes.oneOf(['page', 'remainder'])` | When `scrollMode` is set to `remainder`, the carousel will only scroll the amount of slides necessary without showing blank slides. If `scrollMode` is set to `page` then `slidesToScroll` will equal `slidesToShow` and the final page may contain blank slides. | `remainder` | | ||
| | slideIndex | `React.PropTypes.number` | Manually set the index of the slide to be shown | | | ||
| | slideOffset | `React.PropTypes.number` | While using prop `animation = "zoom"`, you can configure space around current slide with slideOffset. | 25 | | ||
| | slidesToScroll | `React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.oneOf(['auto'])])` | Slides to scroll at once. Set to `"auto"` to always scroll the current number of visible slides. Is overridden to `slidesToShow` when `transitionMode="fade"` | | | ||
| | slidesToShow | `React.PropTypes.number` | Number of slides to show at once. Will be cast to an `integer` when `transitionMode="fade"` | | | ||
| | slideWidth | `React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])` | Manually set slideWidth. If you want hard pixel widths, use a string like `slideWidth="20px"`, and if you prefer a percentage of the container, use a decimal integer like `slideWidth={0.8}` | | | ||
| | speed | `React.PropTypes.number` | Animation duration/Transition speed in milliseconds | | | ||
| | swiping | `React.PropTypes.bool` | Enable touch swipe/dragging | `true` | | ||
| | transitionMode | `React.PropTypes.oneOf(['scroll', 'fade', 'scroll3d'])` | Set the way slides transition from one to the next. | `scroll` | | ||
| | vertical | `React.PropTypes.bool` | Enable the slides to transition vertically | | | ||
| | width | `React.PropTypes.string` | Used to hardcode the slider width. Accepts any string dimension value such as `"80%"` or `"500px"` | | | ||
| | withoutControls | `React.PropTypes.bool` | Used to remove all controls at once. Overwrites the `render[Top, Right, Bottom, Left]CenterControls()`. | `false` | | ||
| | wrapAround | `React.PropTypes.bool` | Sets infinite wrapAround mode. An option similar to repeat or infinite in other libs. | `false` | | ||
| | zoomScale | `React.PropTypes.number` | Adds a number value to set the scale of zoom when `animation === "zoom"`. The number value should be set in a range of (0,1). The default value is set to `zoomScale: 0.85` | | ||
| | opacityScale | `React.PropTypes.number` | Adds a number value to set the scale of the opacity for the 'scroll3d' transition mode. The number value should be set in a range of (0,1). The default value is set to `opacityScale: 0.65` | | ||
| | onDragStart | `React.PropTypes.func` | Adds a callback to capture event at the start of swiping/dragging slides | | ||
@@ -210,3 +226,3 @@ #### render\*Controls | ||
| The default controls used by Nuka are the `Previous` button, `Next` button, and `PagingDots` control. The visual look and text of these controls can be modified with props as described below: | ||
| The default controls used by Nuka are the `Previous` button, `Next` button, and `PagingDots` control. The visual look and text of these controls can be modified with props as described below: | ||
@@ -246,3 +262,3 @@ - The props ending with `ClassName` let you apply a custom css class to its respective control. | ||
| slideIndex={this.state.slideIndex} | ||
| afterSlide={slideIndex => this.setState({ slideIndex })} | ||
| afterSlide={(slideIndex) => this.setState({ slideIndex })} | ||
| > | ||
@@ -285,1 +301,2 @@ <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide1" /> | ||
| [maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg | ||
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
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
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-25%
6
- Number of package files
- increased by8%
27
- Number of lines in readme file
- increased by6.09%
296
Worsened metrics
- Total package byte prevSize
- decreased by-46.12%
154187
- Dev dependency count
- increased by38.24%
47
- Lines of code
- decreased by-54.99%
2560
Dependency changes
- Removedcsstype@^2.6.6
- Removedwicg-inert@^3.1.0
- Removedcsstype@2.6.21(transitive)
- Removedwicg-inert@3.1.3(transitive)