{"id":13808226,"url":"https://github.com/leo6104/ngx-slick-carousel","last_synced_at":"2025-05-14T02:31:39.011Z","repository":{"id":41287883,"uuid":"131519365","full_name":"leo6104/ngx-slick-carousel","owner":"leo6104","description":"Angular 17+ wrapper for slick plugin ","archived":false,"fork":false,"pushed_at":"2024-09-26T07:34:48.000Z","size":2969,"stargazers_count":109,"open_issues_count":53,"forks_count":43,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-04T01:34:57.935Z","etag":null,"topics":["angular","carousel","jquery","slick","slick-carousel","ui"],"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/leo6104.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":"2018-04-29T18:31:56.000Z","updated_at":"2024-10-02T13:36:27.000Z","dependencies_parsed_at":"2024-06-18T13:44:35.777Z","dependency_job_id":"dce1b9d6-ce1b-440d-8813-79dcf45167a8","html_url":"https://github.com/leo6104/ngx-slick-carousel","commit_stats":{"total_commits":61,"total_committers":6,"mean_commits":"10.166666666666666","dds":"0.14754098360655743","last_synced_commit":"70a970242a85fdeca7c56da9850a067766ebd534"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leo6104%2Fngx-slick-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leo6104%2Fngx-slick-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leo6104%2Fngx-slick-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leo6104%2Fngx-slick-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leo6104","download_url":"https://codeload.github.com/leo6104/ngx-slick-carousel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273228,"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","carousel","jquery","slick","slick-carousel","ui"],"created_at":"2024-08-04T01:01:37.837Z","updated_at":"2024-11-19T00:30:39.800Z","avatar_url":"https://github.com/leo6104.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Carousels"],"readme":"# ngx-slick-carousel\n\n[![npm version](https://badge.fury.io/js/ngx-slick-carousel.svg)](https://badge.fury.io/js/ngx-slick-carousel)\n[![Build Status](https://travis-ci.com/leo6104/ngx-slick-carousel.svg?branch=master)](https://travis-ci.com/leo6104/ngx-slick-carousel)\n\n1. Support Angular 17 (not compatible with \u003c= 16, if you want, use 15.0.0 release)\n2. Support Server side rendering\n3. Support Re-initialize case\n4. Fastest slick init/unslick implementation in Angular\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install jquery @types/jquery --save\n$ npm install slick-carousel @types/slick-carousel --save\n$ npm install ngx-slick-carousel --save\n```\n\n## Consuming your library\n\nOnce you have published your library to npm, you can import your library in any Angular application by running:\n\n```bash\n$ npm install ngx-slick-carousel --save\n```\n\nand then from your Angular standalone component:\n\n```typescript\nimport { Component } from '@angular/core';\n\n// Import your library\nimport { SlickCarouselModule } from 'ngx-slick-carousel';\n\n@Component({\n  ...,\n  standalone: true,\n  imports: [\n    SlickCarouselModule, // Put in here\n  ],\n})\nexport class ExampleComponent {\n  ...\n}\n```\n\n- Include slick css in \"styles\" at your `angular.json` file  :\n```\n  \"styles\": [\n    ...\n    \"node_modules/slick-carousel/slick/slick.scss\",\n    \"node_modules/slick-carousel/slick/slick-theme.scss\",\n    ...\n  ]\n```\n\n- Include jquery and slick js in \"scripts\" at your `angular.json` file  :\n```\n  \"scripts\": [\n    ...\n    \"node_modules/jquery/dist/jquery.min.js\",\n    \"node_modules/slick-carousel/slick/slick.min.js\",\n    ...\n  ]\n```\n\nOnce your library is imported, you can use its components, directives and pipes in your Angular application:\n```html\n  \u003c!-- You can now use your library component in app.component.html --\u003e\n    \u003cngx-slick-carousel class=\"carousel\" \n                        #slickModal=\"slick-carousel\" \n                        [config]=\"slideConfig\" \n                        (init)=\"slickInit($event)\"\n                        (breakpoint)=\"breakpoint($event)\"\n                        (afterChange)=\"afterChange($event)\"\n                        (beforeChange)=\"beforeChange($event)\"\u003e\n        @for (slide of slides; track slide.img) {\n            \u003cdiv ngxSlickItem class=\"slide\"\u003e\n                  \u003cimg src=\"{{ slide.img }}\" alt=\"\" width=\"100%\"\u003e\n            \u003c/div\u003e\n        }\n    \u003c/ngx-slick-carousel\u003e\n    \n    \u003cbutton (click)=\"addSlide()\"\u003eAdd\u003c/button\u003e\n    \u003cbutton (click)=\"removeSlide()\"\u003eRemove\u003c/button\u003e\n    \u003cbutton (click)=\"slickModal.slickGoTo(2)\"\u003eslickGoto 2\u003c/button\u003e\n    \u003cbutton (click)=\"slickModal.unslick()\"\u003eunslick\u003c/button\u003e\n```\n\n```typescript\n@Component({\n  ...,\n  standalone: true,\n  imports: [\n    SlickCarouselModule, \n  ],\n})\nclass ExampleComponent {\n  slides = [\n    {img: \"http://placehold.it/350x150/000000\"},\n    {img: \"http://placehold.it/350x150/111111\"},\n    {img: \"http://placehold.it/350x150/333333\"},\n    {img: \"http://placehold.it/350x150/666666\"}\n  ];\n  slideConfig = {\"slidesToShow\": 4, \"slidesToScroll\": 4};\n  \n  addSlide() {\n    this.slides.push({img: \"http://placehold.it/350x150/777777\"})\n  }\n  \n  removeSlide() {\n    this.slides.length = this.slides.length - 1;\n  }\n  \n  slickInit(e) {\n    console.log('slick initialized');\n  }\n  \n  breakpoint(e) {\n    console.log('breakpoint');\n  }\n  \n  afterChange(e) {\n    console.log('afterChange');\n  }\n  \n  beforeChange(e) {\n    console.log('beforeChange');\n  }\n}\n```\n\n**(IMPORTANT)** If `slides` variable will be changed dynamically, use `trackBy` in `*ngFor` syntax. It will minimize `ngxSlickItem` directive recreation.\n\n## Development\n\nTo generate all `*.js`, `*.d.ts` and `*.metadata.json` files:\n\n```bash\n$ npm run build\n```\n\nTo lint all `*.ts` files:\n\n```bash\n$ npm run lint\n```\n\n## License\n\nMIT © [leo6104](mailto:heo@mpaghq.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleo6104%2Fngx-slick-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleo6104%2Fngx-slick-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleo6104%2Fngx-slick-carousel/lists"}