{"id":13808229,"url":"https://github.com/JustCommunication-ru/ngx-splide","last_synced_at":"2025-05-14T02:31:39.484Z","repository":{"id":37091211,"uuid":"313267534","full_name":"JustCommunication-ru/ngx-splide","owner":"JustCommunication-ru","description":"Splide.js integration to angular","archived":false,"fork":false,"pushed_at":"2024-10-18T13:51:26.000Z","size":2693,"stargazers_count":16,"open_issues_count":0,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-02T04:41:51.173Z","etag":null,"topics":["angular","splide"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JustCommunication-ru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-16T10:35:34.000Z","updated_at":"2024-10-18T17:58:45.000Z","dependencies_parsed_at":"2024-03-26T14:29:40.428Z","dependency_job_id":"f124256b-e549-4a26-be61-b488c210196a","html_url":"https://github.com/JustCommunication-ru/ngx-splide","commit_stats":{"total_commits":34,"total_committers":3,"mean_commits":"11.333333333333334","dds":0.05882352941176472,"last_synced_commit":"257781b1387c903615e8eb36aa1539de5c5eeb63"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JustCommunication-ru%2Fngx-splide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JustCommunication-ru%2Fngx-splide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JustCommunication-ru%2Fngx-splide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JustCommunication-ru%2Fngx-splide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JustCommunication-ru","download_url":"https://codeload.github.com/JustCommunication-ru/ngx-splide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273229,"owners_count":17448072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","splide"],"created_at":"2024-08-04T01:01:37.914Z","updated_at":"2024-11-19T00:30:39.365Z","avatar_url":"https://github.com/JustCommunication-ru.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Carousels"],"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\n| Angular version | Library version | Splide version |\n|-----------------|-----------------|--------------|\n| \u0026lt;=11         | ~1.0.0          | ^2.4.14      |\n| \u0026gt;=12         | ~2.0.0          | ^4           |\n| \u0026gt;=13         | ~3.0.0          | ^4           |\n| \u0026gt;=14         | ~4.0.0          | ^4           |\n| \u0026gt;=15         | ~5.0.0          | ^4           |\n| \u0026gt;=16         | ~6.0.0          | ^4           |\n| \u0026gt;=17         | ~7.0.0          | ^4           |\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 `\u003csplide /\u003e` root component with `\u003csplide-slide /\u003e` components inside.\n\n### Basic example\n\n```angular2html\n\u003csplide\u003e\n    \u003csplide-slide\u003e\n        \u003cimg src=\"image1.jpg\" alt=\"\" /\u003e\n    \u003c/splide-slide\u003e\n    \u003csplide-slide\u003e\n        \u003cimg src=\"image2.jpg\" alt=\"\" /\u003e\n    \u003c/splide-slide\u003e\n\u003c/splide\u003e\n```\n\n### With options\n\n```angular2html\n\u003csplide [options]=\"{ type: 'loop', perPage: 1, keyboard: false }\"\u003e\n    \u003csplide-slide *ngFor=\"let image of images\"\u003e\n        \u003cimg [src]=\"image.src\" alt=\"\" /\u003e\n    \u003c/splide-slide\u003e\n\u003c/splide\u003e\n```\n\nPlease refer to official documentation for the list of supported options https://splidejs.com/guides/options/\n\n### Get splide instance\n\n```angular2html\n\u003csplide (onInit)=\"onSplideInit($event)\"\u003e\n    \u003csplide-slide\u003e\n        \u003cimg src=\"image1.jpg\" alt=\"\" /\u003e\n    \u003c/splide-slide\u003e\n    \u003csplide-slide\u003e\n        \u003cimg src=\"image2.jpg\" alt=\"\" /\u003e\n    \u003c/splide-slide\u003e\n\u003c/splide\u003e\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\u003cbutton type=\"button\" \n    *ngFor=\"let image of images; let index = index\" \n    (click)=\"selectedImageIndex = index\"\u003eSelect image {{ index + 1 }}\u003c/button\u003e\n\n\u003csplide [options]=\"{ type: 'loop', perPage: 1, keyboard: false }\"\u003e\n    \u003csplide-slide *ngFor=\"image in images\" [selectedSlideIndex]=\"selectedImageIndex\"\u003e\n        \u003cimg [src]=\"image.src\" alt=\"\" /\u003e\n    \u003c/splide-slide\u003e\n\u003c/splide\u003e\n```\n\n### Events\n\nEvents can be handled in two ways:\n\n#### a) Separated events\n\n```angular2html\n\u003csplide \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\u003e\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\u003csplide (onSplideEvent)=\"onSplideEvent($event)\"\u003e\n```\n\nEvent object:\n\n```json\n{\n    \"name\": \u003cevent-name\u003e,\n    \"args\": \u003cevent-arguments\u003e\n}\n```\n\n```event-name``` – name of the splide event listed in https://splidejs.com/guides/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```\n\nAnd pass instances with `[syncWith]`:\n\n```angular2html\n\u003csplide #mainSplide\u003e...\u003c/splide\u003e\n\u003csplide [syncWith]=\"mainSplide\"\u003e...\u003c/splide\u003e\n```\n\nPlease note that `mainSplide` should be rendered before second splide.\n\nIf you need more fine-grained control over sync you should use `onInit` methods and work with splide instances\n\n### Other\n\nYou can also pass `containerClass` to append custom class for root `div.splide` node\n\n```angular2html\n\u003csplide containerClass=\"customSplideClass\"\u003e\n```\n\nWill produce:\n\n```html\n\u003cdiv class=\"splide customSplideClass\"\u003e\n    ...\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJustCommunication-ru%2Fngx-splide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJustCommunication-ru%2Fngx-splide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJustCommunication-ru%2Fngx-splide/lists"}