{"id":13527363,"url":"https://github.com/devmark/angular-slick-carousel","last_synced_at":"2025-05-16T17:04:43.223Z","repository":{"id":15642000,"uuid":"18379079","full_name":"devmark/angular-slick-carousel","owner":"devmark","description":"Angular directive for slick-carousel","archived":false,"fork":false,"pushed_at":"2020-07-15T20:16:52.000Z","size":701,"stargazers_count":354,"open_issues_count":51,"forks_count":124,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-12T16:14:18.873Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://devmark.github.io/angular-slick-carousel/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devmark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-02T19:45:15.000Z","updated_at":"2025-01-16T01:09:27.000Z","dependencies_parsed_at":"2022-08-30T20:00:50.249Z","dependency_job_id":null,"html_url":"https://github.com/devmark/angular-slick-carousel","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmark%2Fangular-slick-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmark%2Fangular-slick-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmark%2Fangular-slick-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmark%2Fangular-slick-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devmark","download_url":"https://codeload.github.com/devmark/angular-slick-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493304,"owners_count":22080128,"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":[],"created_at":"2024-08-01T06:01:46.450Z","updated_at":"2025-05-16T17:04:43.196Z","avatar_url":"https://github.com/devmark.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"angular-slick-carousel\n======================\n\nangular 2 above take a look https://github.com/devmark/ngx-slick\n\n\n[![Join the chat at https://gitter.im/devmark/angular-slick-carousel](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/devmark/angular-slick-carousel?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nAngular directive for [slick-carousel](http://kenwheeler.github.io/slick/)\n\n\n## Summary\n\n- [Usage](#usage)\n- [Attributes \u0026 Event](#attributes--event)\n- [Enable/disable slick](#enabledisable-slick)\n- [Method](#method)\n- [Slide data](#slide-data)\n- [Global Config](#global-config)\n- [faq](#faq)\n- [Examples](#examples)\n- [Creator](#creator)\n\n\n\n## Usage\n-----\n\n- Using [bower](http://bower.io/) to install it. `bower install angular-slick-carousel`\n- Add `jquery`, `angular`, `slick-carousel` and `angular-slick-carousel` to your code.\n\n```html\n    \u003clink rel=\"stylesheet\" href=\"../bower_components/slick-carousel/slick/slick.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"../bower_components/slick-carousel/slick/slick-theme.css\"\u003e\n\n    \u003cscript src=\"../bower_components/jquery/jquery.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"../bower_components/angular/angular.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"../bower_components/slick-carousel/slick/slick.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"../bower_components/angular-slick-carousel/dist/angular-slick.min.js\"\u003e\u003c/script\u003e\n```\n\n- Add the sortable module as a dependency to your application module: `slickCarousel`\n\n```js\nvar myAppModule = angular.module('MyApp', ['slickCarousel'])\n```\n\nThis directive allows you to use the slick-carousel plugin as\nan angular directive. It can be specified in your HTML\nas either a `\u003cdiv\u003e` attribute or a `\u003cslick\u003e` element.\n\n```html\n    \u003cslick infinite=true slides-to-show=3 slides-to-scroll=3\u003e\n    ...\n    \u003c/slick\u003e\n\n    \u003cslick\n        settings=\"slickConfig\" ng-if=\"numberLoaded\"\u003e\n    \u003c/slick\u003e\n```\n\n## Attributes \u0026 Event\n`settings`: optional `Object` containing any of the slick options. Consult [here](http://kenwheeler.github.io/slick/#settings).\n - `enabled` should slick be enabled or not. Default to true. Example below\n - `method` optional containing slick method. discussed [below](#method) in detail\n - `event` optional containing slick event\n\n```javascript\n$scope.slickConfig = {\n    enabled: true,\n    autoplay: true,\n    draggable: false,\n    autoplaySpeed: 3000,\n    method: {},\n    event: {\n        beforeChange: function (event, slick, currentSlide, nextSlide) {\n        },\n        afterChange: function (event, slick, currentSlide, nextSlide) {\n        }\n    }\n};\n```\n## Enable/disable slick\nSlick can be easily switched on and off by using `enabled` settings flag.\n```js\n    $scope.slickConfig = {\n        enabled: true,\n    }\n    $scope.toggleSlick = function() {\n      $scope.slickConfig.enabled = !$scope.slickConfig.enabled;\n    }\n```\n```html\n    \u003cslick settings=\"slickConfig\"\u003e\n     ...\n    \u003c/slick\u003e\n    \u003cbutton ng-click=\"toggleSlick()\"\u003eToggle\u003c/button\u003e\n```\n\n\n## Method\n1. All the functions in the plugin are exposed through a control\nattribute.\n2. To utilize this architecture, and have two-way data-binding,\ndefine an empty control handle on scope:\n```js\n    $scope.slickConfig = {\n        method: {}\n    }\n```\n3. Pass it as the value to control attribute. Now, you can call any plugin methods\nas shown in the example.\n\n```html\n\u003cbutton ng-click=\"slickConfig.method.slickGoTo(2)\"\u003eslickGoTo(2)\u003c/button\u003e\n\u003cbutton ng-click=\"slickConfig.method.slickPrev()\"\u003eslickPrev()\u003c/button\u003e\n\u003cbutton ng-click=\"slickConfig.method.slickNext()\"\u003eslickNext()\u003c/button\u003e\n\u003cbutton ng-click='slickConfig.method.slickAdd(\"\u003cdiv\u003eNew\u003c/div\u003e\")'\u003eslickAdd()\u003c/button\u003e\n\u003cbutton ng-click='slickConfig.method.slickRemove(3)'\u003eslickRemove(3)\u003c/button\u003e\n\u003cbutton ng-click='slickConfig.method.slickPlay()'\u003eslickPlay()\u003c/button\u003e\n\u003cbutton ng-click='slickConfig.method.slickPause()'\u003eslickPause()\u003c/button\u003e\n```\n\n## Slide data\nFor change slide content, you have to set `ng-if` to destroy and init it\n\n- controller:\n```js\n    $scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}];\n    $scope.numberLoaded = true;\n    $scope.numberUpdate = function(){\n        $scope.numberLoaded = false; // disable slick\n\n        //number update\n\n        $scope.numberLoaded = true; // enable slick\n    };\n```\n- html:\n```html\n    \u003cscript type=\"text/ng-template\" id=\"tpl.html\"\u003e\n        \u003ch3\u003e{{ i.label }}\u003c/h3\u003e\n    \u003c/script\u003e\n\n    \u003cslick ng-if=\"numberLoaded\"\u003e\n        \u003cdiv ng-repeat=\"i in number\"\u003e\n            \u003cdiv class=\"\" ng-include=\"'tpl.html'\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/slick\u003e\n```\n\n## Global config\n  ```js\n    config(['slickCarouselConfig', function (slickCarouselConfig) {\n        slickCarouselConfig.dots = true;\n        slickCarouselConfig.autoplay = false;\n    }])\n  ```\n\n## FAQ\nQ: After change data, could i keep the current slide index?\nA: For this directive, this will destroy and init slick when updating data. You could get current index by event.\nexample:\n```js\n    $scope.currentIndex = 0;\n    $scope.slickConfig = {\n        event: {\n            afterChange: function (event, slick, currentSlide, nextSlide) {\n              $scope.currentIndex = currentSlide; // save current index each time\n            }\n            init: function (event, slick) {\n              slick.slickGoTo($scope.currentIndex); // slide to correct index when init\n            }\n        }\n    };\n```\n\n## Examples\n\nNow to run the samples in your local machine you just need to run:\n\n```sh\ngrunt serve\n```\n\nso you will start a web server on http://localhost:8000\n\nnow acess the folder examples: http://localhost:8000/examples/#/\n\n\n## Creator\n[@devmark](https://github.com/devmark)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmark%2Fangular-slick-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevmark%2Fangular-slick-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmark%2Fangular-slick-carousel/lists"}