{"_id":"@adactiveasia/react-alice-carousel","_rev":"1-6d867424ea313b12822a173b75c0df75","name":"@adactiveasia/react-alice-carousel","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@adactiveasia/react-alice-carousel","version":"0.0.1","description":"React image gallery, react slideshow carousel, react content rotator","main":"./lib/react-alice-carousel.js","types":"./lib/react-alice-carousel.d.ts","repository":{"type":"git","url":"git+https://github.com/adactiveasia/react-carousel.git"},"scripts":{"remove:nm":"find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +","remove:lock":"find . -type f \\( -name 'yarn.lock' -or -name 'package-lock.json' \\) -delete","remove:cache":"yarn cache clean --force; npm cache clean --force","lint":"eslint ./src/**/**.ts","format":"prettier --write ./src/**/**.ts","postpublish":"git push --tags","precommit":"npm run lint && npm test","prepush":"npm run lint && npm test","start":"webpack-dev-server --hot --config config/webpack/config.dev.js","test":"jest --config jestconfig.json","test:watch":"jest --watch --config jestconfig.json","test:coverage":"jest --config jestconfig.json --coverage","type-check":"tsc --noEmit","type-check:watch":"npm run type-check -- --watch","build:clear":"rimraf lib && rimraf coverage","build:bundle":"webpack --config config/webpack/config.lib.js","build:js":"babel src/lib --out-dir lib --extensions \".ts,.tsx\" --source-maps inline","build:lib":"npm run build:clear && npm run build:types && gulp --gulpfile config/gulp/gulpfile.js","build:static":"rimraf lib static; webpack -p --config config/webpack/config.static.js","build:types":"tsc --emitDeclarationOnly"},"keywords":["react","carousel","gallery","slider","slideshow","rotator","react-slideshow","react-gallery","react carousel","react slideshow","react gallery","image gallery","image slider","image carousel","image rotator","content gallery","content rotator"],"author":{"name":"Max Marinich"},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"license":"MIT","bugs":{"url":"https://github.com/maxmarinich/react-alice-carousel/issues"},"homepage":"https://github.com/maxmarinich/react-alice-carousel#readme","peerDependencies":{"react":">=15.4"},"dependencies":{"file-loader":"^6.2.0","vanilla-swipe":"^2.2.0"},"devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.5.5","@babel/plugin-proposal-class-properties":"^7.5.5","@babel/plugin-proposal-object-rest-spread":"^7.5.5","@babel/plugin-transform-object-assign":"^7.10.3","@babel/preset-env":"^7.5.5","@babel/preset-react":"^7.10.1","@babel/preset-typescript":"^7.3.3","@babel/runtime":"^7.10.3","@types/jest":"^24.0.18","@types/react":"^16.9.38","@types/react-dom":"^16.9.8","@types/webpack-env":"^1.15.1","@typescript-eslint/eslint-plugin":"^3.4.0","@typescript-eslint/parser":"^3.4.0","awesome-typescript-loader":"^5.2.1","babel-loader":"^8.1.0","copy-webpack-plugin":"^6.1.1","core-js":"^3.6.5","css-loader":"^3.5.0","dart-sass":"^1.25.0","eslint":"^7.3.1","eslint-loader":"^4.0.2","eslint-plugin-react":"^7.20.0","extract-text-webpack-plugin":"^3.0.2","gulp":"^4.0.2","gulp-autoprefixer":"^7.0.1","gulp-babel":"^8.0.0","gulp-sass":"^4.1.0","gulp-strip-comments":"^2.5.2","gulp-typescript":"^6.0.0-alpha.1","gulp-uglify":"^3.0.2","highlight.js":"^10.2.0","html-loader":"^1.1.0","html-webpack-plugin":"^4.0.4","husky":"^4.3.0","jest":"^26.4.2","markdown-loader":"^5.1.0","marked":"^2.0.0","mini-css-extract-plugin":"^1.3.4","react":"^16.13.1","react-dom":"^16.13.1","rimraf":"^3.0.0","sass-loader":"^10.1.1","style-loader":"^1.1.3","ts-jest":"^26.1.1","typescript":"^3.8.3","webpack":"^4.42.1","webpack-cli":"^3.3.11","webpack-dev-server":"^3.10.3","webpack-merge":"^5.1.4"},"publishConfig":{"access":"public"},"husky":{"hooks":{"pre-commit":"npm run precommit","pre-push":"npm run precommit"}},"gitHead":"58bf0f3c3e72a76e8f77d207eb898e7f12715f19","_id":"@adactiveasia/react-alice-carousel@0.0.1","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-y2FYTo2XECKG4/tPWad2Y/jr731VRH3euMishYWzxQ+783PwLOlh19+9KYzuONcpDSttTBtwM971WcNsRPy66A==","shasum":"3dd4a07965392f0fabafacff097a8e771f1939fd","tarball":"https://registry.npmjs.org/@adactiveasia/react-alice-carousel/-/react-alice-carousel-0.0.1.tgz","fileCount":45,"unpackedSize":94622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucGACRA9TVsSAnZWagAALjIP/3xgGjB5MEp9pCiB8o0y\nNdRhN7wSA4k+6LbTRUtB6XnS0GoY02QKeInwMq2NWsdapTwABJJRpO3W56Ap\nmQ4Y/QJvM46CpA/kb8OgaicgqYCBDul2Ci1KQabDVt+VtIcjpRESTuDF+tcT\njs/0NwitXk0bvv1h00hiW1GiLbIw7C1UbhjNXeXwwSBp98MESATgpPWRyrwF\nzIXFUd7/D2NTfuXYSPPIJJlH9VO87WpMjwFKJ+PXN/KmSekU/v0YIG7eSRDC\nW18C1l0TYscOokDbJGK84cEY1Vn3PRicaD4MDlhkUi5TL/ufTFUUz8TCF087\nrzTrFNIfR9xL0W5e7cJ18wXOtv7RF/X842gJsicpiBwoOfxHGvzrofNRTwOo\nifx3ACNIWBPxE1ZpWYKB31T53FCIHh/gLXRfTol6yN+zLbY74PRlLbdUtK0K\nxsB9hAo1WTaxhZgQXvOPwOz2ruTCthaXtv/z8WKk6lNFasmCm9rTmz+GAwx4\nG30HTG2PxItEK7xBwV7TJfFRsZvBb8g6RblVAkyTnykZUzD7BwmC24uGgcx7\nr0iveII7Pk7TJx4I7XIYbzXS93jciHra07OnXPqXHOSSp8zU5WHaUsztKWhm\nV//kOQbgmiTQYh2p6xw/SW9JZ3scbetiJMm2OAzXihcOM1+EpeEW70nWsHk/\na2UX\r\n=GcLq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzYcFZo7Fawm+Z0iTrbwHHsBQRmV32ESSeQLazfXGSygIgKbEPbxEpO0YtHyjKyNHEQig3hUTA2+DhDpikp8U7kgI="}]},"_npmUser":{"name":"devadactiveasia","email":"dev@adactive.asia"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-alice-carousel_0.0.1_1639563648705_0.7548576594400842"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-15T10:20:48.634Z","0.0.1":"2021-12-15T10:20:48.886Z","modified":"2022-04-04T11:22:42.265Z"},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"description":"React image gallery, react slideshow carousel, react content rotator","homepage":"https://github.com/maxmarinich/react-alice-carousel#readme","keywords":["react","carousel","gallery","slider","slideshow","rotator","react-slideshow","react-gallery","react carousel","react slideshow","react gallery","image gallery","image slider","image carousel","image rotator","content gallery","content rotator"],"repository":{"type":"git","url":"git+https://github.com/adactiveasia/react-carousel.git"},"author":{"name":"Max Marinich"},"bugs":{"url":"https://github.com/maxmarinich/react-alice-carousel/issues"},"license":"MIT","readme":"# React Alice Carousel\n\n[![npm version](https://badge.fury.io/js/react-alice-carousel.svg)](https://badge.fury.io/js/react-alice-carousel)\n[![Build Status](https://travis-ci.com/maxmarinich/react-alice-carousel.svg?branch=master)](https://travis-ci.com/maxmarinich/react-alice-carousel)\n\nReact Alice Carousel is a React component for building content galleries, content rotators and any React carousels.\n\n#### 👉 &nbsp;Live demo (API): [v2.x.x](https://maxmarinich.github.io/react-alice-carousel/)\n\n#### 👉 &nbsp;Previous version (API): [v1.x.x](https://github.com/maxmarinich/react-alice-carousel/tree/v1)\n\n![demo gif](https://github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/react-alice-carousel.gif)\n\n![demo gif](https://github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/react-alice-carousel-demo.gif)\n\n## Features\n\n- Auto Height\n- Auto Play\n- Auto Width\n- Custom animation modes\n- Custom rendered slides\n- Infinite loop\n- Lazy loading\n- Mobile friendly\n- Multiple items in the slide\n- Responsive design\n- Stage padding\n- Show / hide anything (indicators, arrows, slides indexes)\n- Swipe to slide\n- Server side rendering friendly\n- Touch and Drag support\n- TypeScript\n\n## Installation\n```apacheconfig\nnpm i react-alice-carousel\n```\n#### Style import\n```\n# CSS\n@import \"react-alice-carousel/lib/alice-carousel.css\";\n```\n```\n# SCSS\n@import \"react-alice-carousel/lib/scss/alice-carousel.scss\";\n```\n## Usage\n```javascript\nimport React from 'react';\nimport AliceCarousel from 'react-alice-carousel';\nimport 'react-alice-carousel/lib/alice-carousel.css';\n\nconst handleDragStart = (e) => e.preventDefault();\n\nconst items = [\n  <img src=\"path-to-img\" onDragStart={handleDragStart} role=\"presentation\" />,\n  <img src=\"path-to-img\" onDragStart={handleDragStart} role=\"presentation\" />,\n  <img src=\"path-to-img\" onDragStart={handleDragStart} role=\"presentation\" />,\n];\n\nconst Gallery = () => {\n  return (\n    <AliceCarousel mouseTracking items={items} />\n  );\n}\n```\n\n#### Options\n- `activeIndex` : Number, default `0` - Set carousel at the specified position.\n- `animationDuration`: Number, default `400` - Set duration of animation.\n- `animationEasingFunction`: String or [Function](https://developer.mozilla.org/ru/docs/Web/CSS/animation-timing-function), default `ease` - Property sets how an animation progresses through the duration of each cycle.\n- `animationType`: String(`slide`, `fadeout`), default `slide` - Set type of animation.\n- `autoHeight`: Boolean, default `false` - Set auto height mode.\n- `autoWidth`: Boolean, default `false` - Set auto width mode.\n- `autoPlay`: Boolean, default `false` - Set autoplay mode.\n- `autoPlayControls`: Boolean, default `false` - Show/hide `play/pause` buttons.\n- `autoPlayDirection`: String(`ltr`, `rtl`), default `ltr` - Set autoplay direction value.\n- `autoPlayInterval`: Number, default `400` - Set autoplay interval value.\n- `autoPlayStrategy`: String(`default`, `action`, `all`, `none`) - Set a strategy for autoplay mode\n    * `default` - pause automatic playback on the hover\n    * `action` - stop automatic playback if user action was detected\n    * `all` - merge `default` && `action` strategies\n    * `none` - ignore any user actions when the `autoPlay` property was specified\n- `controlsStrategy`: String (`default`, `responsive`, `alternate` or combined string `\"default,alternate\"`) - Set a strategy for gallery controls.\n    * `default` - use controls as is\n    * `alternate` - show each dot for each slide\n    * `responsive` - navigation will be hidden if the number of gallery elements is equal to the number of items in the slide.\n- `disableButtonsControls`: Boolean, default `false` - Disable buttons controls.\n- `disableDotsControls`: Boolean, default `false` - Disable dots controls.\n- `disableSlideInfo`: Boolean, default `true` - Disable information about current slide.\n- `infinite`: Boolean, default `false` - Set infinite mode.\n- `innerWidth`: Number, default `0` - Set a static value for a breakpoint(`key`) of the \"responsive\" property. For example, if you can't use 'window.innerWidth' during SSR.\n- `items`: Array, default `undefined`  - Set gallery items, preferable to use this property instead of children.\n- `keyboardNavigation`: Boolean, default `false`  - Enable keyboard navigation\n    * `ArrowLeft` - go to the prev slide\n    * `ArrowRight` - go to the next slide\n    * `Space` - run/stop autoplay mode if `autoPlay` property is equal `true`\n- `mouseTracking`: Boolean, default `false`  - Enable mouse drag animation.\n- `paddingLeft`: Number, default `0`  - Set the gallery offset from the left.\n- `paddingRight`: Number, default `0`  - Set the gallery offset from the right.\n- `renderKey`: Number, default `undefined`  - Auxiliary property, allows call the render method without changing the state inside the gallery instance.\n- `responsive`: Object, default `undefined` - Set number of items in the slide. The key is the breakpoint (default is the result of: () => window.innerWidth or `innerWidth` property if the last presented).\n    ```js\n        {\n          0: {\n              items: 1,\n          },\n          1024: {\n              items: 3\n          }\n        }\n    ```\n\n- `swipeDelta`: Number, default `20`  - Set minimum distance to the start of the swiping (px).\n- `swipeExtraPadding`: Number, default `200`  - Set maximum distance from initial place before swipe action will be stopped (px).\n- `ssrSilentMode`: Boolean, default `true`  - Disable classnames modifiers for server side rendering.\n- `touchTracking`: Boolean, default `true`  - Enable touch move animation.\n- `touchMoveDefaultEvents`: Boolean, default `true`  - Enable touch move default events on swiping. If `false` was specified, this prevents vertical scrolling of the parent elements during the swipe. \n- `onInitialized(e: EventObject)`: Function - Fired as callback after the gallery was created.\n- `onResizeEvent(e: Event)`: Function - Fired during the \"resize\" event to determine whether to call the event handler. Default result of `() => true`; \n- `onResized(e: EventObject)`: Function - Fired as callback after the gallery was resized.\n- `onSlideChange(e: EventObject)`: Function - Fired before the event object changes.\n- `onSlideChanged(e: EventObject)`: Function - Fired after the event object was changed.\n- `renderSlideInfo(e: SlideInfo)`: Rendering function - create a custom component.\n- `renderDotsItem(e: DotsItem)`: Rendering function - create a custom component.\n- `renderPrevButton({ isDisabled })`: Rendering function - create a custom component.\n- `renderNextButton({ isDisabled })`: Rendering function - create a custom component.\n- `renderPlayPauseButton({ isPlaying })`: Rendering function - create a custom component.\n\n#### Methods\n- `slidePrev(e: Event) => void` : Go to the prev slide.\n- `slideNext(e: Event) => void` : Go to the next slide.\n- `slideTo(activeIndex?: number) => void` : Go to the specified slide.\n\n#### Types\n```typescript\ntype EventObject = {\n  item: number;\n  slide: number;\n  itemsInSlide: number;\n  isPrevSlideDisabled: boolean;\n  isNextSlideDisabled: boolean;\n  type: EventType;\n};\n\ntype SlideInfo = {\n  item: number;\n  itemsCount: number;\n};\n\ntype DotsItem = {\n  isActive: boolean;\n  activeIndex: number;\n};\n\nenum EventType {\n  ACTION = 'action', // used if a general user action (button click or swipe)\n  INIT = 'init',     // used if the initial event was triggered\n  RESIZE = 'resize', // used if the gallery size was changed\n  UPDATE = 'update', // used if the gallery was updated with props (activeIndex)\n}\n```\n\n#### CSS classes\n```css\n.alice-carousel\n\n.alice-carousel__stage\n.alice-carousel__stage-item\n\n.alice-carousel__prev-btn\n.alice-carousel__prev-btn-item\n\n.alice-carousel__next-btn\n.alice-carousel__next-btn-item\n\n.alice-carousel__play-btn\n.alice-carousel__play-btn-item\n\n.alice-carousel__dots\n.alice-carousel__dots-item\n\n.alice-carousel__slide-info\n.alice-carousel__slide-info-item\n```\n\n#### CSS modifiers\n```css\n.alice-carousel.__ssr\n\n.alice-carousel__stage-item.__active\n.alice-carousel__stage-item.__cloned\n.alice-carousel__stage-item.__target\n\n.alice-carousel__next-btn-item.__inactive\n.alice-carousel__prev-btn-item.__inactive\n\n.alice-carousel__play-btn-item.__pause\n\n.alice-carousel__dots-item.__active\n.alice-carousel__dots-item.__custom\n\n.alice-carousel__slide-info-item.__separator\n```\n\n## Build the project locally\n#### Clone\n```apacheconfig\ngit clone https://github.com/maxmarinich/react-alice-carousel\ncd react-alice-carousel\n```\n#### Run\n```apacheconfig\nnpm i\nnpm start\n```\n#### Test\n```apacheconfig\nnpm test\n```\n## License\nMIT\n","readmeFilename":"README.md"}