├── .bowerrc ├── .gitignore ├── examples ├── fonts │ ├── pacifico.eot │ ├── pacifico.ttf │ └── pacifico.woff ├── css │ ├── app.dist.css │ ├── app.dev.css.map │ ├── app.css │ └── app.dev.css ├── index.html ├── views │ └── home.html └── js │ └── app.js ├── test ├── .jshintrc └── main.spec.js ├── .editorconfig ├── .jshintrc ├── scss ├── main.scss ├── _functions.scss ├── _config.scss └── _app.scss ├── bower.json ├── protractor.conf.js ├── LICENSE ├── .yo-rc.json ├── karma.conf.js ├── package.json ├── Gruntfile.js ├── gulpfile.js ├── dist ├── angular-slick.min.js └── angular-slick.js ├── README.md └── src └── slick.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | bower_components/ 3 | .sass-cache/ 4 | .idea/ 5 | .tmp/ -------------------------------------------------------------------------------- /examples/fonts/pacifico.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmark/angular-slick-carousel/HEAD/examples/fonts/pacifico.eot -------------------------------------------------------------------------------- /examples/fonts/pacifico.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmark/angular-slick-carousel/HEAD/examples/fonts/pacifico.ttf -------------------------------------------------------------------------------- /examples/fonts/pacifico.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devmark/angular-slick-carousel/HEAD/examples/fonts/pacifico.woff -------------------------------------------------------------------------------- /test/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.jshintrc", 3 | "globals": { 4 | "browser": false, 5 | "element": false, 6 | "by": false, 7 | "$": false, 8 | "$$": false 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "strict": true, 3 | "bitwise": true, 4 | "curly": true, 5 | "eqeqeq": true, 6 | "latedef": false, 7 | "noarg": true, 8 | "undef": true, 9 | "unused": false, 10 | "validthis": true, 11 | "jasmine": true, 12 | "globals": { 13 | "angular": false, 14 | "inject": false, 15 | "module": false 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /scss/main.scss: -------------------------------------------------------------------------------- 1 | // ********************************************************************* 2 | // =Main Import 3 | // 4 | // Author : @douglasdeodato 5 | // Project: angular-slick-carousel 6 | // Date : 24/08/2016 7 | // Version: package.json 8 | // ********************************************************************* 9 | 10 | @import "functions"; 11 | @import "config"; 12 | @import "app"; 13 | 14 | 15 | -------------------------------------------------------------------------------- /scss/_functions.scss: -------------------------------------------------------------------------------- 1 | // ********************************************************************* 2 | // =Helpers Functions 3 | // 4 | // Author : @douglasdeodato 5 | // Project: angular-slick-carousel 6 | // Date : 24/08/2016 7 | // Version: package.json 8 | // ********************************************************************* 9 | 10 | 11 | // Call the color palette modifiers in color values 12 | @function palette($palette, $shade: 'base') { 13 | @return map-get(map-get($color-palettes, $palette), $shade); 14 | } 15 | -------------------------------------------------------------------------------- /scss/_config.scss: -------------------------------------------------------------------------------- 1 | // ********************************************************************* 2 | // =main config 3 | // 4 | // Author : @douglasdeodato 5 | // Project: angular-slick-carousel 6 | // Date : 24/08/2016 7 | // Version: package.json 8 | // ********************************************************************* 9 | 10 | $slick-font-path: "/examples/fonts/" !default; 11 | 12 | 13 | // Color Palette Modifiers 14 | 15 | $blue:#3498db; 16 | $white:#fff; 17 | $grey: #555; 18 | 19 | $color-palettes: ( 20 | blue: ( 21 | x-light : #4b8cff, 22 | light : #9cc0ff, 23 | base : $blue, 24 | light-dark : #146aff, 25 | dark : #0355C6, 26 | x-dark : #2271fd, 27 | ), 28 | ); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-slick-carousel", 3 | "version": "3.1.7", 4 | "homepage": "https://github.com/devmark/angular-slick-carousel", 5 | "authors": [ 6 | "DevMark " 7 | ], 8 | "description": "Angular directive for slick carousel", 9 | "keywords": [ 10 | "angular", 11 | "directive", 12 | "slick", 13 | "carousel", 14 | "slick-carousel" 15 | ], 16 | "license": "MIT", 17 | "main": [ 18 | "dist/angular-slick.js" 19 | ], 20 | "dependencies": { 21 | "slick-carousel": "~1.6.0", 22 | "angular": ">=1.3.0" 23 | }, 24 | "devDependencies": { 25 | "angular-mocks": "~1.4.0", 26 | "angular-route": "~1.4.0", 27 | "jquery": "~2.1.4", 28 | "bootstrap": "~3.3.5" 29 | }, 30 | "resolutions": { 31 | "jquery": "~2.1.4", 32 | "angular": "~1.4.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var paths = require('./.yo-rc.json')['generator-gulp-angular'].props.paths; 4 | 5 | // An example configuration file. 6 | exports.config = { 7 | // The address of a running selenium server. 8 | //seleniumAddress: 'http://localhost:4444/wd/hub', 9 | //seleniumServerJar: deprecated, this should be set on node_modules/protractor/config.json 10 | 11 | // Capabilities to be passed to the webdriver instance. 12 | capabilities: { 13 | 'browserName': 'chrome' 14 | }, 15 | 16 | baseUrl: 'http://localhost:3000', 17 | 18 | // Spec patterns are relative to the current working directly when 19 | // protractor is called. 20 | specs: [paths.e2e + '/**/*.js'], 21 | 22 | // Options to be passed to Jasmine-node. 23 | jasmineNodeOpts: { 24 | showColors: true, 25 | defaultTimeoutInterval: 30000 26 | } 27 | }; 28 | -------------------------------------------------------------------------------- /examples/css/app.dist.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:'Pacifico';src:url("/examples/fonts/pacifico.eot");src:url("/examples/fonts/pacifico.eot?#iefix") format("embedded-opentype"),url("/examples/fonts/pacifico.woff") format("woff"),url("/examples/fonts/pacifico.ttf") format("truetype"),url("/examples/fonts/pacifico.svg#Pacifico") format("svg")}.header{padding:20px 0px}.header .title{color:#3498db;font-size:48px;line-height:100px;font-family:'Pacifico'}.header .sub-title{color:#555;font-size:12px;font-style:italic;font-weight:400;margin:10px auto;text-align:center}.blue{background:#3498db;color:#fff}.blue h3{background:#fff;color:#3498db;font-size:36px;line-height:100px;margin:10px;padding:2%;position:relative;text-align:center}.content .content-title{text-align:center;line-height:100px;font-family:'Pacifico'}.footer{padding:20px 0px}.footer .title{color:#3498db;font-size:48px;line-height:100px;font-family:'Pacifico'}.footer .sub-title{color:#555;font-size:12px;font-style:italic;font-weight:400;margin:10px auto;text-align:center} 2 | -------------------------------------------------------------------------------- /examples/css/app.dev.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAUA,UAOC;EANG,WAAW,EAAE,UAAU;EACvB,GAAG,EAAE,mCAAsC;EAC3C,GAAG,EAAE,+OAGwD;;;AAGjE,OAAQ;EACJ,OAAO,EAAE,QAAQ;;;AACjB,cAAS;EACT,KAAK,ECRH,OAAO;EDST,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,KAAK;EAClB,WAAW,EAAE,UAAU;;;AAEvB,kBAAa;EACT,KAAK,ECZN,IAAI;EDaH,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,GAAG;EAChB,MAAM,EAAE,SAAS;EACjB,UAAU,EAAE,MAAM;;;;AAK1B,KAAM;EACF,UAAU,ECzBR,OAAO;ED0BT,KAAK,ECzBF,IAAI;;;AD0BP,QAAG;EACH,UAAU,EC3BP,IAAI;ED4BP,KAAK,EC7BH,OAAO;ED8BT,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,KAAK;EAClB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,MAAM;;;;AAOlB,uBAAiB;EACjB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,KAAK;EAClB,WAAW,EAAE,UAAU;;;;AAK3B,OAAQ;EACJ,OAAO,EAAE,QAAQ;;;AACjB,cAAO;EACP,KAAK,ECrDH,OAAO;EDsDT,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,KAAK;EAClB,WAAW,EAAE,UAAU;;;AAE3B,kBAAW;EACP,KAAK,ECzDF,IAAI;ED0DP,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,GAAG;EAChB,MAAM,EAAE,SAAS;EACjB,UAAU,EAAE,MAAM", 4 | "sources": ["../../scss/_app.scss","../../scss/_config.scss"], 5 | "names": [], 6 | "file": "app.dev.css" 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2015 Devmark https://github.com/devmark/angular-slick-carousel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "generator-gulp-angular": { 3 | "version": "0.12.1", 4 | "props": { 5 | "angularVersion": "~1.4.0", 6 | "angularModules": [], 7 | "jQuery": { 8 | "key": "jquery2" 9 | }, 10 | "resource": { 11 | "key": "none", 12 | "module": null 13 | }, 14 | "router": { 15 | "key": "none", 16 | "module": null 17 | }, 18 | "ui": { 19 | "key": "none", 20 | "module": null 21 | }, 22 | "cssPreprocessor": { 23 | "key": "less", 24 | "extension": "less" 25 | }, 26 | "jsPreprocessor": { 27 | "key": "none", 28 | "extension": "js", 29 | "srcExtension": "js" 30 | }, 31 | "htmlPreprocessor": { 32 | "key": "none", 33 | "extension": "html" 34 | }, 35 | "bootstrapComponents": { 36 | "name": null, 37 | "version": null, 38 | "key": null, 39 | "module": null 40 | }, 41 | "foundationComponents": { 42 | "name": null, 43 | "version": null, 44 | "key": null, 45 | "module": null 46 | }, 47 | "paths": { 48 | "src": "src", 49 | "dist": "dist", 50 | "e2e": "e2e", 51 | "tmp": ".tmp" 52 | } 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function (config) { 2 | config.set({ 3 | 4 | // Base path, that will be used to resolve files and exclude 5 | basePath: '', 6 | 7 | // Frameworks to use 8 | frameworks: ['jasmine'], 9 | 10 | // List of files / patterns to load in the browser 11 | files: [ 12 | 'bower_components/jquery/dist/jquery.js', 13 | 'bower_components/angular/angular.js', 14 | 'bower_components/angular-mocks/angular-mocks.js', 15 | 16 | 'bower_components/slick-carousel/slick/slick.js', 17 | 'dist/angular-slick.js', 18 | 'test/**/*.spec.js' 19 | ], 20 | 21 | // List of files to exclude 22 | exclude: [], 23 | 24 | // Web server port 25 | port: 9876, 26 | 27 | // Level of logging 28 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 29 | logLevel: config.LOG_INFO, 30 | 31 | // Enable / disable watching file and executing tests whenever any file changes 32 | autoWatch: true, 33 | 34 | // Start these browsers, currently available: 35 | // - Chrome 36 | // - ChromeCanary 37 | // - Firefox 38 | // - Opera 39 | // - Safari (only Mac) 40 | // - PhantomJS 41 | // - IE (only Windows) 42 | browsers: [process.env.TRAVIS ? 'Firefox' : 'Chrome'], 43 | 44 | // Continuous Integration mode 45 | // if true, it capture browsers, run tests and exit 46 | singleRun: false 47 | }); 48 | }; 49 | -------------------------------------------------------------------------------- /examples/css/app.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Pacifico'; 3 | src: url('pacifico.eot'); 4 | src: url('pacifico.eot?#iefix') format('embedded-opentype'), 5 | url('pacifico.woff') format('woff'), 6 | url('pacifico.ttf') format('truetype'), 7 | url('pacifico.svg#Pacifico') format('svg'); 8 | } 9 | 10 | .header { 11 | padding: 20px 0px; 12 | } 13 | 14 | .header .title { 15 | color: #3498db; 16 | font-size: 48px; 17 | line-height: 100px; 18 | font-family: 'Pacifico'; 19 | } 20 | 21 | .header .sub-title { 22 | color: #555; 23 | font-size: 12px; 24 | font-style: italic; 25 | font-weight: 400; 26 | margin: 10px auto; 27 | text-align: center; 28 | } 29 | 30 | .blue { 31 | background: #3498db; 32 | color: #fff; 33 | } 34 | 35 | .blue h3 { 36 | background: #fff; 37 | color: #3498db; 38 | font-size: 36px; 39 | line-height: 100px; 40 | margin: 10px; 41 | padding: 2%; 42 | position: relative; 43 | text-align: center; 44 | } 45 | 46 | .content .content-title { 47 | text-align: center; 48 | line-height: 100px; 49 | font-family: 'Pacifico'; 50 | } 51 | 52 | 53 | .footer { 54 | padding: 20px 0px; 55 | } 56 | 57 | .footer .title { 58 | color: #3498db; 59 | font-size: 48px; 60 | line-height: 100px; 61 | font-family: 'Pacifico'; 62 | } 63 | 64 | .footer .sub-title { 65 | color: #555; 66 | font-size: 12px; 67 | font-style: italic; 68 | font-weight: 400; 69 | margin: 10px auto; 70 | text-align: center; 71 | } -------------------------------------------------------------------------------- /examples/css/app.dev.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Pacifico'; 3 | src: url("/examples/fonts/pacifico.eot"); 4 | src: url("/examples/fonts/pacifico.eot?#iefix") format("embedded-opentype"), url("/examples/fonts/pacifico.woff") format("woff"), url("/examples/fonts/pacifico.ttf") format("truetype"), url("/examples/fonts/pacifico.svg#Pacifico") format("svg"); 5 | } 6 | /* line 20, ../../scss/_app.scss */ 7 | .header { 8 | padding: 20px 0px; 9 | } 10 | /* line 22, ../../scss/_app.scss */ 11 | .header .title { 12 | color: #3498db; 13 | font-size: 48px; 14 | line-height: 100px; 15 | font-family: 'Pacifico'; 16 | } 17 | /* line 28, ../../scss/_app.scss */ 18 | .header .sub-title { 19 | color: #555; 20 | font-size: 12px; 21 | font-style: italic; 22 | font-weight: 400; 23 | margin: 10px auto; 24 | text-align: center; 25 | } 26 | 27 | /* line 39, ../../scss/_app.scss */ 28 | .blue { 29 | background: #3498db; 30 | color: #fff; 31 | } 32 | /* line 42, ../../scss/_app.scss */ 33 | .blue h3 { 34 | background: #fff; 35 | color: #3498db; 36 | font-size: 36px; 37 | line-height: 100px; 38 | margin: 10px; 39 | padding: 2%; 40 | position: relative; 41 | text-align: center; 42 | } 43 | 44 | /* line 57, ../../scss/_app.scss */ 45 | .content .content-title { 46 | text-align: center; 47 | line-height: 100px; 48 | font-family: 'Pacifico'; 49 | } 50 | 51 | /* line 65, ../../scss/_app.scss */ 52 | .footer { 53 | padding: 20px 0px; 54 | } 55 | /* line 67, ../../scss/_app.scss */ 56 | .footer .title { 57 | color: #3498db; 58 | font-size: 48px; 59 | line-height: 100px; 60 | font-family: 'Pacifico'; 61 | } 62 | /* line 73, ../../scss/_app.scss */ 63 | .footer .sub-title { 64 | color: #555; 65 | font-size: 12px; 66 | font-style: italic; 67 | font-weight: 400; 68 | margin: 10px auto; 69 | text-align: center; 70 | } 71 | 72 | /*# sourceMappingURL=app.dev.css.map */ 73 | -------------------------------------------------------------------------------- /scss/_app.scss: -------------------------------------------------------------------------------- 1 | // ********************************************************************* 2 | // =app 3 | // 4 | // Author : @douglasdeodato 5 | // Project: angular-slick-carousel 6 | // Date : 24/08/2016 7 | // Version: package.json 8 | // ********************************************************************* 9 | 10 | 11 | @font-face { 12 | font-family: 'Pacifico'; 13 | src: url('#{$slick-font-path}pacifico.eot'); 14 | src: url('#{$slick-font-path}pacifico.eot?#iefix') format('embedded-opentype'), 15 | url('#{$slick-font-path}pacifico.woff') format('woff'), 16 | url('#{$slick-font-path}pacifico.ttf') format('truetype'), 17 | url('#{$slick-font-path}pacifico.svg#Pacifico') format('svg'); 18 | } 19 | 20 | .header { 21 | padding: 20px 0px; 22 | & .title { 23 | color: palette(blue); 24 | font-size: 48px; 25 | line-height: 100px; 26 | font-family: 'Pacifico'; 27 | } 28 | & .sub-title { 29 | color: $grey; 30 | font-size: 12px; 31 | font-style: italic; 32 | font-weight: 400; 33 | margin: 10px auto; 34 | text-align: center; 35 | } 36 | } 37 | 38 | 39 | .blue { 40 | background: palette(blue); 41 | color: $white; 42 | h3 { 43 | background: $white; 44 | color: palette(blue); 45 | font-size: 36px; 46 | line-height: 100px; 47 | margin: 10px; 48 | padding: 2%; 49 | position: relative; 50 | text-align: center; 51 | } 52 | } 53 | 54 | 55 | 56 | .content { 57 | & .content-title { 58 | text-align: center; 59 | line-height: 100px; 60 | font-family: 'Pacifico'; 61 | } 62 | } 63 | 64 | 65 | .footer { 66 | padding: 20px 0px; 67 | .title { 68 | color: palette(blue); 69 | font-size: 48px; 70 | line-height: 100px; 71 | font-family: 'Pacifico'; 72 | } 73 | .sub-title { 74 | color: $grey; 75 | font-size: 12px; 76 | font-style: italic; 77 | font-weight: 400; 78 | margin: 10px auto; 79 | text-align: center; 80 | } 81 | } 82 | 83 | 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-slick-carousel", 3 | "version": "3.1.7", 4 | "main": "dist/angular-slick.js", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/devmark/angular-slick-carousel.git" 8 | }, 9 | "author": "DevMark", 10 | "license": "MIT", 11 | "dependencies": { 12 | }, 13 | "devDependencies": { 14 | "gulp": "~3.9.0", 15 | "grunt": "*", 16 | "load-grunt-tasks": "^3.5.0", 17 | "time-grunt": "^1.3.0", 18 | "grunt-contrib-sass": "*", 19 | "grunt-contrib-connect": "^1.0.2", 20 | "grunt-contrib-watch": "*", 21 | "gulp-autoprefixer": "~2.3.1", 22 | "gulp-angular-templatecache": "~1.6.0", 23 | "del": "~1.2.0", 24 | "lodash": "~3.10.1", 25 | "gulp-csso": "~1.0.0", 26 | "gulp-filter": "~2.0.2", 27 | "gulp-flatten": "~0.0.4", 28 | "gulp-jshint": "~1.11.0", 29 | "gulp-load-plugins": "~0.10.0", 30 | "gulp-size": "~1.2.1", 31 | "gulp-uglify": "~1.2.0", 32 | "gulp-useref": "~1.2.0", 33 | "gulp-util": "~3.0.5", 34 | "gulp-ng-annotate": "~1.0.0", 35 | "gulp-replace": "~0.5.3", 36 | "gulp-rename": "~1.2.2", 37 | "gulp-rev": "~5.0.0", 38 | "gulp-rev-replace": "~0.4.2", 39 | "gulp-minify-html": "~1.0.3", 40 | "gulp-inject": "~1.3.1", 41 | "gulp-protractor": "~1.0.0", 42 | "gulp-sourcemaps": "~1.5.2", 43 | "gulp-less": "~3.0.3", 44 | "gulp-angular-filesort": "~1.1.1", 45 | "main-bower-files": "~2.9.0", 46 | "merge-stream": "~0.1.7", 47 | "jshint-stylish": "~2.0.0", 48 | "wiredep": "~2.2.2", 49 | "karma": "~0.13.10", 50 | "karma-jasmine": "~0.3.5", 51 | "karma-chrome-launcher": "^0.2.0", 52 | "karma-phantomjs-launcher": "~0.2.0", 53 | "karma-ng-html2js-preprocessor": "~0.1.2", 54 | "concat-stream": "~1.5.0", 55 | "require-dir": "~0.3.0", 56 | "wrench": "~1.5.8", 57 | "event-stream": "^3.3.1", 58 | "gulp-concat": "^2.6.0", 59 | "gulp-footer": "^1.0.5", 60 | "gulp-header": "^1.2.2", 61 | "gulp-minify-css": "^1.2.0", 62 | "gulp-plumber": "^1.0.1" 63 | }, 64 | "engines": { 65 | "node": ">=0.10.0" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | var config = {}; 3 | 4 | 5 | //src =============================== 6 | var src; 7 | config.src = src = { 8 | sassMain: 'scss/main.scss', 9 | distFolder: 'examples/css/app.dist.css', 10 | devFolder: 'examples/css/app.dev.css', 11 | sassFolder: 'scss/**/*.scss', 12 | serverPort: 8000 13 | 14 | }; 15 | 16 | 17 | //Watch =============================== 18 | config.watch = { 19 | scripts: { 20 | files: ["<%= src.sassFolder %>"], 21 | tasks: ["dev", "sass:dist"] 22 | //,tasks: ["dev",'sass:dist'] 23 | } 24 | } 25 | 26 | 27 | //Sass =============================== 28 | var sass; 29 | config.sass = sass = {}; 30 | 31 | //distribution 32 | sass.dist = { 33 | options: { 34 | style: "compressed", 35 | noCache: true, 36 | sourcemap: 'none', 37 | update: true 38 | }, 39 | files: { 40 | "<%= src.distFolder %>": "<%= src.sassMain %>" 41 | } 42 | }; 43 | 44 | //development env. 45 | sass.dev = { 46 | options: { 47 | style: "expanded", 48 | lineNumber: true, 49 | }, 50 | files: { 51 | "<%= src.devFolder %>": "<%= src.sassMain %>" 52 | } 53 | }; 54 | 55 | //grunt serve =============================== 56 | config.connect = { 57 | server: { 58 | options: { 59 | livereload: true, 60 | port: "<%= src.serverPort %>" 61 | } 62 | } 63 | }; 64 | 65 | 66 | 67 | //Register custom tasks =============================== 68 | grunt.registerTask('default', ['dev']); 69 | grunt.registerTask('dev', ['sass:dev']); 70 | grunt.registerTask('dist', ['sass:dist']); 71 | grunt.registerTask('serve', ['connect:server', 'watch']); 72 | require('time-grunt')(grunt); 73 | require('load-grunt-tasks')(grunt, { 74 | scope: 'devDependencies' 75 | }); 76 | 77 | 78 | //General setup =============================== 79 | grunt.initConfig(config); 80 | 81 | }; 82 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular Slick Carousel 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
Angular Slick Carousel
22 | 23 |

Angular directive for slick carousel.

24 | 25 |

Code on 26 | GitHub

27 |
28 |
29 | 30 |

to see the samples runing use that command line in your terminal: python -m SimpleHTTPServer

31 |

After this acess that page from this link: http://localhost:8000/examples/

32 |
33 |
34 | 35 |
36 | 37 |
38 | 39 |
40 |
41 |
Go Get It
42 | 43 |

Code on 44 | GitHub

45 |
46 |
47 | 48 |
49 | 50 | 51 | 52 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /test/main.spec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('angular slick testing', function () { 4 | var scope, $rootScope, $compile, $timeout, $injector; 5 | 6 | beforeEach(module('slickCarousel')); 7 | 8 | beforeEach(inject(function (_$rootScope_, _$compile_, _$timeout_, _$injector_) { 9 | $rootScope = _$rootScope_; 10 | scope = $rootScope.$new(); 11 | $compile = _$compile_; 12 | $timeout = _$timeout_; 13 | $injector = _$injector_; 14 | 15 | scope.date = [ 16 | {id: 1, name: 'Mark', email: 'adam@email.com'}, 17 | {id: 2, name: 'Ken', email: 'adam@email.com'}, 18 | {id: 3, name: 'Oren', email: 'adam@email.com'}, 19 | {id: 4, name: 'Kenny', email: 'adam@email.com'} 20 | ]; 21 | })); 22 | 23 | // DSL (domain-specific language) 24 | function compileTemplate(template) { 25 | var el = $compile(angular.element(template))(scope); 26 | scope.$digest(); 27 | $timeout.flush(); 28 | return el; 29 | } 30 | 31 | it('should init', function () { 32 | var element = compileTemplate('\ 33 | \ 34 |
1
\ 35 |
2
\ 36 | '); 37 | scope.$digest(); 38 | expect(element.hasClass('slick-initialized')).toBe(true); 39 | }); 40 | 41 | it('should init if ng-if is true', function () { 42 | scope.slickConfigLoaded = true; 43 | var element = compileTemplate('\ 44 | \ 45 |
1
\ 46 |
2
\ 47 | '); 48 | scope.$digest(); 49 | expect(element.next().hasClass('slick-initialized')).toBe(true); 50 | }); 51 | 52 | it('should re-init if change ng-if', function () { 53 | scope.slickConfigLoaded = true; 54 | var element = compileTemplate('\ 55 | \ 56 |
\ 57 |
i
\ 58 | '); 59 | scope.$digest(); 60 | expect(element.next().hasClass('slick-initialized')).toBe(true); 61 | }); 62 | 63 | it('should re-init if config change', function () { 64 | scope.isDestroy = false; 65 | scope.slickConfig = { 66 | autoplay: true, 67 | event: { 68 | destroy: function (event, slick) { 69 | scope.isDestroy = true; 70 | } 71 | } 72 | }; 73 | var element = compileTemplate('\ 74 | \ 75 |
\ 76 |
i
\ 77 | '); 78 | scope.$digest(); 79 | expect(element.hasClass('slick-initialized')).toBe(true); 80 | 81 | $timeout(function () { 82 | scope.slickConfig.autoplay = false; 83 | scope.$digest(); 84 | $timeout.flush(); 85 | expect(scope.isDestroy).toBe(true); 86 | expect(element.hasClass('slick-initialized')).toBe(true); 87 | }); 88 | }); 89 | 90 | }); 91 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var gulp = require('gulp'); 3 | var karma = require('karma').server; 4 | var concat = require('gulp-concat'); 5 | var jshint = require('gulp-jshint'); 6 | var header = require('gulp-header'); 7 | var footer = require('gulp-footer'); 8 | var rename = require('gulp-rename'); 9 | var es = require('event-stream'); 10 | var del = require('del'); 11 | var uglify = require('gulp-uglify'); 12 | var minifyHtml = require('gulp-minify-html'); 13 | var minifyCSS = require('gulp-minify-css'); 14 | var templateCache = require('gulp-angular-templatecache'); 15 | var gutil = require('gulp-util'); 16 | var plumber = require('gulp-plumber');//To prevent pipe breaking caused by errors at 'watch' 17 | 18 | var config = { 19 | pkg: JSON.parse(fs.readFileSync('./bower.json')), 20 | banner: '/*!\n' + 21 | ' * <%= pkg.name %>\n' + 22 | ' * <%= pkg.authors %>\n' + 23 | ' * <%= pkg.homepage %>\n' + 24 | ' * Version: <%= pkg.version %> - <%= timestamp %>\n' + 25 | ' * License: <%= pkg.license %>\n' + 26 | ' */\n\n\n' 27 | }; 28 | 29 | gulp.task('default', ['build', 'test']); 30 | gulp.task('build', ['scripts', 'styles']); 31 | gulp.task('test', ['build', 'karma']); 32 | 33 | gulp.task('watch', ['build'], function () { 34 | //gulp.task('watch', ['build', 'karma-watch'], function () { 35 | gulp.watch(['src/**/*.{js,html}'], ['build']); 36 | }); 37 | 38 | gulp.task('clean', function (cb) { 39 | del(['dist'], cb); 40 | }); 41 | 42 | gulp.task('scripts', ['clean'], function () { 43 | 44 | var buildTemplates = function () { 45 | return gulp.src('src/**/*.html') 46 | .pipe(minifyHtml({ 47 | empty: true, 48 | spare: true, 49 | quotes: true 50 | })) 51 | .pipe(templateCache({module: 'slickCarousel'})); 52 | }; 53 | 54 | var buildLib = function () { 55 | return gulp.src(['src/common.js', 'src/*.js']) 56 | .pipe(plumber({ 57 | errorHandler: handleError 58 | })) 59 | .pipe(jshint()); 60 | //.pipe(jshint.reporter('jshint-stylish')) 61 | //.pipe(jshint.reporter('fail')); 62 | }; 63 | 64 | return es.merge(buildLib(), buildTemplates()) 65 | .pipe(plumber({ 66 | errorHandler: handleError 67 | })) 68 | .pipe(concat('angular-slick.js')) 69 | .pipe(header(config.banner, { 70 | timestamp: (new Date()).toISOString(), pkg: config.pkg 71 | })) 72 | .pipe(gulp.dest('dist')) 73 | .pipe(uglify({preserveComments: 'some'})) 74 | .pipe(rename({extname: '.min.js'})) 75 | .pipe(gulp.dest('dist')); 76 | }); 77 | 78 | gulp.task('styles', ['clean'], function () { 79 | 80 | return gulp.src('src/common.css') 81 | .pipe(header(config.banner, { 82 | timestamp: (new Date()).toISOString(), pkg: config.pkg 83 | })) 84 | .pipe(rename('select.css')) 85 | .pipe(gulp.dest('dist')) 86 | .pipe(minifyCSS()) 87 | .pipe(rename({ext: '.min.css'})) 88 | .pipe(gulp.dest('dist')); 89 | 90 | }); 91 | 92 | gulp.task('karma', ['build'], function () { 93 | karma.start({configFile: __dirname + '/karma.conf.js', singleRun: true}); 94 | }); 95 | 96 | gulp.task('karma-watch', ['build'], function () { 97 | karma.start({configFile: __dirname + '/karma.conf.js', singleRun: false}); 98 | }); 99 | 100 | var handleError = function (err) { 101 | console.log(err.toString()); 102 | this.emit('end'); 103 | }; -------------------------------------------------------------------------------- /examples/views/home.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |

Single Item

6 | 7 | 10 | 11 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 |

Multiple Items

34 | 35 |
36 |
37 |
38 | 39 | 40 |

Responsive Display

41 | 42 |
43 |
44 |
45 | 46 | 47 | 48 |

Variable Width

49 | 50 | 51 |
52 |
53 |
54 | 55 | 56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
65 | 66 |
67 |
68 |
69 | 70 | -------------------------------------------------------------------------------- /dist/angular-slick.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * angular-slick-carousel 3 | * DevMark 4 | * https://github.com/devmark/angular-slick-carousel 5 | * Version: 3.1.7 - 2016-08-04T06:17:55.528Z 6 | * License: MIT 7 | */ 8 | "use strict";angular.module("slickCarousel",[]).constant("slickCarouselConfig",{method:{},event:{}}).directive("slick",["$timeout","slickCarouselConfig",function(e,n){var i,t;return i=["slickGoTo","slickNext","slickPrev","slickPause","slickPlay","slickAdd","slickRemove","slickFilter","slickUnfilter","unslick"],t=["afterChange","beforeChange","breakpoint","destroy","edge","init","reInit","setPosition","swipe","lazyLoaded","lazyLoadError"],{scope:{settings:"=",enabled:"@",accessibility:"@",adaptiveHeight:"@",autoplay:"@",autoplaySpeed:"@",arrows:"@",asNavFor:"@",appendArrows:"@",prevArrow:"@",nextArrow:"@",centerMode:"@",centerPadding:"@",cssEase:"@",customPaging:"&",dots:"@",draggable:"@",fade:"@",focusOnSelect:"@",easing:"@",edgeFriction:"@",infinite:"@",initialSlide:"@",lazyLoad:"@",mobileFirst:"@",pauseOnHover:"@",pauseOnDotsHover:"@",respondTo:"@",responsive:"=?",rows:"@",slide:"@",slidesPerRow:"@",slidesToShow:"@",slidesToScroll:"@",speed:"@",swipe:"@",swipeToSlide:"@",touchMove:"@",touchThreshold:"@",useCSS:"@",variableWidth:"@",vertical:"@",verticalSwiping:"@",rtl:"@"},restrict:"AE",link:function(t,o,a){angular.element(o).css("display","none");var r,s,l,d,u,c;return s=function(){r=angular.extend(angular.copy(n),{enabled:"false"!==t.enabled,accessibility:"false"!==t.accessibility,adaptiveHeight:"true"===t.adaptiveHeight,autoplay:"true"===t.autoplay,autoplaySpeed:null!=t.autoplaySpeed?parseInt(t.autoplaySpeed,10):3e3,arrows:"false"!==t.arrows,asNavFor:t.asNavFor?t.asNavFor:void 0,appendArrows:angular.element(t.appendArrows?t.appendArrows:o),prevArrow:t.prevArrow?angular.element(t.prevArrow):void 0,nextArrow:t.nextArrow?angular.element(t.nextArrow):void 0,centerMode:"true"===t.centerMode,centerPadding:t.centerPadding||"50px",cssEase:t.cssEase||"ease",customPaging:a.customPaging?function(e,n){return t.customPaging({slick:e,index:n})}:void 0,dots:"true"===t.dots,draggable:"false"!==t.draggable,fade:"true"===t.fade,focusOnSelect:"true"===t.focusOnSelect,easing:t.easing||"linear",edgeFriction:t.edgeFriction||.15,infinite:"false"!==t.infinite,initialSlide:parseInt(t.initialSlide)||0,lazyLoad:t.lazyLoad||"ondemand",mobileFirst:"true"===t.mobileFirst,pauseOnHover:"false"!==t.pauseOnHover,pauseOnDotsHover:"true"===t.pauseOnDotsHover,respondTo:null!=t.respondTo?t.respondTo:"window",responsive:t.responsive||void 0,rows:null!=t.rows?parseInt(t.rows,10):1,slide:t.slide||"",slidesPerRow:null!=t.slidesPerRow?parseInt(t.slidesPerRow,10):1,slidesToShow:null!=t.slidesToShow?parseInt(t.slidesToShow,10):1,slidesToScroll:null!=t.slidesToScroll?parseInt(t.slidesToScroll,10):1,speed:null!=t.speed?parseInt(t.speed,10):300,swipe:"false"!==t.swipe,swipeToSlide:"true"===t.swipeToSlide,touchMove:"false"!==t.touchMove,touchThreshold:t.touchThreshold?parseInt(t.touchThreshold,10):5,useCSS:"false"!==t.useCSS,variableWidth:"true"===t.variableWidth,vertical:"true"===t.vertical,verticalSwiping:"true"===t.verticalSwiping,rtl:"true"===t.rtl},t.settings)},l=function(){var e=angular.element(o);return e.hasClass("slick-initialized")&&(e.remove("slick-list"),e.slick("unslick")),e},d=function(){s();var n=angular.element(o);if(angular.element(o).hasClass("slick-initialized")){if(r.enabled)return n.slick("getSlick");l()}else{if(!r.enabled)return;n.on("init",function(e,n){return"undefined"!=typeof r.event.init&&r.event.init(e,n),"undefined"!=typeof c?n.slideHandler(c):void 0}),e(function(){angular.element(o).css("display","block"),n.not(".slick-initialized").slick(r)})}t.internalControl=r.method||{},i.forEach(function(e){t.internalControl[e]=function(){var i;i=Array.prototype.slice.call(arguments),i.unshift(e),n.slick.apply(o,i)}}),n.on("afterChange",function(n,i,o){c=o,"undefined"!=typeof r.event.afterChange&&e(function(){t.$apply(function(){r.event.afterChange(n,i,o)})})}),n.on("beforeChange",function(n,i,o,a){"undefined"!=typeof r.event.beforeChange&&e(function(){e(function(){t.$apply(function(){r.event.beforeChange(n,i,o,a)})})})}),n.on("reInit",function(n,i){"undefined"!=typeof r.event.reInit&&e(function(){t.$apply(function(){r.event.reInit(n,i)})})}),"undefined"!=typeof r.event.breakpoint&&n.on("breakpoint",function(n,i,o){e(function(){t.$apply(function(){r.event.breakpoint(n,i,o)})})}),"undefined"!=typeof r.event.destroy&&n.on("destroy",function(n,i){e(function(){t.$apply(function(){r.event.destroy(n,i)})})}),"undefined"!=typeof r.event.edge&&n.on("edge",function(n,i,o){e(function(){t.$apply(function(){r.event.edge(n,i,o)})})}),"undefined"!=typeof r.event.setPosition&&n.on("setPosition",function(n,i){e(function(){t.$apply(function(){r.event.setPosition(n,i)})})}),"undefined"!=typeof r.event.swipe&&n.on("swipe",function(n,i,o){e(function(){t.$apply(function(){r.event.swipe(n,i,o)})})}),"undefined"!=typeof r.event.lazyLoaded&&n.on("lazyLoaded",function(n,i,o,a){e(function(){t.$apply(function(){r.event.lazyLoaded(n,i,o,a)})})}),"undefined"!=typeof r.event.lazyLoadError&&n.on("lazyLoadError",function(n,i,o,a){e(function(){t.$apply(function(){r.event.lazyLoadError(n,i,o,a)})})})},u=function(){l(),d()},o.one("$destroy",function(){l()}),t.$watch("settings",function(e,n){return null!==e?u():void 0},!0)}}}]); -------------------------------------------------------------------------------- /examples/js/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('slickExampleApp', ['slickCarousel', 'ngRoute']) 4 | .config(['$routeProvider', function ($routeProvider) { 5 | $routeProvider 6 | .when('/', { 7 | templateUrl: 'views/home.html', 8 | controller: 'SlickController' 9 | }) 10 | .otherwise({ 11 | redirectTo: '/' 12 | }); 13 | }]) 14 | .config(['slickCarouselConfig', function (slickCarouselConfig) { 15 | slickCarouselConfig.dots = true; 16 | slickCarouselConfig.autoplay = false; 17 | }]) 18 | .controller('SlickController', function ($scope, $timeout) { 19 | //==================================== 20 | // Slick 1 21 | //==================================== 22 | $scope.number1 = [1, 2, 3, 4, 5, 6, 7, 8]; 23 | $scope.slickConfig1Loaded = true; 24 | $scope.updateNumber1 = function () { 25 | $scope.slickConfig1Loaded = false; 26 | $scope.number1[2] = '123'; 27 | $scope.number1.push(Math.floor((Math.random() * 10) + 100)); 28 | $timeout(function () { 29 | $scope.slickConfig1Loaded = true; 30 | }, 5); 31 | }; 32 | $scope.slickCurrentIndex = 0; 33 | $scope.slickConfig = { 34 | dots: true, 35 | autoplay: true, 36 | initialSlide: 3, 37 | infinite: true, 38 | autoplaySpeed: 1000, 39 | method: {}, 40 | event: { 41 | beforeChange: function (event, slick, currentSlide, nextSlide) { 42 | console.log('before change', Math.floor((Math.random() * 10) + 100)); 43 | }, 44 | afterChange: function (event, slick, currentSlide, nextSlide) { 45 | $scope.slickCurrentIndex = currentSlide; 46 | }, 47 | breakpoint: function (event, slick, breakpoint) { 48 | console.log('breakpoint'); 49 | }, 50 | destroy: function (event, slick) { 51 | console.log('destroy'); 52 | }, 53 | edge: function (event, slick, direction) { 54 | console.log('edge'); 55 | }, 56 | reInit: function (event, slick) { 57 | console.log('re-init'); 58 | }, 59 | init: function (event, slick) { 60 | console.log('init'); 61 | }, 62 | setPosition: function (evnet, slick) { 63 | console.log('setPosition'); 64 | }, 65 | swipe: function (event, slick, direction) { 66 | console.log('swipe'); 67 | } 68 | } 69 | }; 70 | 71 | //==================================== 72 | // Slick 2 73 | //==================================== 74 | $scope.number2 = [{label: 1, otherLabel: 1}, {label: 2, otherLabel: 2}, {label: 3, otherLabel: 3}, { 75 | label: 4, 76 | otherLabel: 4 77 | }, {label: 5, otherLabel: 5}, {label: 6, otherLabel: 6}, {label: 7, otherLabel: 7}, {label: 8, otherLabel: 8}]; 78 | $scope.slickConfig2Loaded = true; 79 | $scope.updateNumber2 = function () { 80 | $scope.slickConfig2Loaded = false; 81 | $scope.number2[2] = 'ggg'; 82 | $scope.number2.push(Math.floor((Math.random() * 10) + 100)); 83 | $timeout(function () { 84 | $scope.slickConfig2Loaded = true; 85 | }); 86 | }; 87 | 88 | $scope.slickConfig2 = { 89 | autoplay: true, 90 | infinite: true, 91 | autoplaySpeed: 1000, 92 | slidesToShow: 3, 93 | slidesToScroll: 3, 94 | method: {} 95 | }; 96 | 97 | //==================================== 98 | // Slick 3 99 | //==================================== 100 | $scope.number3 = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}]; 101 | $scope.slickConfig3Loaded = true; 102 | $scope.slickConfig3 = { 103 | method: {}, 104 | dots: true, 105 | infinite: false, 106 | speed: 300, 107 | slidesToShow: 4, 108 | slidesToScroll: 4, 109 | responsive: [ 110 | { 111 | breakpoint: 1024, 112 | settings: { 113 | slidesToShow: 3, 114 | slidesToScroll: 3, 115 | infinite: true, 116 | dots: true 117 | } 118 | }, 119 | { 120 | breakpoint: 600, 121 | settings: { 122 | slidesToShow: 2, 123 | slidesToScroll: 2 124 | } 125 | }, 126 | { 127 | breakpoint: 480, 128 | settings: { 129 | slidesToShow: 1, 130 | slidesToScroll: 1 131 | } 132 | } 133 | ] 134 | }; 135 | 136 | //==================================== 137 | // Slick 4 138 | //==================================== 139 | $scope.number4 = [{label: 225}, {label: 125}, {label: 200}, {label: 175}, {label: 150}, {label: 180}, {label: 300}, {label: 400}]; 140 | $scope.slickConfig4Loaded = true; 141 | $scope.updateNumber4 = function () { 142 | $scope.slickConfig4Loaded = false; 143 | $scope.number4[2].label = 123; 144 | $scope.number4.push({label: Math.floor((Math.random() * 10) + 100)}); 145 | $timeout(function () { 146 | $scope.slickConfig4Loaded = true; 147 | }); 148 | }; 149 | $scope.slickConfig4 = { 150 | method: {}, 151 | dots: true, 152 | infinite: true, 153 | speed: 300, 154 | slidesToShow: 1, 155 | centerMode: true, 156 | variableWidth: true 157 | }; 158 | 159 | 160 | }); 161 | 162 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-slick-carousel 2 | ====================== 3 | 4 | angular 2 above take a look https://github.com/devmark/ngx-slick 5 | 6 | 7 | [![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&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 8 | 9 | Angular directive for [slick-carousel](http://kenwheeler.github.io/slick/) 10 | 11 | 12 | ## Summary 13 | 14 | - [Usage](#usage) 15 | - [Attributes & Event](#attributes--event) 16 | - [Enable/disable slick](#enabledisable-slick) 17 | - [Method](#method) 18 | - [Slide data](#slide-data) 19 | - [Global Config](#global-config) 20 | - [faq](#faq) 21 | - [Examples](#examples) 22 | - [Creator](#creator) 23 | 24 | 25 | 26 | ## Usage 27 | ----- 28 | 29 | - Using [bower](http://bower.io/) to install it. `bower install angular-slick-carousel` 30 | - Add `jquery`, `angular`, `slick-carousel` and `angular-slick-carousel` to your code. 31 | 32 | ```html 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ``` 41 | 42 | - Add the sortable module as a dependency to your application module: `slickCarousel` 43 | 44 | ```js 45 | var myAppModule = angular.module('MyApp', ['slickCarousel']) 46 | ``` 47 | 48 | This directive allows you to use the slick-carousel plugin as 49 | an angular directive. It can be specified in your HTML 50 | as either a `
` attribute or a `` element. 51 | 52 | ```html 53 | 54 | ... 55 | 56 | 57 | 59 | 60 | ``` 61 | 62 | ## Attributes & Event 63 | `settings`: optional `Object` containing any of the slick options. Consult [here](http://kenwheeler.github.io/slick/#settings). 64 | - `enabled` should slick be enabled or not. Default to true. Example below 65 | - `method` optional containing slick method. discussed [below](#method) in detail 66 | - `event` optional containing slick event 67 | 68 | ```javascript 69 | $scope.slickConfig = { 70 | enabled: true, 71 | autoplay: true, 72 | draggable: false, 73 | autoplaySpeed: 3000, 74 | method: {}, 75 | event: { 76 | beforeChange: function (event, slick, currentSlide, nextSlide) { 77 | }, 78 | afterChange: function (event, slick, currentSlide, nextSlide) { 79 | } 80 | } 81 | }; 82 | ``` 83 | ## Enable/disable slick 84 | Slick can be easily switched on and off by using `enabled` settings flag. 85 | ```js 86 | $scope.slickConfig = { 87 | enabled: true, 88 | } 89 | $scope.toggleSlick = function() { 90 | $scope.slickConfig.enabled = !$scope.slickConfig.enabled; 91 | } 92 | ``` 93 | ```html 94 | 95 | ... 96 | 97 | 98 | ``` 99 | 100 | 101 | ## Method 102 | 1. All the functions in the plugin are exposed through a control 103 | attribute. 104 | 2. To utilize this architecture, and have two-way data-binding, 105 | define an empty control handle on scope: 106 | ```js 107 | $scope.slickConfig = { 108 | method: {} 109 | } 110 | ``` 111 | 3. Pass it as the value to control attribute. Now, you can call any plugin methods 112 | as shown in the example. 113 | 114 | ```html 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | ``` 123 | 124 | ## Slide data 125 | For change slide content, you have to set `ng-if` to destroy and init it 126 | 127 | - controller: 128 | ```js 129 | $scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}]; 130 | $scope.numberLoaded = true; 131 | $scope.numberUpdate = function(){ 132 | $scope.numberLoaded = false; // disable slick 133 | 134 | //number update 135 | 136 | $scope.numberLoaded = true; // enable slick 137 | }; 138 | ``` 139 | - html: 140 | ```html 141 | 144 | 145 | 146 |
147 |
148 |
149 | 150 | ``` 151 | 152 | ## Global config 153 | ```js 154 | config(['slickCarouselConfig', function (slickCarouselConfig) { 155 | slickCarouselConfig.dots = true; 156 | slickCarouselConfig.autoplay = false; 157 | }]) 158 | ``` 159 | 160 | ## FAQ 161 | Q: After change data, could i keep the current slide index? 162 | A: For this directive, this will destroy and init slick when updating data. You could get current index by event. 163 | example: 164 | ```js 165 | $scope.currentIndex = 0; 166 | $scope.slickConfig = { 167 | event: { 168 | afterChange: function (event, slick, currentSlide, nextSlide) { 169 | $scope.currentIndex = currentSlide; // save current index each time 170 | } 171 | init: function (event, slick) { 172 | slick.slickGoTo($scope.currentIndex); // slide to correct index when init 173 | } 174 | } 175 | }; 176 | ``` 177 | 178 | ## Examples 179 | 180 | Now to run the samples in your local machine you just need to run: 181 | 182 | ```sh 183 | grunt serve 184 | ``` 185 | 186 | so you will start a web server on http://localhost:8000 187 | 188 | now acess the folder examples: http://localhost:8000/examples/#/ 189 | 190 | 191 | ## Creator 192 | [@devmark](https://github.com/devmark) 193 | -------------------------------------------------------------------------------- /src/slick.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular 4 | .module('slickCarousel', []) 5 | //global config 6 | .constant('slickCarouselConfig', { 7 | method: {}, 8 | event: {} 9 | }) 10 | .directive('slick', [ 11 | '$timeout', 'slickCarouselConfig', function ($timeout, slickCarouselConfig) { 12 | var slickMethodList, slickEventList; 13 | slickMethodList = ['slickGoTo', 'slickNext', 'slickPrev', 'slickPause', 'slickPlay', 'slickAdd', 'slickRemove', 'slickFilter', 'slickUnfilter', 'unslick']; 14 | slickEventList = ['afterChange', 'beforeChange', 'breakpoint', 'destroy', 'edge', 'init', 'reInit', 'setPosition', 'swipe', 'lazyLoaded', 'lazyLoadError']; 15 | 16 | return { 17 | scope: { 18 | settings: '=', 19 | enabled: '@', 20 | accessibility: '@', 21 | adaptiveHeight: '@', 22 | autoplay: '@', 23 | autoplaySpeed: '@', 24 | arrows: '@', 25 | asNavFor: '@', 26 | appendArrows: '@', 27 | prevArrow: '@', 28 | nextArrow: '@', 29 | centerMode: '@', 30 | centerPadding: '@', 31 | cssEase: '@', 32 | customPaging: '&', 33 | dots: '@', 34 | draggable: '@', 35 | fade: '@', 36 | focusOnSelect: '@', 37 | easing: '@', 38 | edgeFriction: '@', 39 | infinite: '@', 40 | initialSlide: '@', 41 | lazyLoad: '@', 42 | mobileFirst: '@', 43 | pauseOnHover: '@', 44 | pauseOnDotsHover: '@', 45 | respondTo: '@', 46 | responsive: '=?', 47 | rows: '@', 48 | slide: '@', 49 | slidesPerRow: '@', 50 | slidesToShow: '@', 51 | slidesToScroll: '@', 52 | speed: '@', 53 | swipe: '@', 54 | swipeToSlide: '@', 55 | touchMove: '@', 56 | touchThreshold: '@', 57 | useCSS: '@', 58 | variableWidth: '@', 59 | vertical: '@', 60 | verticalSwiping: '@', 61 | rtl: '@' 62 | }, 63 | restrict: 'AE', 64 | link: function (scope, element, attr) { 65 | //hide slider 66 | angular.element(element).css('display', 'none'); 67 | 68 | var options, initOptions, destroy, init, destroyAndInit, currentIndex; 69 | 70 | initOptions = function () { 71 | options = angular.extend(angular.copy(slickCarouselConfig), { 72 | enabled: scope.enabled !== 'false', 73 | accessibility: scope.accessibility !== 'false', 74 | adaptiveHeight: scope.adaptiveHeight === 'true', 75 | autoplay: scope.autoplay === 'true', 76 | autoplaySpeed: scope.autoplaySpeed != null ? parseInt(scope.autoplaySpeed, 10) : 3000, 77 | arrows: scope.arrows !== 'false', 78 | asNavFor: scope.asNavFor ? scope.asNavFor : void 0, 79 | appendArrows: scope.appendArrows ? angular.element(scope.appendArrows) : angular.element(element), 80 | prevArrow: scope.prevArrow ? angular.element(scope.prevArrow) : void 0, 81 | nextArrow: scope.nextArrow ? angular.element(scope.nextArrow) : void 0, 82 | centerMode: scope.centerMode === 'true', 83 | centerPadding: scope.centerPadding || '50px', 84 | cssEase: scope.cssEase || 'ease', 85 | customPaging: attr.customPaging ? function (slick, index) { 86 | return scope.customPaging({slick: slick, index: index}); 87 | } : void 0, 88 | dots: scope.dots === 'true', 89 | draggable: scope.draggable !== 'false', 90 | fade: scope.fade === 'true', 91 | focusOnSelect: scope.focusOnSelect === 'true', 92 | easing: scope.easing || 'linear', 93 | edgeFriction: scope.edgeFriction || 0.15, 94 | infinite: scope.infinite !== 'false', 95 | initialSlide: parseInt(scope.initialSlide) || 0, 96 | lazyLoad: scope.lazyLoad || 'ondemand', 97 | mobileFirst: scope.mobileFirst === 'true', 98 | pauseOnHover: scope.pauseOnHover !== 'false', 99 | pauseOnDotsHover: scope.pauseOnDotsHover === "true", 100 | respondTo: scope.respondTo != null ? scope.respondTo : 'window', 101 | responsive: scope.responsive || void 0, 102 | rows: scope.rows != null ? parseInt(scope.rows, 10) : 1, 103 | slide: scope.slide || '', 104 | slidesPerRow: scope.slidesPerRow != null ? parseInt(scope.slidesPerRow, 10) : 1, 105 | slidesToShow: scope.slidesToShow != null ? parseInt(scope.slidesToShow, 10) : 1, 106 | slidesToScroll: scope.slidesToScroll != null ? parseInt(scope.slidesToScroll, 10) : 1, 107 | speed: scope.speed != null ? parseInt(scope.speed, 10) : 300, 108 | swipe: scope.swipe !== 'false', 109 | swipeToSlide: scope.swipeToSlide === 'true', 110 | touchMove: scope.touchMove !== 'false', 111 | touchThreshold: scope.touchThreshold ? parseInt(scope.touchThreshold, 10) : 5, 112 | useCSS: scope.useCSS !== 'false', 113 | variableWidth: scope.variableWidth === 'true', 114 | vertical: scope.vertical === 'true', 115 | verticalSwiping: scope.verticalSwiping === 'true', 116 | rtl: scope.rtl === 'true' 117 | }, scope.settings); 118 | 119 | }; 120 | 121 | destroy = function () { 122 | var slickness = angular.element(element); 123 | if (slickness.hasClass('slick-initialized')) { 124 | slickness.remove('slick-list'); 125 | slickness.slick('unslick'); 126 | } 127 | 128 | return slickness; 129 | }; 130 | 131 | init = function () { 132 | initOptions(); 133 | 134 | var slickness = angular.element(element); 135 | 136 | if (angular.element(element).hasClass('slick-initialized')) { 137 | if (options.enabled) { 138 | return slickness.slick('getSlick'); 139 | } else { 140 | destroy(); 141 | } 142 | } else { 143 | if (!options.enabled) { 144 | return; 145 | } 146 | // Event 147 | slickness.on('init', function (event, slick) { 148 | if (typeof options.event.init !== 'undefined') { 149 | options.event.init(event, slick); 150 | } 151 | if (typeof currentIndex !== 'undefined') { 152 | return slick.slideHandler(currentIndex); 153 | } 154 | }); 155 | 156 | $timeout(function () { 157 | angular.element(element).css('display', 'block'); 158 | slickness.not('.slick-initialized').slick(options); 159 | }); 160 | } 161 | 162 | scope.internalControl = options.method || {}; 163 | 164 | // Method 165 | slickMethodList.forEach(function (value) { 166 | scope.internalControl[value] = function () { 167 | var args; 168 | args = Array.prototype.slice.call(arguments); 169 | args.unshift(value); 170 | slickness.slick.apply(element, args); 171 | }; 172 | }); 173 | 174 | // Event 175 | slickness.on('afterChange', function (event, slick, currentSlide) { 176 | currentIndex = currentSlide; 177 | if (typeof options.event.afterChange !== 'undefined') { 178 | $timeout(function () { 179 | scope.$apply(function () { 180 | options.event.afterChange(event, slick, currentSlide); 181 | }); 182 | }); 183 | } 184 | }); 185 | 186 | slickness.on('beforeChange', function (event, slick, currentSlide, nextSlide) { 187 | if (typeof options.event.beforeChange !== 'undefined') { 188 | $timeout(function () { 189 | $timeout(function () { 190 | scope.$apply(function () { 191 | options.event.beforeChange(event, slick, currentSlide, nextSlide); 192 | }); 193 | }); 194 | }); 195 | } 196 | }); 197 | 198 | slickness.on('reInit', function (event, slick) { 199 | if (typeof options.event.reInit !== 'undefined') { 200 | $timeout(function () { 201 | scope.$apply(function () { 202 | options.event.reInit(event, slick); 203 | }); 204 | }); 205 | } 206 | }); 207 | 208 | if (typeof options.event.breakpoint !== 'undefined') { 209 | slickness.on('breakpoint', function (event, slick, breakpoint) { 210 | $timeout(function () { 211 | scope.$apply(function () { 212 | options.event.breakpoint(event, slick, breakpoint); 213 | }); 214 | }); 215 | }); 216 | } 217 | if (typeof options.event.destroy !== 'undefined') { 218 | slickness.on('destroy', function (event, slick) { 219 | $timeout(function () { 220 | scope.$apply(function () { 221 | options.event.destroy(event, slick); 222 | }); 223 | }); 224 | }); 225 | } 226 | if (typeof options.event.edge !== 'undefined') { 227 | slickness.on('edge', function (event, slick, direction) { 228 | $timeout(function () { 229 | scope.$apply(function () { 230 | options.event.edge(event, slick, direction); 231 | }); 232 | }); 233 | }); 234 | } 235 | 236 | if (typeof options.event.setPosition !== 'undefined') { 237 | slickness.on('setPosition', function (event, slick) { 238 | $timeout(function () { 239 | scope.$apply(function () { 240 | options.event.setPosition(event, slick); 241 | }); 242 | }); 243 | }); 244 | } 245 | if (typeof options.event.swipe !== 'undefined') { 246 | slickness.on('swipe', function (event, slick, direction) { 247 | $timeout(function () { 248 | scope.$apply(function () { 249 | options.event.swipe(event, slick, direction); 250 | }); 251 | }); 252 | }); 253 | } 254 | if (typeof options.event.lazyLoaded !== 'undefined') { 255 | slickness.on('lazyLoaded', function (event, slick, image, imageSource) { 256 | $timeout(function () { 257 | scope.$apply(function () { 258 | options.event.lazyLoaded(event, slick, image, imageSource); 259 | }); 260 | }); 261 | }); 262 | } 263 | if (typeof options.event.lazyLoadError !== 'undefined') { 264 | slickness.on('lazyLoadError', function (event, slick, image, imageSource) { 265 | $timeout(function () { 266 | scope.$apply(function () { 267 | options.event.lazyLoadError(event, slick, image, imageSource); 268 | }); 269 | }); 270 | }); 271 | } 272 | }; 273 | 274 | destroyAndInit = function () { 275 | destroy(); 276 | init(); 277 | }; 278 | 279 | element.one('$destroy', function () { 280 | destroy(); 281 | }); 282 | 283 | return scope.$watch('settings', function (newVal, oldVal) { 284 | if (newVal !== null) { 285 | return destroyAndInit(); 286 | } 287 | }, true); 288 | 289 | } 290 | }; 291 | } 292 | ]); 293 | -------------------------------------------------------------------------------- /dist/angular-slick.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * angular-slick-carousel 3 | * DevMark 4 | * https://github.com/devmark/angular-slick-carousel 5 | * Version: 3.1.7 - 2016-08-04T06:17:55.528Z 6 | * License: MIT 7 | */ 8 | 9 | 10 | 'use strict'; 11 | 12 | angular 13 | .module('slickCarousel', []) 14 | //global config 15 | .constant('slickCarouselConfig', { 16 | method: {}, 17 | event: {} 18 | }) 19 | .directive('slick', [ 20 | '$timeout', 'slickCarouselConfig', function ($timeout, slickCarouselConfig) { 21 | var slickMethodList, slickEventList; 22 | slickMethodList = ['slickGoTo', 'slickNext', 'slickPrev', 'slickPause', 'slickPlay', 'slickAdd', 'slickRemove', 'slickFilter', 'slickUnfilter', 'unslick']; 23 | slickEventList = ['afterChange', 'beforeChange', 'breakpoint', 'destroy', 'edge', 'init', 'reInit', 'setPosition', 'swipe', 'lazyLoaded', 'lazyLoadError']; 24 | 25 | return { 26 | scope: { 27 | settings: '=', 28 | enabled: '@', 29 | accessibility: '@', 30 | adaptiveHeight: '@', 31 | autoplay: '@', 32 | autoplaySpeed: '@', 33 | arrows: '@', 34 | asNavFor: '@', 35 | appendArrows: '@', 36 | prevArrow: '@', 37 | nextArrow: '@', 38 | centerMode: '@', 39 | centerPadding: '@', 40 | cssEase: '@', 41 | customPaging: '&', 42 | dots: '@', 43 | draggable: '@', 44 | fade: '@', 45 | focusOnSelect: '@', 46 | easing: '@', 47 | edgeFriction: '@', 48 | infinite: '@', 49 | initialSlide: '@', 50 | lazyLoad: '@', 51 | mobileFirst: '@', 52 | pauseOnHover: '@', 53 | pauseOnDotsHover: '@', 54 | respondTo: '@', 55 | responsive: '=?', 56 | rows: '@', 57 | slide: '@', 58 | slidesPerRow: '@', 59 | slidesToShow: '@', 60 | slidesToScroll: '@', 61 | speed: '@', 62 | swipe: '@', 63 | swipeToSlide: '@', 64 | touchMove: '@', 65 | touchThreshold: '@', 66 | useCSS: '@', 67 | variableWidth: '@', 68 | vertical: '@', 69 | verticalSwiping: '@', 70 | rtl: '@' 71 | }, 72 | restrict: 'AE', 73 | link: function (scope, element, attr) { 74 | //hide slider 75 | angular.element(element).css('display', 'none'); 76 | 77 | var options, initOptions, destroy, init, destroyAndInit, currentIndex; 78 | 79 | initOptions = function () { 80 | options = angular.extend(angular.copy(slickCarouselConfig), { 81 | enabled: scope.enabled !== 'false', 82 | accessibility: scope.accessibility !== 'false', 83 | adaptiveHeight: scope.adaptiveHeight === 'true', 84 | autoplay: scope.autoplay === 'true', 85 | autoplaySpeed: scope.autoplaySpeed != null ? parseInt(scope.autoplaySpeed, 10) : 3000, 86 | arrows: scope.arrows !== 'false', 87 | asNavFor: scope.asNavFor ? scope.asNavFor : void 0, 88 | appendArrows: scope.appendArrows ? angular.element(scope.appendArrows) : angular.element(element), 89 | prevArrow: scope.prevArrow ? angular.element(scope.prevArrow) : void 0, 90 | nextArrow: scope.nextArrow ? angular.element(scope.nextArrow) : void 0, 91 | centerMode: scope.centerMode === 'true', 92 | centerPadding: scope.centerPadding || '50px', 93 | cssEase: scope.cssEase || 'ease', 94 | customPaging: attr.customPaging ? function (slick, index) { 95 | return scope.customPaging({slick: slick, index: index}); 96 | } : void 0, 97 | dots: scope.dots === 'true', 98 | draggable: scope.draggable !== 'false', 99 | fade: scope.fade === 'true', 100 | focusOnSelect: scope.focusOnSelect === 'true', 101 | easing: scope.easing || 'linear', 102 | edgeFriction: scope.edgeFriction || 0.15, 103 | infinite: scope.infinite !== 'false', 104 | initialSlide: parseInt(scope.initialSlide) || 0, 105 | lazyLoad: scope.lazyLoad || 'ondemand', 106 | mobileFirst: scope.mobileFirst === 'true', 107 | pauseOnHover: scope.pauseOnHover !== 'false', 108 | pauseOnDotsHover: scope.pauseOnDotsHover === "true", 109 | respondTo: scope.respondTo != null ? scope.respondTo : 'window', 110 | responsive: scope.responsive || void 0, 111 | rows: scope.rows != null ? parseInt(scope.rows, 10) : 1, 112 | slide: scope.slide || '', 113 | slidesPerRow: scope.slidesPerRow != null ? parseInt(scope.slidesPerRow, 10) : 1, 114 | slidesToShow: scope.slidesToShow != null ? parseInt(scope.slidesToShow, 10) : 1, 115 | slidesToScroll: scope.slidesToScroll != null ? parseInt(scope.slidesToScroll, 10) : 1, 116 | speed: scope.speed != null ? parseInt(scope.speed, 10) : 300, 117 | swipe: scope.swipe !== 'false', 118 | swipeToSlide: scope.swipeToSlide === 'true', 119 | touchMove: scope.touchMove !== 'false', 120 | touchThreshold: scope.touchThreshold ? parseInt(scope.touchThreshold, 10) : 5, 121 | useCSS: scope.useCSS !== 'false', 122 | variableWidth: scope.variableWidth === 'true', 123 | vertical: scope.vertical === 'true', 124 | verticalSwiping: scope.verticalSwiping === 'true', 125 | rtl: scope.rtl === 'true' 126 | }, scope.settings); 127 | 128 | }; 129 | 130 | destroy = function () { 131 | var slickness = angular.element(element); 132 | if (slickness.hasClass('slick-initialized')) { 133 | slickness.remove('slick-list'); 134 | slickness.slick('unslick'); 135 | } 136 | 137 | return slickness; 138 | }; 139 | 140 | init = function () { 141 | initOptions(); 142 | 143 | var slickness = angular.element(element); 144 | 145 | if (angular.element(element).hasClass('slick-initialized')) { 146 | if (options.enabled) { 147 | return slickness.slick('getSlick'); 148 | } else { 149 | destroy(); 150 | } 151 | } else { 152 | if (!options.enabled) { 153 | return; 154 | } 155 | // Event 156 | slickness.on('init', function (event, slick) { 157 | if (typeof options.event.init !== 'undefined') { 158 | options.event.init(event, slick); 159 | } 160 | if (typeof currentIndex !== 'undefined') { 161 | return slick.slideHandler(currentIndex); 162 | } 163 | }); 164 | 165 | $timeout(function () { 166 | angular.element(element).css('display', 'block'); 167 | slickness.not('.slick-initialized').slick(options); 168 | }); 169 | } 170 | 171 | scope.internalControl = options.method || {}; 172 | 173 | // Method 174 | slickMethodList.forEach(function (value) { 175 | scope.internalControl[value] = function () { 176 | var args; 177 | args = Array.prototype.slice.call(arguments); 178 | args.unshift(value); 179 | slickness.slick.apply(element, args); 180 | }; 181 | }); 182 | 183 | // Event 184 | slickness.on('afterChange', function (event, slick, currentSlide) { 185 | currentIndex = currentSlide; 186 | if (typeof options.event.afterChange !== 'undefined') { 187 | $timeout(function () { 188 | scope.$apply(function () { 189 | options.event.afterChange(event, slick, currentSlide); 190 | }); 191 | }); 192 | } 193 | }); 194 | 195 | slickness.on('beforeChange', function (event, slick, currentSlide, nextSlide) { 196 | if (typeof options.event.beforeChange !== 'undefined') { 197 | $timeout(function () { 198 | $timeout(function () { 199 | scope.$apply(function () { 200 | options.event.beforeChange(event, slick, currentSlide, nextSlide); 201 | }); 202 | }); 203 | }); 204 | } 205 | }); 206 | 207 | slickness.on('reInit', function (event, slick) { 208 | if (typeof options.event.reInit !== 'undefined') { 209 | $timeout(function () { 210 | scope.$apply(function () { 211 | options.event.reInit(event, slick); 212 | }); 213 | }); 214 | } 215 | }); 216 | 217 | if (typeof options.event.breakpoint !== 'undefined') { 218 | slickness.on('breakpoint', function (event, slick, breakpoint) { 219 | $timeout(function () { 220 | scope.$apply(function () { 221 | options.event.breakpoint(event, slick, breakpoint); 222 | }); 223 | }); 224 | }); 225 | } 226 | if (typeof options.event.destroy !== 'undefined') { 227 | slickness.on('destroy', function (event, slick) { 228 | $timeout(function () { 229 | scope.$apply(function () { 230 | options.event.destroy(event, slick); 231 | }); 232 | }); 233 | }); 234 | } 235 | if (typeof options.event.edge !== 'undefined') { 236 | slickness.on('edge', function (event, slick, direction) { 237 | $timeout(function () { 238 | scope.$apply(function () { 239 | options.event.edge(event, slick, direction); 240 | }); 241 | }); 242 | }); 243 | } 244 | 245 | if (typeof options.event.setPosition !== 'undefined') { 246 | slickness.on('setPosition', function (event, slick) { 247 | $timeout(function () { 248 | scope.$apply(function () { 249 | options.event.setPosition(event, slick); 250 | }); 251 | }); 252 | }); 253 | } 254 | if (typeof options.event.swipe !== 'undefined') { 255 | slickness.on('swipe', function (event, slick, direction) { 256 | $timeout(function () { 257 | scope.$apply(function () { 258 | options.event.swipe(event, slick, direction); 259 | }); 260 | }); 261 | }); 262 | } 263 | if (typeof options.event.lazyLoaded !== 'undefined') { 264 | slickness.on('lazyLoaded', function (event, slick, image, imageSource) { 265 | $timeout(function () { 266 | scope.$apply(function () { 267 | options.event.lazyLoaded(event, slick, image, imageSource); 268 | }); 269 | }); 270 | }); 271 | } 272 | if (typeof options.event.lazyLoadError !== 'undefined') { 273 | slickness.on('lazyLoadError', function (event, slick, image, imageSource) { 274 | $timeout(function () { 275 | scope.$apply(function () { 276 | options.event.lazyLoadError(event, slick, image, imageSource); 277 | }); 278 | }); 279 | }); 280 | } 281 | }; 282 | 283 | destroyAndInit = function () { 284 | destroy(); 285 | init(); 286 | }; 287 | 288 | element.one('$destroy', function () { 289 | destroy(); 290 | }); 291 | 292 | return scope.$watch('settings', function (newVal, oldVal) { 293 | if (newVal !== null) { 294 | return destroyAndInit(); 295 | } 296 | }, true); 297 | 298 | } 299 | }; 300 | } 301 | ]); 302 | --------------------------------------------------------------------------------