{"_id":"@bartholomej/ngx-splide","_rev":"1-70ff9bd5c3a6f87ec783b48e11083dbe","name":"@bartholomej/ngx-splide","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@bartholomej/ngx-splide","version":"0.1.0","description":"Splide.js integration with angular","keywords":["Splide","Splide.js","slider","carousel"],"author":{"name":"wiistriker"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/JustCommunication-ru/ngx-splide.git"},"dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@splidejs/splide":"^4.1.4","@angular/common":"14","@angular/core":"14"},"module":"fesm2015/bartholomej-ngx-splide.mjs","es2020":"fesm2020/bartholomej-ngx-splide.mjs","esm2020":"esm2020/bartholomej-ngx-splide.mjs","fesm2020":"fesm2020/bartholomej-ngx-splide.mjs","fesm2015":"fesm2015/bartholomej-ngx-splide.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/bartholomej-ngx-splide.mjs","es2020":"./fesm2020/bartholomej-ngx-splide.mjs","es2015":"./fesm2015/bartholomej-ngx-splide.mjs","node":"./fesm2015/bartholomej-ngx-splide.mjs","default":"./fesm2020/bartholomej-ngx-splide.mjs"}},"sideEffects":false,"gitHead":"58b87b3797b65fdd799edde4573205e4b54ad770","bugs":{"url":"https://github.com/JustCommunication-ru/ngx-splide/issues"},"homepage":"https://github.com/JustCommunication-ru/ngx-splide#readme","_id":"@bartholomej/ngx-splide@0.1.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Wq7bEwP8QiwGYww0NovnIbPobMZ+7ulgANJRH+aI5HuDKVC9DPLv2wwlYsbcWmGAJ6Gx7CVldG5QBUeh6JWLsQ==","shasum":"012930e5f9901c27c64288f165d3a2ec1a0b7993","tarball":"https://registry.npmjs.org/@bartholomej/ngx-splide/-/ngx-splide-0.1.0.tgz","fileCount":17,"unpackedSize":127923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo6cjzFVsxdNIIn/E2w8OTRaDZy0zHdPl6+j6rYYMNxAIgUj9Y9LMN7y5QIwmm3iFGf7lxR2zmnT2jMOi984++xK8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwVBHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru0A//U1ME6xii4/nK+8GkjBva5zmPuMjnd5cNVwzlIAYx1RYDsKep\r\nMMFqFURbeAp+PLE19x7ogtElKhuWlATjHQZmsnscaOQUs/9ChMpgcBT55F5o\r\nn+8Iri1698Wc30U3A5rLPCOy8Guzq9xpVXA0l8deW7BZAfjYU13m1Jfl7j3h\r\nyJPG3934pzJLT7nJaXnlt2x+p2F8aUqEWOk8GCJXZnh1Nnlgl7kNTAN+qZqd\r\nQjxk2OslLVgMjhEC5nA7gi0ora46q247sxG1NDRK7T4tJmwYXFPtMLiTmzXi\r\nlpta9TADVRWVgA3n9cIK4O8jA/QZTiICZdsH2gpiyR+StCDdb/5HrtEBA4og\r\nJ2ZLHGsxdBeMa4DA7c2Vi6eDBwaBUU7hV0M1By9MfIGqIcWkhe9RF3NtLr4e\r\nrV4yYvOKWuZgdc8o/X+Y6FSnn1RZEKxUqCJzcN9zvHyLC78BIMCYJ0BfEfrr\r\nj2q+AONIhdpGQMq5bIRtST+RTHBKX9vTdqOCeCKghxgWK+iNB9gb22dSgkhx\r\nUF+9xbQtIx9ZhuHl4NoDHhxhC18AssV9J03M6MDPc8Ykse2FmHtDXHbQjYjA\r\nSAMQA/2zIqzFFEAj4lKR1HG5407s2IFY6gzts2YSuGKXyXtNXupGPOVqzF3k\r\nefQhViNDq9e3o13Av+YHsOcfM865F0SreP0=\r\n=nN7L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bartholomej","email":"bart@bartweb.cz"},"directories":{},"maintainers":[{"name":"bartholomej","email":"bart@bartweb.cz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-splide_0.1.0_1673613383449_0.3951379774906616"},"_hasShrinkwrap":false},"0.1.1":{"name":"@bartholomej/ngx-splide","version":"0.1.1","description":"Splide.js integration with angular","keywords":["Splide","Splide.js","slider","carousel"],"author":{"name":"wiistriker"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/JustCommunication-ru/ngx-splide.git"},"dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@splidejs/splide":"^4.1.4","@angular/common":">=14 <16","@angular/core":">=14 <16"},"module":"fesm2015/bartholomej-ngx-splide.mjs","es2020":"fesm2020/bartholomej-ngx-splide.mjs","esm2020":"esm2020/bartholomej-ngx-splide.mjs","fesm2020":"fesm2020/bartholomej-ngx-splide.mjs","fesm2015":"fesm2015/bartholomej-ngx-splide.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/bartholomej-ngx-splide.mjs","es2020":"./fesm2020/bartholomej-ngx-splide.mjs","es2015":"./fesm2015/bartholomej-ngx-splide.mjs","node":"./fesm2015/bartholomej-ngx-splide.mjs","default":"./fesm2020/bartholomej-ngx-splide.mjs"}},"sideEffects":false,"gitHead":"b724d9d657eaab52d3dfac2960d37f26fa9074df","bugs":{"url":"https://github.com/JustCommunication-ru/ngx-splide/issues"},"homepage":"https://github.com/JustCommunication-ru/ngx-splide#readme","_id":"@bartholomej/ngx-splide@0.1.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ofhUNht4kJi8Uden3WZ7G7wgzDY8I+1BaVvRxsMXXZDY5X7NOhi0nLOyb+oBNP0/3kWyDUwltrFp2bailt+sYQ==","shasum":"ac6fa3c518aa4c3413fc1a7aaf34798b267a4834","tarball":"https://registry.npmjs.org/@bartholomej/ngx-splide/-/ngx-splide-0.1.1.tgz","fileCount":17,"unpackedSize":127935,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1Xd1OMvrL2HP12S2bxWC0s2j5hC6RAqKjS+r6QxqyUAiAxob9vTOXHyPlIwB6kT4WQny/qJX/rO2U0S3fUPvckdg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwVKTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/whAAgaImdHL91JjAdsQ/DpWZp3xfGfCM8jf53AxIh41t8YWk8mZc\r\nfbIvbuyRQQ7DioMpkXiFKhTi9FL/LfrQSATo1HhgUxIttXgLQQXX3b/aRshE\r\ncznbyH4Nd49dW562c7tkD7NKATqhsh2ILmEiAieqTCAELYxldKQGOUGfiPT5\r\n8b8wwyIka1Fv6bHy3Z8+6SrSAPwKSLi54wd05dm0fsUuivwHdZ/ESdwbWf3f\r\nmo/PfVYatF7vQU1Jk2ad537bXBG+2xBT7AuXjH6z4/V9pl4nMUWQinJsBrK5\r\nz5g2HGaKg+zuDbpx1Tq/g4i8vNgDaZhDKNBcoMJqBWUVU3toy1aOoX2acojD\r\nbDjErIRXo0I+E2HMCU12cDTx4R+bEqu9JNy/2zlriXz3UrK8PsZH1AFpXNGI\r\nGzQGU1aNjipI8Tm5VZEGKS8byrpbYYRBMKW3lkRP6H6xTuzrE5x5rKMzfj7Y\r\n9htlqgg1d7IyUNTJ6gc/C7LJt9CnnMZy0Bpeab1IiAc6svKCzpb7AZ4nuddb\r\nbyKNYUGGaE/lV3GVFTWJ3B5z2bmVqbl2ITfAlF+puw4donaSw4qupOFLvpT2\r\n1+1sQq0Zzmh8m+/1p6/kGpqim7Osq5bK8BHQfYlKPXO4bpr3TWEh3zhOE34j\r\n0MH9rRu92Fr4qKQUR3ZAHNZUMXz/BMTgu9g=\r\n=iiYh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bartholomej","email":"bart@bartweb.cz"},"directories":{},"maintainers":[{"name":"bartholomej","email":"bart@bartweb.cz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-splide_0.1.1_1673613971636_0.6053794463339319"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-13T12:36:23.331Z","0.1.0":"2023-01-13T12:36:23.618Z","modified":"2023-01-13T12:46:11.895Z","0.1.1":"2023-01-13T12:46:11.815Z"},"maintainers":[{"name":"bartholomej","email":"bart@bartweb.cz"}],"description":"Splide.js integration with angular","homepage":"https://github.com/JustCommunication-ru/ngx-splide#readme","keywords":["Splide","Splide.js","slider","carousel"],"repository":{"type":"git","url":"git+https://github.com/JustCommunication-ru/ngx-splide.git"},"author":{"name":"wiistriker"},"bugs":{"url":"https://github.com/JustCommunication-ru/ngx-splide/issues"},"license":"MIT","readme":"# ngx-splide\n\n![npm](https://img.shields.io/npm/v/ngx-splide)\n![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-splide)\n\n[Splide.js](https://splidejs.com/) integration to angular\n\n## Demo\n\nhttps://justcommunication-ru.github.io/ngx-splide/\n\n## Installation\n\nUsing `npm`\n\n`npm i --save ngx-splide`\n\nOr if you prefer `yarn`\n\n`yarn add ngx-splide`\n\n## Setup\n\nAdd splide.js into your build scripts in `angular.json`:\n\n```json\n\"scripts\": [\n    \"node_modules/@splidejs/splide/dist/js/splide.js\",\n]\n```\n\nAnd styles if you need it:\n\n```json\n\"styles\": [\n    \"node_modules/@splidejs/splide/dist/css/splide.min.css\",\n    \"node_modules/@splidejs/splide/dist/css/themes/splide-default.min.css\"\n]\n```\n\nAdd `NgxSplideModule` into `app.module.ts`\n\n```typescript\nimport { NgxSplideModule } from 'ngx-splide';\n\n@NgModule({\n    //...\n    imports: [\n        //...\n        NgxSplideModule\n    ],\n    //...\n})\nexport class AppModule {}\n```\n\n## Usage\n\nYou can use `<splide />` root component with `<splide-slide />` components inside.\n\n### Basic example\n\n```angular2html\n<splide>\n    <splide-slide>\n        <img src=\"image1.jpg\" alt=\"\" />\n    </splide-slide>\n    <splide-slide>\n        <img src=\"image2.jpg\" alt=\"\" />\n    </splide-slide>\n</splide>\n```\n\n### With options\n\n```angular2html\n<splide [options]=\"{ type: 'loop', perPage: 1, keyboard: false }\">\n    <splide-slide *ngFor=\"let image of images\">\n        <img [src]=\"image.src\" alt=\"\" />\n    </splide-slide>\n</splide>\n```\n\nPlease refer to official documentation for the list of supported options https://splidejs.com/options/\n\n### Get splide instance\n\n```angular2html\n<splide (onInit)=\"onSplideInit($event)\">\n    <splide-slide>\n        <img src=\"image1.jpg\" alt=\"\" />\n    </splide-slide>\n    <splide-slide>\n        <img src=\"image2.jpg\" alt=\"\" />\n    </splide-slide>\n</splide>\n```\n\n```typescript\nonSplideInit(splide)\n{\n    console.log(splide);\n}\n```\n\n### Select slide\n\nYou can programatically change selected splide slide with `selectedSlideIndex` option\n\n```angular2html\n<button type=\"button\" \n    *ngFor=\"let image of images; let index = index\" \n    (click)=\"selectedImageIndex = index\">Select image {{ index + 1 }}</button>\n\n<splide [options]=\"{ type: 'loop', perPage: 1, keyboard: false }\">\n    <splide-slide *ngFor=\"image in images\" [selectedSlideIndex]=\"selectedImageIndex\">\n        <img [src]=\"image.src\" alt=\"\" />\n    </splide-slide>\n</splide>\n```\n\n### Events\n\nEvents can be handled in two ways:\n\n#### a) Separated events\n\n```angular2html\n<splide \n    (onInit)=\"onSplideInit($event)\"\n    (onMounted)=\"onSplideMounted($event)\"\n    (onUpdated)=\"onSplideUpdated($event)\"\n    (onMove)=\"onSplideMove($event)\"\n    (onMoved)=\"onSplideMoved($event)\"\n    (onDrag)=\"onSplideDrag($event)\"\n    (onDragged)=\"onSplideDragged($event)\"\n    (onVisible)=\"onSplideVisible($event)\"\n    (onHidden)=\"onSplideHidden($event)\"\n    (onActive)=\"onSplideActive($event)\"\n    (onInactive)=\"onSplideInactive($event)\"\n    (onClick)=\"onSplideClick($event)\"\n    (onArrowsMounted)=\"onSplideArrowsMounted($event)\"\n    (onArrowsUpdated)=\"onSplideArrowsUpdated($event)\"\n    (onPaginationMounted)=\"onSplidePaginationMounted($event)\"\n    (onPaginationUpdated)=\"onSplidePaginationUpdated($event)\"\n    (onNavigationMounted)=\"onSplideNavigationMounted($event)\"\n    (onAutoplayPlay)=\"onSplideAutoplayPlay($event)\"\n    (onAutoplayPause)=\"onSplideAutoplayPause($event)\"\n    (onAutoplayPlaying)=\"onSplideAutoplayPlaying($event)\"\n    (onLazyloadLoaded)=\"onSplideLazyloadLoaded($event)\"\n>\n```\n\n```typescript\nonSplideMoved(args)\n{\n    const newIndex = args[0];\n    const oldIndex = args[1];\n    const destIndex = args[2];\n}\n```\n\n#### b) Global event\n\n```angular2html\n<splide (onSplideEvent)=\"onSplideEvent($event)\">\n```\n\nEvent object:\n\n```json\n{\n    \"name\": <event-name>,\n    \"args\": <event-arguments>\n}\n```\n\n```event-name``` – name of the splide event listed in https://splidejs.com/events/\n\n```event-arguments``` – array of arguments.\n\nFor example `moved` event will be:\n\n```json\n{\n    \"name\": \"moved\",\n    \"args\": [ 1, 0, 1 ] // newIndex, oldIndex, destIndex\n}\n```\n\n```typescript\nonSplideEvent(event)\n{\n    console.log('Splide event', event.name, 'with arguments', event.args);\n\n    switch (event.name) {\n        case 'moved':\n            const newIndex = event.args[0];\n            const oldIndex = event.args[1];\n            const destIndex = event.args[2];\n            break;\n    }\n}\n```\n\n### Sync\n\nYou can sync splide instances like it described in https://splidejs.com/guides/apis/#sync\n\nJust create `@ViewChild` in your controller:\n\n```typescript\n@ViewChild('mainSplide') mainSplide: NgxSplideComponent;\n@ViewChild('secondarySplide') secondarySplide: NgxSplideComponent;\n```\n\nAnd pass instances with `[syncWith]`:\n\n```angular2html\n<splide #mainSplide [syncWith]=\"secondarySplide\">...</splide>\n<splide #secondarySplide [syncWith]=\"mainSplide\">...</splide>\n```\n\n### Other\n\nYou can also pass `containerClass` to append custom class for root `div.splide` node\n\n```angular2html\n<splide containerClass=\"customSplideClass\">\n```\n\nWill produce:\n\n```html\n<div class=\"splide customSplideClass\">\n    ...\n</div>\n```\n","readmeFilename":"README.md"}