├── .bowerrc ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .jshintrc ├── Gruntfile.js ├── LICENCE ├── README.md ├── app ├── .buildignore ├── .htaccess ├── 404.html ├── favicon.ico ├── images │ ├── fonz1.png │ ├── fonz2.png │ ├── fonz3.png │ ├── lazyfonz1.png │ ├── lazyfonz2.png │ ├── lazyfonz3.png │ ├── lazyfonz4.png │ ├── lazyfonz5.png │ ├── lazyfonz6.png │ └── slick.gif ├── index.html ├── robots.txt ├── scripts │ ├── app.coffee │ └── controllers │ │ └── main.coffee ├── styles │ ├── main.css │ ├── pacifico.eot │ ├── pacifico.svg │ ├── pacifico.ttf │ └── pacifico.woff └── views │ └── main.html ├── bower.json ├── dist ├── slick.js └── slick.min.js └── package.json /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "app/bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .tmp 3 | .sass-cache 4 | app/bower_components 5 | other 6 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "regexp": true, 16 | "undef": true, 17 | "unused": true, 18 | "strict": true, 19 | "trailing": true, 20 | "smarttabs": true, 21 | "globals": { 22 | "angular": false 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | // Generated on 2014-04-13 using generator-angular 0.7.1 2 | 'use strict'; 3 | 4 | // # Globbing 5 | // for performance reasons we're only matching one level down: 6 | // 'test/spec/{,*/}*.js' 7 | // use this if you want to recursively match all subfolders: 8 | // 'test/spec/**/*.js' 9 | 10 | module.exports = function (grunt) { 11 | 12 | // Load grunt tasks automatically 13 | require('load-grunt-tasks')(grunt); 14 | 15 | // Time how long tasks take. Can help when optimizing build times 16 | require('time-grunt')(grunt); 17 | 18 | // Define the configuration for all the tasks 19 | grunt.initConfig({ 20 | 21 | bower: grunt.file.readJSON('bower.json'), 22 | 23 | // Project settings 24 | yeoman: { 25 | // configurable paths 26 | app: require('./bower.json').appPath || 'app', 27 | dist: 'dist' 28 | }, 29 | 30 | // Watches files for changes and runs tasks based on the changed files 31 | watch: { 32 | coffee: { 33 | files: ['<%= yeoman.app %>/scripts/{,*/}*.{coffee,litcoffee,coffee.md}'], 34 | tasks: ['newer:coffee:dist'] 35 | }, 36 | coffeeTest: { 37 | files: ['test/spec/{,*/}*.{coffee,litcoffee,coffee.md}'], 38 | tasks: ['newer:coffee:test', 'karma'] 39 | }, 40 | styles: { 41 | files: ['<%= yeoman.app %>/styles/{,*/}*.css'], 42 | tasks: ['newer:copy:styles', 'autoprefixer'] 43 | }, 44 | gruntfile: { 45 | files: ['Gruntfile.js'] 46 | }, 47 | livereload: { 48 | options: { 49 | livereload: '<%= connect.options.livereload %>' 50 | }, 51 | files: [ 52 | '<%= yeoman.app %>/{,*/}*.html', 53 | '.tmp/styles/{,*/}*.css', 54 | '.tmp/scripts/{,*/}*.js', 55 | '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 56 | ] 57 | } 58 | }, 59 | 60 | // The actual grunt server settings 61 | connect: { 62 | options: { 63 | port: 9000, 64 | // Change this to '0.0.0.0' to access the server from outside. 65 | hostname: 'localhost', 66 | livereload: 35729 67 | }, 68 | livereload: { 69 | options: { 70 | open: true, 71 | base: [ 72 | '.tmp', 73 | '<%= yeoman.app %>' 74 | ] 75 | } 76 | }, 77 | test: { 78 | options: { 79 | port: 9001, 80 | base: [ 81 | '.tmp', 82 | 'test', 83 | '<%= yeoman.app %>' 84 | ] 85 | } 86 | }, 87 | dist: { 88 | options: { 89 | base: '<%= yeoman.dist %>' 90 | } 91 | } 92 | }, 93 | 94 | // Make sure code styles are up to par and there are no obvious mistakes 95 | jshint: { 96 | options: { 97 | jshintrc: '.jshintrc', 98 | reporter: require('jshint-stylish') 99 | }, 100 | all: [ 101 | 'Gruntfile.js' 102 | ] 103 | }, 104 | 105 | // Empties folders to start fresh 106 | clean: { 107 | dist: { 108 | files: [{ 109 | dot: true, 110 | src: [ 111 | '.tmp', 112 | '<%= yeoman.dist %>/*', 113 | '!<%= yeoman.dist %>/.git*' 114 | ] 115 | }] 116 | }, 117 | server: '.tmp' 118 | }, 119 | 120 | // Add vendor prefixed styles 121 | autoprefixer: { 122 | options: { 123 | browsers: ['last 1 version'] 124 | }, 125 | dist: { 126 | files: [{ 127 | expand: true, 128 | cwd: '.tmp/styles/', 129 | src: '{,*/}*.css', 130 | dest: '.tmp/styles/' 131 | }] 132 | } 133 | }, 134 | 135 | // Automatically inject Bower components into the app 136 | 'bower-install': { 137 | app: { 138 | html: '<%= yeoman.app %>/index.html', 139 | ignorePath: '<%= yeoman.app %>/' 140 | } 141 | }, 142 | 143 | 144 | // Compiles CoffeeScript to JavaScript 145 | coffee: { 146 | options: { 147 | sourceMap: false, 148 | sourceRoot: '', 149 | bare: true 150 | }, 151 | dist: { 152 | files: [{ 153 | expand: true, 154 | cwd: '<%= yeoman.app %>/scripts', 155 | src: '{,*/}*.coffee', 156 | dest: '.tmp/scripts', 157 | ext: '.js' 158 | }] 159 | }, 160 | test: { 161 | files: [{ 162 | expand: true, 163 | cwd: 'test/spec', 164 | src: '{,*/}*.coffee', 165 | dest: '.tmp/spec', 166 | ext: '.js' 167 | }] 168 | } 169 | }, 170 | 171 | 172 | 173 | // Renames files for browser caching purposes 174 | rev: { 175 | dist: { 176 | files: { 177 | src: [ 178 | '<%= yeoman.dist %>/scripts/{,*/}*.js', 179 | '<%= yeoman.dist %>/styles/{,*/}*.css', 180 | '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 181 | '<%= yeoman.dist %>/styles/fonts/*' 182 | ] 183 | } 184 | } 185 | }, 186 | 187 | // Reads HTML for usemin blocks to enable smart builds that automatically 188 | // concat, minify and revision files. Creates configurations in memory so 189 | // additional tasks can operate on them 190 | useminPrepare: { 191 | html: '<%= yeoman.app %>/index.html', 192 | options: { 193 | dest: '<%= yeoman.dist %>' 194 | } 195 | }, 196 | 197 | // Performs rewrites based on rev and the useminPrepare configuration 198 | usemin: { 199 | html: ['<%= yeoman.dist %>/{,*/}*.html'], 200 | css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 201 | options: { 202 | assetsDirs: ['<%= yeoman.dist %>'] 203 | } 204 | }, 205 | 206 | // The following *-min tasks produce minified files in the dist folder 207 | imagemin: { 208 | dist: { 209 | files: [{ 210 | expand: true, 211 | cwd: '<%= yeoman.app %>/images', 212 | src: '{,*/}*.{png,jpg,jpeg,gif}', 213 | dest: '<%= yeoman.dist %>/images' 214 | }] 215 | } 216 | }, 217 | svgmin: { 218 | dist: { 219 | files: [{ 220 | expand: true, 221 | cwd: '<%= yeoman.app %>/images', 222 | src: '{,*/}*.svg', 223 | dest: '<%= yeoman.dist %>/images' 224 | }] 225 | } 226 | }, 227 | htmlmin: { 228 | dist: { 229 | options: { 230 | collapseWhitespace: true, 231 | collapseBooleanAttributes: true, 232 | removeCommentsFromCDATA: true, 233 | removeOptionalTags: true 234 | }, 235 | files: [{ 236 | expand: true, 237 | cwd: '<%= yeoman.dist %>', 238 | src: ['*.html', 'views/{,*/}*.html'], 239 | dest: '<%= yeoman.dist %>' 240 | }] 241 | } 242 | }, 243 | 244 | // Allow the use of non-minsafe AngularJS files. Automatically makes it 245 | // minsafe compatible so Uglify does not destroy the ng references 246 | ngmin: { 247 | dist: { 248 | files: [{ 249 | expand: true, 250 | cwd: '.tmp/concat/scripts', 251 | src: '*.js', 252 | dest: '<%= yeoman.dist %>' 253 | }] 254 | } 255 | }, 256 | 257 | // Replace Google CDN references 258 | cdnify: { 259 | dist: { 260 | html: ['<%= yeoman.dist %>/*.html'] 261 | } 262 | }, 263 | 264 | // Copies remaining files to places other tasks can use 265 | copy: { 266 | dist: { 267 | files: [{ 268 | expand: true, 269 | dot: true, 270 | cwd: '<%= yeoman.app %>', 271 | dest: '<%= yeoman.dist %>', 272 | src: [ 273 | '*.{ico,png,txt}', 274 | '.htaccess', 275 | '*.html', 276 | 'views/{,*/}*.html', 277 | 'bower_components/**/*', 278 | 'images/{,*/}*.{webp}', 279 | 'fonts/*' 280 | ] 281 | }, { 282 | expand: true, 283 | cwd: '.tmp/images', 284 | dest: '<%= yeoman.dist %>/images', 285 | src: ['generated/*'] 286 | }] 287 | }, 288 | styles: { 289 | expand: true, 290 | cwd: '<%= yeoman.app %>/styles', 291 | dest: '.tmp/styles/', 292 | src: '{,*/}*.css' 293 | } 294 | }, 295 | 296 | // Run some tasks in parallel to speed up the build process 297 | concurrent: { 298 | server: [ 299 | 'coffee:dist', 300 | 'copy:styles' 301 | ], 302 | test: [ 303 | 'coffee', 304 | 'copy:styles' 305 | ], 306 | dist: [ 307 | 'coffee', 308 | 'copy:styles', 309 | 'imagemin', 310 | 'svgmin' 311 | ] 312 | }, 313 | 314 | // By default, your `index.html`'s will take care of 315 | // minification. These next options are pre-configured if you do not wish 316 | // to use the Usemin blocks. 317 | // cssmin: { 318 | // dist: { 319 | // files: { 320 | // '<%= yeoman.dist %>/styles/main.css': [ 321 | // '.tmp/styles/{,*/}*.css', 322 | // '<%= yeoman.app %>/styles/{,*/}*.css' 323 | // ] 324 | // } 325 | // } 326 | // }, 327 | uglify: { 328 | options: { 329 | banner: '/*! <%= bower.name %> v<%= bower.version %> */\n' 330 | }, 331 | dist: { 332 | files: { 333 | '<%= yeoman.dist %>/slick.min.js': [ 334 | '<%= yeoman.dist %>/slick.js' 335 | ] 336 | } 337 | } 338 | }, 339 | // concat: { 340 | // dist: {} 341 | // }, 342 | 343 | // Test settings 344 | karma: { 345 | unit: { 346 | configFile: 'karma.conf.js', 347 | singleRun: true 348 | } 349 | } 350 | }); 351 | 352 | 353 | grunt.registerTask('serve', function (target) { 354 | if (target === 'dist') { 355 | return grunt.task.run(['build', 'connect:dist:keepalive']); 356 | } 357 | 358 | grunt.task.run([ 359 | 'clean:server', 360 | // 'bower-install', 361 | 'concurrent:server', 362 | 'autoprefixer', 363 | 'connect:livereload', 364 | 'watch' 365 | ]); 366 | }); 367 | 368 | grunt.registerTask('server', function () { 369 | grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 370 | grunt.task.run(['serve']); 371 | }); 372 | 373 | grunt.registerTask('test', [ 374 | 'clean:server', 375 | 'concurrent:test', 376 | 'autoprefixer', 377 | 'connect:test', 378 | 'karma' 379 | ]); 380 | 381 | grunt.registerTask('build', [ 382 | 'clean:dist', 383 | 'useminPrepare', 384 | 'coffee:dist', 385 | 'concat', 386 | 'ngmin', 387 | 'uglify:dist' 388 | ]); 389 | 390 | grunt.registerTask('default', [ 391 | 'newer:jshint', 392 | 'test', 393 | 'build' 394 | ]); 395 | }; 396 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Vasyl Stanislavchuk 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-slick 2 | ============= 3 | 4 | Angular directive for [slick](https://github.com/kenwheeler/slick/) jquery carousel. Demo is [here](http://vasyabigi.github.io/angular-slick/). 5 | 6 | ### Usage: 7 | 8 | - Install: `bower install angular-slick` 9 | - Add `jquery`, `angular`, `slick-carousel` and `angular-slick` to your code: 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | ``` 19 | 20 | - Add a dependency to the `slick` module in your application. 21 | 22 | ```js 23 | angular.module('MyApp', ['slick']); 24 | ``` 25 | 26 | - Add a `slick` element to your html: 27 | 28 | ```html 29 | 30 | ... 31 | 32 | 33 | 34 | ... 35 | 36 | 37 | 38 | ... 39 | 40 | ``` 41 | 42 | - For initialization carousel after data is loaded use `init-onload` property. Example: 43 | 44 | ```html 45 | 46 | ... 47 | 48 | ``` 49 | 50 | - If you wanna read about possible settings, go [here](http://kenwheeler.github.io/slick/#settings). 51 | 52 | That's it! 53 | -------------------------------------------------------------------------------- /app/.buildignore: -------------------------------------------------------------------------------- 1 | *.coffee -------------------------------------------------------------------------------- /app/.htaccess: -------------------------------------------------------------------------------- 1 | # Apache Configuration File 2 | 3 | # (!) Using `.htaccess` files slows down Apache, therefore, if you have access 4 | # to the main server config file (usually called `httpd.conf`), you should add 5 | # this logic there: http://httpd.apache.org/docs/current/howto/htaccess.html. 6 | 7 | # ############################################################################## 8 | # # CROSS-ORIGIN RESOURCE SHARING (CORS) # 9 | # ############################################################################## 10 | 11 | # ------------------------------------------------------------------------------ 12 | # | Cross-domain AJAX requests | 13 | # ------------------------------------------------------------------------------ 14 | 15 | # Enable cross-origin AJAX requests. 16 | # http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity 17 | # http://enable-cors.org/ 18 | 19 | # 20 | # Header set Access-Control-Allow-Origin "*" 21 | # 22 | 23 | # ------------------------------------------------------------------------------ 24 | # | CORS-enabled images | 25 | # ------------------------------------------------------------------------------ 26 | 27 | # Send the CORS header for images when browsers request it. 28 | # https://developer.mozilla.org/en/CORS_Enabled_Image 29 | # http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html 30 | # http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ 31 | 32 | 33 | 34 | 35 | SetEnvIf Origin ":" IS_CORS 36 | Header set Access-Control-Allow-Origin "*" env=IS_CORS 37 | 38 | 39 | 40 | 41 | # ------------------------------------------------------------------------------ 42 | # | Web fonts access | 43 | # ------------------------------------------------------------------------------ 44 | 45 | # Allow access from all domains for web fonts 46 | 47 | 48 | 49 | Header set Access-Control-Allow-Origin "*" 50 | 51 | 52 | 53 | 54 | # ############################################################################## 55 | # # ERRORS # 56 | # ############################################################################## 57 | 58 | # ------------------------------------------------------------------------------ 59 | # | 404 error prevention for non-existing redirected folders | 60 | # ------------------------------------------------------------------------------ 61 | 62 | # Prevent Apache from returning a 404 error for a rewrite if a directory 63 | # with the same name does not exist. 64 | # http://httpd.apache.org/docs/current/content-negotiation.html#multiviews 65 | # http://www.webmasterworld.com/apache/3808792.htm 66 | 67 | Options -MultiViews 68 | 69 | # ------------------------------------------------------------------------------ 70 | # | Custom error messages / pages | 71 | # ------------------------------------------------------------------------------ 72 | 73 | # You can customize what Apache returns to the client in case of an error (see 74 | # http://httpd.apache.org/docs/current/mod/core.html#errordocument), e.g.: 75 | 76 | ErrorDocument 404 /404.html 77 | 78 | 79 | # ############################################################################## 80 | # # INTERNET EXPLORER # 81 | # ############################################################################## 82 | 83 | # ------------------------------------------------------------------------------ 84 | # | Better website experience | 85 | # ------------------------------------------------------------------------------ 86 | 87 | # Force IE to render pages in the highest available mode in the various 88 | # cases when it may not: http://hsivonen.iki.fi/doctype/ie-mode.pdf. 89 | 90 | 91 | Header set X-UA-Compatible "IE=edge" 92 | # `mod_headers` can't match based on the content-type, however, we only 93 | # want to send this header for HTML pages and not for the other resources 94 | 95 | Header unset X-UA-Compatible 96 | 97 | 98 | 99 | # ------------------------------------------------------------------------------ 100 | # | Cookie setting from iframes | 101 | # ------------------------------------------------------------------------------ 102 | 103 | # Allow cookies to be set from iframes in IE. 104 | 105 | # 106 | # Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"" 107 | # 108 | 109 | # ------------------------------------------------------------------------------ 110 | # | Screen flicker | 111 | # ------------------------------------------------------------------------------ 112 | 113 | # Stop screen flicker in IE on CSS rollovers (this only works in 114 | # combination with the `ExpiresByType` directives for images from below). 115 | 116 | # BrowserMatch "MSIE" brokenvary=1 117 | # BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1 118 | # BrowserMatch "Opera" !brokenvary 119 | # SetEnvIf brokenvary 1 force-no-vary 120 | 121 | 122 | # ############################################################################## 123 | # # MIME TYPES AND ENCODING # 124 | # ############################################################################## 125 | 126 | # ------------------------------------------------------------------------------ 127 | # | Proper MIME types for all files | 128 | # ------------------------------------------------------------------------------ 129 | 130 | 131 | 132 | # Audio 133 | AddType audio/mp4 m4a f4a f4b 134 | AddType audio/ogg oga ogg 135 | 136 | # JavaScript 137 | # Normalize to standard type (it's sniffed in IE anyways): 138 | # http://tools.ietf.org/html/rfc4329#section-7.2 139 | AddType application/javascript js jsonp 140 | AddType application/json json 141 | 142 | # Video 143 | AddType video/mp4 mp4 m4v f4v f4p 144 | AddType video/ogg ogv 145 | AddType video/webm webm 146 | AddType video/x-flv flv 147 | 148 | # Web fonts 149 | AddType application/font-woff woff 150 | AddType application/vnd.ms-fontobject eot 151 | 152 | # Browsers usually ignore the font MIME types and sniff the content, 153 | # however, Chrome shows a warning if other MIME types are used for the 154 | # following fonts. 155 | AddType application/x-font-ttf ttc ttf 156 | AddType font/opentype otf 157 | 158 | # Make SVGZ fonts work on iPad: 159 | # https://twitter.com/FontSquirrel/status/14855840545 160 | AddType image/svg+xml svg svgz 161 | AddEncoding gzip svgz 162 | 163 | # Other 164 | AddType application/octet-stream safariextz 165 | AddType application/x-chrome-extension crx 166 | AddType application/x-opera-extension oex 167 | AddType application/x-shockwave-flash swf 168 | AddType application/x-web-app-manifest+json webapp 169 | AddType application/x-xpinstall xpi 170 | AddType application/xml atom rdf rss xml 171 | AddType image/webp webp 172 | AddType image/x-icon ico 173 | AddType text/cache-manifest appcache manifest 174 | AddType text/vtt vtt 175 | AddType text/x-component htc 176 | AddType text/x-vcard vcf 177 | 178 | 179 | 180 | # ------------------------------------------------------------------------------ 181 | # | UTF-8 encoding | 182 | # ------------------------------------------------------------------------------ 183 | 184 | # Use UTF-8 encoding for anything served as `text/html` or `text/plain`. 185 | AddDefaultCharset utf-8 186 | 187 | # Force UTF-8 for certain file formats. 188 | 189 | AddCharset utf-8 .atom .css .js .json .rss .vtt .webapp .xml 190 | 191 | 192 | 193 | # ############################################################################## 194 | # # URL REWRITES # 195 | # ############################################################################## 196 | 197 | # ------------------------------------------------------------------------------ 198 | # | Rewrite engine | 199 | # ------------------------------------------------------------------------------ 200 | 201 | # Turning on the rewrite engine and enabling the `FollowSymLinks` option is 202 | # necessary for the following directives to work. 203 | 204 | # If your web host doesn't allow the `FollowSymlinks` option, you may need to 205 | # comment it out and use `Options +SymLinksIfOwnerMatch` but, be aware of the 206 | # performance impact: http://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks 207 | 208 | # Also, some cloud hosting services require `RewriteBase` to be set: 209 | # http://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-mod-rewrite-not-working-on-my-site 210 | 211 | 212 | Options +FollowSymlinks 213 | # Options +SymLinksIfOwnerMatch 214 | RewriteEngine On 215 | # RewriteBase / 216 | 217 | 218 | # ------------------------------------------------------------------------------ 219 | # | Suppressing / Forcing the "www." at the beginning of URLs | 220 | # ------------------------------------------------------------------------------ 221 | 222 | # The same content should never be available under two different URLs especially 223 | # not with and without "www." at the beginning. This can cause SEO problems 224 | # (duplicate content), therefore, you should choose one of the alternatives and 225 | # redirect the other one. 226 | 227 | # By default option 1 (no "www.") is activated: 228 | # http://no-www.org/faq.php?q=class_b 229 | 230 | # If you'd prefer to use option 2, just comment out all the lines from option 1 231 | # and uncomment the ones from option 2. 232 | 233 | # IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME! 234 | 235 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 236 | 237 | # Option 1: rewrite www.example.com → example.com 238 | 239 | 240 | RewriteCond %{HTTPS} !=on 241 | RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] 242 | RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L] 243 | 244 | 245 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 246 | 247 | # Option 2: rewrite example.com → www.example.com 248 | 249 | # Be aware that the following might not be a good idea if you use "real" 250 | # subdomains for certain parts of your website. 251 | 252 | # 253 | # RewriteCond %{HTTPS} !=on 254 | # RewriteCond %{HTTP_HOST} !^www\..+$ [NC] 255 | # RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 256 | # 257 | 258 | 259 | # ############################################################################## 260 | # # SECURITY # 261 | # ############################################################################## 262 | 263 | # ------------------------------------------------------------------------------ 264 | # | Content Security Policy (CSP) | 265 | # ------------------------------------------------------------------------------ 266 | 267 | # You can mitigate the risk of cross-site scripting and other content-injection 268 | # attacks by setting a Content Security Policy which whitelists trusted sources 269 | # of content for your site. 270 | 271 | # The example header below allows ONLY scripts that are loaded from the current 272 | # site's origin (no inline scripts, no CDN, etc). This almost certainly won't 273 | # work as-is for your site! 274 | 275 | # To get all the details you'll need to craft a reasonable policy for your site, 276 | # read: http://html5rocks.com/en/tutorials/security/content-security-policy (or 277 | # see the specification: http://w3.org/TR/CSP). 278 | 279 | # 280 | # Header set Content-Security-Policy "script-src 'self'; object-src 'self'" 281 | # 282 | # Header unset Content-Security-Policy 283 | # 284 | # 285 | 286 | # ------------------------------------------------------------------------------ 287 | # | File access | 288 | # ------------------------------------------------------------------------------ 289 | 290 | # Block access to directories without a default document. 291 | # Usually you should leave this uncommented because you shouldn't allow anyone 292 | # to surf through every directory on your server (which may includes rather 293 | # private places like the CMS's directories). 294 | 295 | 296 | Options -Indexes 297 | 298 | 299 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 300 | 301 | # Block access to hidden files and directories. 302 | # This includes directories used by version control systems such as Git and SVN. 303 | 304 | 305 | RewriteCond %{SCRIPT_FILENAME} -d [OR] 306 | RewriteCond %{SCRIPT_FILENAME} -f 307 | RewriteRule "(^|/)\." - [F] 308 | 309 | 310 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 311 | 312 | # Block access to backup and source files. 313 | # These files may be left by some text editors and can pose a great security 314 | # danger when anyone has access to them. 315 | 316 | 317 | Order allow,deny 318 | Deny from all 319 | Satisfy All 320 | 321 | 322 | # ------------------------------------------------------------------------------ 323 | # | Secure Sockets Layer (SSL) | 324 | # ------------------------------------------------------------------------------ 325 | 326 | # Rewrite secure requests properly to prevent SSL certificate warnings, e.g.: 327 | # prevent `https://www.example.com` when your certificate only allows 328 | # `https://secure.example.com`. 329 | 330 | # 331 | # RewriteCond %{SERVER_PORT} !^443 332 | # RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L] 333 | # 334 | 335 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 336 | 337 | # Force client-side SSL redirection. 338 | 339 | # If a user types "example.com" in his browser, the above rule will redirect him 340 | # to the secure version of the site. That still leaves a window of opportunity 341 | # (the initial HTTP connection) for an attacker to downgrade or redirect the 342 | # request. The following header ensures that browser will ONLY connect to your 343 | # server via HTTPS, regardless of what the users type in the address bar. 344 | # http://www.html5rocks.com/en/tutorials/security/transport-layer-security/ 345 | 346 | # 347 | # Header set Strict-Transport-Security max-age=16070400; 348 | # 349 | 350 | # ------------------------------------------------------------------------------ 351 | # | Server software information | 352 | # ------------------------------------------------------------------------------ 353 | 354 | # Avoid displaying the exact Apache version number, the description of the 355 | # generic OS-type and the information about Apache's compiled-in modules. 356 | 357 | # ADD THIS DIRECTIVE IN THE `httpd.conf` AS IT WILL NOT WORK IN THE `.htaccess`! 358 | 359 | # ServerTokens Prod 360 | 361 | 362 | # ############################################################################## 363 | # # WEB PERFORMANCE # 364 | # ############################################################################## 365 | 366 | # ------------------------------------------------------------------------------ 367 | # | Compression | 368 | # ------------------------------------------------------------------------------ 369 | 370 | 371 | 372 | # Force compression for mangled headers. 373 | # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping 374 | 375 | 376 | SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding 377 | RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding 378 | 379 | 380 | 381 | # Compress all output labeled with one of the following MIME-types 382 | # (for Apache versions below 2.3.7, you don't need to enable `mod_filter` 383 | # and can remove the `` and `` lines 384 | # as `AddOutputFilterByType` is still in the core directives). 385 | 386 | AddOutputFilterByType DEFLATE application/atom+xml \ 387 | application/javascript \ 388 | application/json \ 389 | application/rss+xml \ 390 | application/vnd.ms-fontobject \ 391 | application/x-font-ttf \ 392 | application/x-web-app-manifest+json \ 393 | application/xhtml+xml \ 394 | application/xml \ 395 | font/opentype \ 396 | image/svg+xml \ 397 | image/x-icon \ 398 | text/css \ 399 | text/html \ 400 | text/plain \ 401 | text/x-component \ 402 | text/xml 403 | 404 | 405 | 406 | 407 | # ------------------------------------------------------------------------------ 408 | # | Content transformations | 409 | # ------------------------------------------------------------------------------ 410 | 411 | # Prevent some of the mobile network providers from modifying the content of 412 | # your site: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5. 413 | 414 | # 415 | # Header set Cache-Control "no-transform" 416 | # 417 | 418 | # ------------------------------------------------------------------------------ 419 | # | ETag removal | 420 | # ------------------------------------------------------------------------------ 421 | 422 | # Since we're sending far-future expires headers (see below), ETags can 423 | # be removed: http://developer.yahoo.com/performance/rules.html#etags. 424 | 425 | # `FileETag None` is not enough for every server. 426 | 427 | Header unset ETag 428 | 429 | 430 | FileETag None 431 | 432 | # ------------------------------------------------------------------------------ 433 | # | Expires headers (for better cache control) | 434 | # ------------------------------------------------------------------------------ 435 | 436 | # The following expires headers are set pretty far in the future. If you don't 437 | # control versioning with filename-based cache busting, consider lowering the 438 | # cache time for resources like CSS and JS to something like 1 week. 439 | 440 | 441 | 442 | ExpiresActive on 443 | ExpiresDefault "access plus 1 month" 444 | 445 | # CSS 446 | ExpiresByType text/css "access plus 1 year" 447 | 448 | # Data interchange 449 | ExpiresByType application/json "access plus 0 seconds" 450 | ExpiresByType application/xml "access plus 0 seconds" 451 | ExpiresByType text/xml "access plus 0 seconds" 452 | 453 | # Favicon (cannot be renamed!) 454 | ExpiresByType image/x-icon "access plus 1 week" 455 | 456 | # HTML components (HTCs) 457 | ExpiresByType text/x-component "access plus 1 month" 458 | 459 | # HTML 460 | ExpiresByType text/html "access plus 0 seconds" 461 | 462 | # JavaScript 463 | ExpiresByType application/javascript "access plus 1 year" 464 | 465 | # Manifest files 466 | ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 467 | ExpiresByType text/cache-manifest "access plus 0 seconds" 468 | 469 | # Media 470 | ExpiresByType audio/ogg "access plus 1 month" 471 | ExpiresByType image/gif "access plus 1 month" 472 | ExpiresByType image/jpeg "access plus 1 month" 473 | ExpiresByType image/png "access plus 1 month" 474 | ExpiresByType video/mp4 "access plus 1 month" 475 | ExpiresByType video/ogg "access plus 1 month" 476 | ExpiresByType video/webm "access plus 1 month" 477 | 478 | # Web feeds 479 | ExpiresByType application/atom+xml "access plus 1 hour" 480 | ExpiresByType application/rss+xml "access plus 1 hour" 481 | 482 | # Web fonts 483 | ExpiresByType application/font-woff "access plus 1 month" 484 | ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 485 | ExpiresByType application/x-font-ttf "access plus 1 month" 486 | ExpiresByType font/opentype "access plus 1 month" 487 | ExpiresByType image/svg+xml "access plus 1 month" 488 | 489 | 490 | 491 | # ------------------------------------------------------------------------------ 492 | # | Filename-based cache busting | 493 | # ------------------------------------------------------------------------------ 494 | 495 | # If you're not using a build process to manage your filename version revving, 496 | # you might want to consider enabling the following directives to route all 497 | # requests such as `/css/style.12345.css` to `/css/style.css`. 498 | 499 | # To understand why this is important and a better idea than `*.css?v231`, read: 500 | # http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring 501 | 502 | # 503 | # RewriteCond %{REQUEST_FILENAME} !-f 504 | # RewriteCond %{REQUEST_FILENAME} !-d 505 | # RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L] 506 | # 507 | 508 | # ------------------------------------------------------------------------------ 509 | # | File concatenation | 510 | # ------------------------------------------------------------------------------ 511 | 512 | # Allow concatenation from within specific CSS and JS files, e.g.: 513 | # Inside of `script.combined.js` you could have 514 | # 515 | # 516 | # and they would be included into this single file. 517 | 518 | # 519 | # 520 | # Options +Includes 521 | # AddOutputFilterByType INCLUDES application/javascript application/json 522 | # SetOutputFilter INCLUDES 523 | # 524 | # 525 | # Options +Includes 526 | # AddOutputFilterByType INCLUDES text/css 527 | # SetOutputFilter INCLUDES 528 | # 529 | # 530 | 531 | # ------------------------------------------------------------------------------ 532 | # | Persistent connections | 533 | # ------------------------------------------------------------------------------ 534 | 535 | # Allow multiple requests to be sent over the same TCP connection: 536 | # http://httpd.apache.org/docs/current/en/mod/core.html#keepalive. 537 | 538 | # Enable if you serve a lot of static content but, be aware of the 539 | # possible disadvantages! 540 | 541 | # 542 | # Header set Connection Keep-Alive 543 | # 544 | -------------------------------------------------------------------------------- /app/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found :( 6 | 141 | 142 | 143 |
144 |

Not found :(

145 |

Sorry, but the page you were trying to view does not exist.

146 |

It looks like this was the result of either:

147 | 151 | 154 | 155 |
156 | 157 | 158 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/favicon.ico -------------------------------------------------------------------------------- /app/images/fonz1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/fonz1.png -------------------------------------------------------------------------------- /app/images/fonz2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/fonz2.png -------------------------------------------------------------------------------- /app/images/fonz3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/fonz3.png -------------------------------------------------------------------------------- /app/images/lazyfonz1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/lazyfonz1.png -------------------------------------------------------------------------------- /app/images/lazyfonz2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/lazyfonz2.png -------------------------------------------------------------------------------- /app/images/lazyfonz3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/lazyfonz3.png -------------------------------------------------------------------------------- /app/images/lazyfonz4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/lazyfonz4.png -------------------------------------------------------------------------------- /app/images/lazyfonz5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/lazyfonz5.png -------------------------------------------------------------------------------- /app/images/lazyfonz6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/lazyfonz6.png -------------------------------------------------------------------------------- /app/images/slick.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/images/slick.gif -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 | 32 |
33 | 34 | 35 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /app/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org 2 | 3 | User-agent: * 4 | -------------------------------------------------------------------------------- /app/scripts/app.coffee: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | angular.module('slick', []) 4 | .directive "slick", ($timeout) -> 5 | restrict: "AEC" 6 | scope: 7 | initOnload: "@" 8 | data: "=" 9 | currentIndex: "=" 10 | accessibility: "@" 11 | adaptiveHeight: "@" 12 | arrows: "@" 13 | asNavFor: "@" 14 | appendArrows: "@" 15 | appendDots: "@" 16 | autoplay: "@" 17 | autoplaySpeed: "@" 18 | centerMode: "@" 19 | centerPadding: "@" 20 | cssEase: "@" 21 | customPaging: "&" 22 | dots: "@" 23 | draggable: "@" 24 | easing: "@" 25 | fade: "@" 26 | focusOnSelect: "@" 27 | infinite: "@" 28 | initialSlide: "@" 29 | lazyLoad: "@" 30 | onBeforeChange: "&" 31 | onAfterChange: "&" 32 | onInit: "&" 33 | onReInit: "&" 34 | onSetPosition: "&" 35 | pauseOnHover: "@" 36 | pauseOnDotsHover: "@" 37 | responsive: "=" 38 | rtl: "@" 39 | slide: "@" 40 | slidesToShow: "@" 41 | slidesToScroll: "@" 42 | speed: "@" 43 | swipe: "@" 44 | swipeToSlide: "@" 45 | touchMove: "@" 46 | touchThreshold: "@" 47 | useCSS: "@" 48 | variableWidth: "@" 49 | vertical: "@" 50 | prevArrow:"@" 51 | nextArrow:"@" 52 | 53 | link: (scope, element, attrs) -> 54 | destroySlick = () -> 55 | $timeout(() -> 56 | slider = $(element) 57 | slider.slick('unslick') 58 | slider.find('.slick-list').remove() 59 | slider 60 | ) 61 | initializeSlick = () -> 62 | $timeout(() -> 63 | slider = $(element) 64 | 65 | currentIndex = scope.currentIndex if scope.currentIndex? 66 | 67 | customPaging = (slick, index) -> 68 | scope.customPaging({ slick: slick, index: index }) 69 | 70 | slider.slick 71 | accessibility: scope.accessibility isnt "false" 72 | adaptiveHeight: scope.adaptiveHeight is "true" 73 | arrows: scope.arrows isnt "false" 74 | asNavFor: if scope.asNavFor then scope.asNavFor else undefined 75 | appendArrows: if scope.appendArrows then $(scope.appendArrows) else $(element) 76 | appendDots: if scope.appendDots then $(scope.appendDots) else $(element) 77 | autoplay: scope.autoplay is "true" 78 | autoplaySpeed: if scope.autoplaySpeed? then parseInt(scope.autoplaySpeed, 10) else 3000 79 | centerMode: scope.centerMode is "true" 80 | centerPadding: scope.centerPadding or "50px" 81 | cssEase: scope.cssEase or "ease" 82 | customPaging: if attrs.customPaging then customPaging else undefined 83 | dots: scope.dots is "true" 84 | draggable: scope.draggable isnt "false" 85 | easing: scope.easing or "linear" 86 | fade: scope.fade is "true" 87 | focusOnSelect: scope.focusOnSelect is "true" 88 | infinite: scope.infinite isnt "false" 89 | initialSlide:scope.initialSlide or 0 90 | lazyLoad: scope.lazyLoad or "ondemand" 91 | beforeChange: if attrs.onBeforeChange then scope.onBeforeChange else undefined 92 | onReInit: if attrs.onReInit then scope.onReInit else undefined 93 | onSetPosition: if attrs.onSetPosition then scope.onSetPosition else undefined 94 | pauseOnHover: scope.pauseOnHover isnt "false" 95 | responsive: scope.responsive or undefined 96 | rtl: scope.rtl is "true" 97 | slide: scope.slide or "div" 98 | slidesToShow: if scope.slidesToShow? then parseInt(scope.slidesToShow, 10) else 1 99 | slidesToScroll: if scope.slidesToScroll? then parseInt(scope.slidesToScroll, 10) else 1 100 | speed: if scope.speed? then parseInt(scope.speed, 10) else 300 101 | swipe: scope.swipe isnt "false" 102 | swipeToSlide: scope.swipeToSlide is "true" 103 | touchMove: scope.touchMove isnt "false" 104 | touchThreshold: if scope.touchThreshold then parseInt(scope.touchThreshold, 10) else 5 105 | useCSS: scope.useCSS isnt "false" 106 | variableWidth: scope.variableWidth is "true" 107 | vertical: scope.vertical is "true" 108 | prevArrow: if scope.prevArrow then $(scope.prevArrow) else undefined 109 | nextArrow: if scope.nextArrow then $(scope.nextArrow) else undefined 110 | 111 | 112 | slider.on 'init', (sl) -> 113 | scope.onInit() if attrs.onInit 114 | if currentIndex? 115 | sl.slideHandler(currentIndex) 116 | 117 | slider.on 'afterChange', (event, slick, currentSlide, nextSlide) -> 118 | scope.onAfterChange() if scope.onAfterChange 119 | 120 | if currentIndex? 121 | scope.$apply(-> 122 | currentIndex = currentSlide 123 | scope.currentIndex = currentSlide 124 | ) 125 | 126 | scope.$watch("currentIndex", (newVal, oldVal) -> 127 | if currentIndex? and newVal? and newVal != currentIndex 128 | slider.slick('slickGoTo', newVal) 129 | ) 130 | ) 131 | 132 | if scope.initOnload 133 | isInitialized = false 134 | scope.$watch("data", (newVal, oldVal) -> 135 | if newVal? 136 | if isInitialized 137 | destroySlick() 138 | 139 | initializeSlick() 140 | isInitialized = true 141 | ) 142 | else 143 | initializeSlick() 144 | -------------------------------------------------------------------------------- /app/scripts/controllers/main.coffee: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | angular.module('slick') 4 | .controller 'MainCtrl', ($scope, $timeout) -> 5 | $timeout(() -> 6 | $scope.awesomeThings = [ 7 | 'HTML5' 8 | 'AngularJS' 9 | 'Karma' 10 | 'Slick' 11 | 'Bower' 12 | 'Coffee' 13 | ] 14 | , 1000) 15 | 16 | 17 | $scope.breakpoints = [ 18 | breakpoint: 768 19 | settings: 20 | slidesToShow: 2 21 | slidesToScroll: 2 22 | , 23 | breakpoint: 480 24 | settings: 25 | slidesToShow: 1 26 | slidesToScroll: 1 27 | ] 28 | -------------------------------------------------------------------------------- /app/styles/main.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 | #disqus_thread{margin-top:20px;} 11 | *{-moz-box-sizing:border-box;box-sizing:border-box;} 12 | .blue{background:#3498db;color:#fff;} 13 | .blue h3{background:#fff;color:#3498db;font-size:36px;line-height:100px;margin:10px;padding:2%;position:relative;text-align:center;} 14 | .variable-width .slick-slide p { background: #fff; height: 100px; color:#3498db; margin: 5px; line-height: 100px; } 15 | .button{background:#3498db;color:#fff;display:block;font-size:16px;margin:20px auto;padding:20px;text-align:center;text-decoration:none;width:48%;} 16 | .buttons{padding:0 20px 20px; margin-bottom: 10px;} 17 | .buttons .button{background:#FFF;color:#3498db;float:left;margin:5px;} 18 | .center .slick-center h3{-moz-transform:scale(1.08);-ms-transform:scale(1.08);-o-transform:scale(1.08);-webkit-transform:scale(1.08);color:#e67e22;opacity:1;transform:scale(1.08);} 19 | .center h3{opacity:0.8;transition:all 300ms ease;} 20 | .content{margin:auto;padding:20px;width:600px;} 21 | .content:after,.buttons::after{clear:both;content:"";display:table;} 22 | .destroy{font-weight:400;margin-top:40px;} 23 | .features{display:block;list-style-type:none;margin-top:30px;padding:0;text-align:center;} 24 | .features li{margin:20px 0;} 25 | .filter .button{background:#FFF;color:#3498db; margin-bottom: 40px;} 26 | .fixed-header{background:#FFF;box-shadow:2px 0 5px rgba(0,0,0,0.5);display:none;padding:10px;position:fixed;top:0;width:100%;z-index:10000;} 27 | .fixed-header .header-content{margin:auto;width:600px;} 28 | .fixed-header .subheading{display:none;} 29 | .fixed-header h1.title{float:left;font-size:24px;margin:0;} 30 | .fixed-header ul.nav{float:right;margin:0;padding:5px;} 31 | .fixed-header ul.nav li{margin:0 0 0 10px;} 32 | .header{padding:20px 0;} 33 | .margin-40{margin-bottom:40px;} 34 | .more,.button.first{margin-top:40px;} 35 | .red{background:#e74c3c;color:#fff;} 36 | .slick-slide .image{padding:10px;} 37 | .slick-slide img{border:5px solid #FFF;display:block;width:100%;} 38 | .slick-slide img.slick-loading{border:0 } 39 | .slick-slider{margin:30px auto 50px;} 40 | .subheading{color:#555;font-size:12px;font-style:italic;font-weight:400;margin:10px auto;text-align:center;} 41 | .white{background:#fff;color:#3498db;} 42 | .white pre,.white hr{background:#3498db !important;} 43 | a{color:#3498db;} 44 | body,html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:#fff; font-family: "Lato","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; height:100%;line-height:1;margin:0;padding:0;text-rendering:optimizeLegibility;width:100%;} 45 | code{color:#000; overflow-x: scroll;} 46 | h1{color:#3498db;font-family:Pacifico;font-size:72px;font-weight:400;line-height:1.2;margin:0 auto 10px;text-align:center;} 47 | h1.title{font-size:96px;} 48 | h2{font-family:Pacifico;font-size:36px;margin:20px auto;text-align:center;} 49 | h4{font-family:Pacifico;font-size:28px;margin:20px auto;text-align:center;} 50 | hr{background:#fff;border:0;height:1px;margin:40px 0;} 51 | p{font-size:16px;font-weight:700;line-height:1.5;margin-bottom:40px;text-align:center;} 52 | p.note{font-size: 12px;} 53 | p.cdn{font-size: 14px;} 54 | p.guff{font-size:16px;} 55 | pre{background:#fff;margin:0 10px 20px;padding:10px;} 56 | section{width:100%; position: relative;} 57 | table{font-size:14px;line-height:18px;margin:40px auto 20px; display: block;} 58 | tr { width: 100%; border-right: none; border-bottom: 1px solid #fff; margin: 0px 0px 20px; padding: 0px 0px 20px; background: transparent; float: left; } 59 | thead { display: none; } 60 | td { border: 0; padding: 10px 0px;} 61 | td,tbody { display: block; width: 100% !important;} 62 | table.settings td:nth-of-type(1), table.methods td:nth-of-type(1){font-weight: 700; font-size: 16px; line-height: 18px;} 63 | table.settings td:nth-of-type(2):before{content: 'Type: '; font-weight: 700;} 64 | table.settings td:nth-of-type(3):before{content: 'Default: '; font-weight: 700;} 65 | table.methods td:nth-of-type(2):before{content: 'Arguments: '; font-weight: 700;} 66 | ul.nav{margin-bottom:0;padding-left:0;text-align:center;} 67 | ul.nav li{display:inline-block;list-style-type:none;margin:0 20px;} 68 | ul.nav li a{font-size:14px;text-decoration:none;} 69 | #carbonads { max-width: 320px; width: 100%; color: white; background: white; padding: 20px 20px 20px; margin: 0px auto 40px; text-align: center; position: relative; top: 40px; } 70 | #carbonads a { display: inline-block; margin-bottom: 0px; font-size: 10px; line-height: 1.5; } 71 | #carbonads .carbon-img { margin-bottom: 10px; } 72 | @media (max-width: 420px) { 73 | ul.nav li a{display:block;font-size:14px;} 74 | } 75 | @media (max-width: 768px) { 76 | .blue h3{font-size:24px;} 77 | .button{margin:0 auto 20px;width:auto;} 78 | .button.first{margin-top:40px;} 79 | .buttons{padding:0 0 20px;} 80 | .buttons .button{float:left;font-size:12px;margin:1%;width:48%;} 81 | .center{margin-left:-40px;margin-right:-40px;} 82 | .center .slick-center h3{-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);color:#e67e22;opacity:1;transform:scale(1);} 83 | .center h3{-moz-transform:scale(0.95);-ms-transform:scale(0.95);-o-transform:scale(0.95);-webkit-transform:scale(0.95);opacity:0.8;transform:scale(0.95);transition:all 300ms ease;} 84 | .content{margin:auto;padding:20px 40px;width:auto;} 85 | .fixed-header .header-content{width:auto;} 86 | pre{font-size:12px; overflow-x: scroll;} 87 | table{font-size:14px;line-height:18px;margin:40px auto 20px; display: block; float: left;} 88 | tr { width: 100%; border-right: none; border-bottom: 1px solid #fff; margin: 0px 0px 20px; padding: 0px 0px 20px; background: transparent; float: left; } 89 | thead { display: none; } 90 | td { border: 0; padding: 10px 0px;} 91 | td,tbody { display: block; width: 100% !important;} 92 | table.settings td:nth-of-type(1), table.methods td:nth-of-type(1){font-weight: 700; font-size: 16px; line-height: 18px;} 93 | table.settings td:nth-of-type(2):before{content: 'Type: '; font-weight: 700;} 94 | table.settings td:nth-of-type(3):before{content: 'Default: '; font-weight: 700;} 95 | table.methods td:nth-of-type(2):before{content: 'Arguments: '; font-weight: 700;} 96 | } 97 | -------------------------------------------------------------------------------- /app/styles/pacifico.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/styles/pacifico.eot -------------------------------------------------------------------------------- /app/styles/pacifico.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/styles/pacifico.ttf -------------------------------------------------------------------------------- /app/styles/pacifico.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vasyabigi/angular-slick/1d3215bb32fbdd2ccf311fd49e80db1f1ec415df/app/styles/pacifico.woff -------------------------------------------------------------------------------- /app/views/main.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

angular-slick

4 |

Angular directive for slick carousel.

5 | 9 |
10 |
11 | 12 |
13 |
14 |

Single Item

15 | 16 |

{{ i }}

17 |

Current index: {{ index }}

18 | 19 |

Change index to 4

20 |
21 |
22 |

Multiple Items

23 | 24 |

{{ thing }}

25 | 26 |
27 |

One At A Time

28 | 29 |

1

30 |

2

31 |

3

32 |

4

33 |

5

34 |

6

35 | 36 |
37 |
38 |

Lazy Loading

39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 |
52 |

Information about all settings you can find at original slick site.

53 |
54 |
55 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-slick", 3 | "version": "0.2.1", 4 | "main": "dist/slick.js", 5 | "ignore": [ 6 | "app", 7 | ".editorconfig", 8 | ".gitattributes", 9 | ".gitignore ", 10 | ".jshintrc", 11 | "Gruntfile.js", 12 | "README.md ", 13 | "bower.json", 14 | "package.json" 15 | ], 16 | "keywords": [ 17 | "angular", 18 | "slick", 19 | "carousel" 20 | ], 21 | "dependencies": { 22 | "angular": "~1.3.0", 23 | "slick-carousel": "~1.4.1" 24 | }, 25 | "author": { 26 | "name": "Vasyl Stanislavchuk" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /dist/slick.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | angular.module('slick', []).directive('slick', [ 3 | '$timeout', 4 | function ($timeout) { 5 | return { 6 | restrict: 'AEC', 7 | scope: { 8 | initOnload: '@', 9 | data: '=', 10 | currentIndex: '=', 11 | accessibility: '@', 12 | adaptiveHeight: '@', 13 | arrows: '@', 14 | asNavFor: '@', 15 | appendArrows: '@', 16 | appendDots: '@', 17 | autoplay: '@', 18 | autoplaySpeed: '@', 19 | centerMode: '@', 20 | centerPadding: '@', 21 | cssEase: '@', 22 | customPaging: '&', 23 | dots: '@', 24 | draggable: '@', 25 | easing: '@', 26 | fade: '@', 27 | focusOnSelect: '@', 28 | infinite: '@', 29 | initialSlide: '@', 30 | lazyLoad: '@', 31 | onBeforeChange: '&', 32 | onAfterChange: '&', 33 | onInit: '&', 34 | onReInit: '&', 35 | onSetPosition: '&', 36 | pauseOnHover: '@', 37 | pauseOnDotsHover: '@', 38 | responsive: '=', 39 | rtl: '@', 40 | slide: '@', 41 | slidesToShow: '@', 42 | slidesToScroll: '@', 43 | speed: '@', 44 | swipe: '@', 45 | swipeToSlide: '@', 46 | touchMove: '@', 47 | touchThreshold: '@', 48 | useCSS: '@', 49 | variableWidth: '@', 50 | vertical: '@', 51 | prevArrow: '@', 52 | nextArrow: '@' 53 | }, 54 | link: function (scope, element, attrs) { 55 | var destroySlick, initializeSlick, isInitialized; 56 | destroySlick = function () { 57 | return $timeout(function () { 58 | var slider; 59 | slider = $(element); 60 | slider.slick('unslick'); 61 | slider.find('.slick-list').remove(); 62 | return slider; 63 | }); 64 | }; 65 | initializeSlick = function () { 66 | return $timeout(function () { 67 | var currentIndex, customPaging, slider; 68 | slider = $(element); 69 | if (scope.currentIndex != null) { 70 | currentIndex = scope.currentIndex; 71 | } 72 | customPaging = function (slick, index) { 73 | return scope.customPaging({ 74 | slick: slick, 75 | index: index 76 | }); 77 | }; 78 | slider.slick({ 79 | accessibility: scope.accessibility !== 'false', 80 | adaptiveHeight: scope.adaptiveHeight === 'true', 81 | arrows: scope.arrows !== 'false', 82 | asNavFor: scope.asNavFor ? scope.asNavFor : void 0, 83 | appendArrows: scope.appendArrows ? $(scope.appendArrows) : $(element), 84 | appendDots: scope.appendDots ? $(scope.appendDots) : $(element), 85 | autoplay: scope.autoplay === 'true', 86 | autoplaySpeed: scope.autoplaySpeed != null ? parseInt(scope.autoplaySpeed, 10) : 3000, 87 | centerMode: scope.centerMode === 'true', 88 | centerPadding: scope.centerPadding || '50px', 89 | cssEase: scope.cssEase || 'ease', 90 | customPaging: attrs.customPaging ? customPaging : void 0, 91 | dots: scope.dots === 'true', 92 | draggable: scope.draggable !== 'false', 93 | easing: scope.easing || 'linear', 94 | fade: scope.fade === 'true', 95 | focusOnSelect: scope.focusOnSelect === 'true', 96 | infinite: scope.infinite !== 'false', 97 | initialSlide: scope.initialSlide || 0, 98 | lazyLoad: scope.lazyLoad || 'ondemand', 99 | beforeChange: attrs.onBeforeChange ? scope.onBeforeChange : void 0, 100 | onReInit: attrs.onReInit ? scope.onReInit : void 0, 101 | onSetPosition: attrs.onSetPosition ? scope.onSetPosition : void 0, 102 | pauseOnHover: scope.pauseOnHover !== 'false', 103 | responsive: scope.responsive || void 0, 104 | rtl: scope.rtl === 'true', 105 | slide: scope.slide || 'div', 106 | slidesToShow: scope.slidesToShow != null ? parseInt(scope.slidesToShow, 10) : 1, 107 | slidesToScroll: scope.slidesToScroll != null ? parseInt(scope.slidesToScroll, 10) : 1, 108 | speed: scope.speed != null ? parseInt(scope.speed, 10) : 300, 109 | swipe: scope.swipe !== 'false', 110 | swipeToSlide: scope.swipeToSlide === 'true', 111 | touchMove: scope.touchMove !== 'false', 112 | touchThreshold: scope.touchThreshold ? parseInt(scope.touchThreshold, 10) : 5, 113 | useCSS: scope.useCSS !== 'false', 114 | variableWidth: scope.variableWidth === 'true', 115 | vertical: scope.vertical === 'true', 116 | prevArrow: scope.prevArrow ? $(scope.prevArrow) : void 0, 117 | nextArrow: scope.nextArrow ? $(scope.nextArrow) : void 0 118 | }); 119 | slider.on('init', function (sl) { 120 | if (attrs.onInit) { 121 | scope.onInit(); 122 | } 123 | if (currentIndex != null) { 124 | return sl.slideHandler(currentIndex); 125 | } 126 | }); 127 | slider.on('afterChange', function (event, slick, currentSlide, nextSlide) { 128 | if (scope.onAfterChange) { 129 | scope.onAfterChange(); 130 | } 131 | if (currentIndex != null) { 132 | return scope.$apply(function () { 133 | currentIndex = currentSlide; 134 | return scope.currentIndex = currentSlide; 135 | }); 136 | } 137 | }); 138 | return scope.$watch('currentIndex', function (newVal, oldVal) { 139 | if (currentIndex != null && newVal != null && newVal !== currentIndex) { 140 | return slider.slick('slickGoTo', newVal); 141 | } 142 | }); 143 | }); 144 | }; 145 | if (scope.initOnload) { 146 | isInitialized = false; 147 | return scope.$watch('data', function (newVal, oldVal) { 148 | if (newVal != null) { 149 | if (isInitialized) { 150 | destroySlick(); 151 | } 152 | initializeSlick(); 153 | return isInitialized = true; 154 | } 155 | }); 156 | } else { 157 | return initializeSlick(); 158 | } 159 | } 160 | }; 161 | } 162 | ]); -------------------------------------------------------------------------------- /dist/slick.min.js: -------------------------------------------------------------------------------- 1 | /*! angular-slick v0.2.0 */ 2 | "use strict";angular.module("slick",[]).directive("slick",["$timeout",function(a){return{restrict:"AEC",scope:{initOnload:"@",data:"=",currentIndex:"=",accessibility:"@",adaptiveHeight:"@",arrows:"@",asNavFor:"@",appendArrows:"@",appendDots:"@",autoplay:"@",autoplaySpeed:"@",centerMode:"@",centerPadding:"@",cssEase:"@",customPaging:"&",dots:"@",draggable:"@",easing:"@",fade:"@",focusOnSelect:"@",infinite:"@",initialSlide:"@",lazyLoad:"@",onBeforeChange:"&",onAfterChange:"&",onInit:"&",onReInit:"&",onSetPosition:"&",pauseOnHover:"@",pauseOnDotsHover:"@",responsive:"=",rtl:"@",slide:"@",slidesToShow:"@",slidesToScroll:"@",speed:"@",swipe:"@",swipeToSlide:"@",touchMove:"@",touchThreshold:"@",useCSS:"@",variableWidth:"@",vertical:"@",prevArrow:"@",nextArrow:"@"},link:function(b,c,d){var e,f,g;return e=function(){return a(function(){var a;return a=$(c),a.slick("unslick"),a.find(".slick-list").remove(),a})},f=function(){return a(function(){var a,e,f;return f=$(c),null!=b.currentIndex&&(a=b.currentIndex),e=function(a,c){return b.customPaging({slick:a,index:c})},f.slick({accessibility:"false"!==b.accessibility,adaptiveHeight:"true"===b.adaptiveHeight,arrows:"false"!==b.arrows,asNavFor:b.asNavFor?b.asNavFor:void 0,appendArrows:$(b.appendArrows?b.appendArrows:c),appendDots:$(b.appendDots?b.appendDots:c),autoplay:"true"===b.autoplay,autoplaySpeed:null!=b.autoplaySpeed?parseInt(b.autoplaySpeed,10):3e3,centerMode:"true"===b.centerMode,centerPadding:b.centerPadding||"50px",cssEase:b.cssEase||"ease",customPaging:d.customPaging?e:void 0,dots:"true"===b.dots,draggable:"false"!==b.draggable,easing:b.easing||"linear",fade:"true"===b.fade,focusOnSelect:"true"===b.focusOnSelect,infinite:"false"!==b.infinite,initialSlide:b.initialSlide||0,lazyLoad:b.lazyLoad||"ondemand",beforeChange:d.onBeforeChange?b.onBeforeChange:void 0,onReInit:d.onReInit?b.onReInit:void 0,onSetPosition:d.onSetPosition?b.onSetPosition:void 0,pauseOnHover:"false"!==b.pauseOnHover,responsive:b.responsive||void 0,rtl:"true"===b.rtl,slide:b.slide||"div",slidesToShow:null!=b.slidesToShow?parseInt(b.slidesToShow,10):1,slidesToScroll:null!=b.slidesToScroll?parseInt(b.slidesToScroll,10):1,speed:null!=b.speed?parseInt(b.speed,10):300,swipe:"false"!==b.swipe,swipeToSlide:"true"===b.swipeToSlide,touchMove:"false"!==b.touchMove,touchThreshold:b.touchThreshold?parseInt(b.touchThreshold,10):5,useCSS:"false"!==b.useCSS,variableWidth:"true"===b.variableWidth,vertical:"true"===b.vertical,prevArrow:b.prevArrow?$(b.prevArrow):void 0,nextArrow:b.nextArrow?$(b.nextArrow):void 0}),f.on("init",function(c){return d.onInit&&b.onInit(),null!=a?c.slideHandler(a):void 0}),f.on("afterChange",function(c,d,e){return b.onAfterChange&&b.onAfterChange(),null!=a?b.$apply(function(){return a=e,b.currentIndex=e}):void 0}),b.$watch("currentIndex",function(b){return null!=a&&null!=b&&b!==a?f.slick("slickGoTo",b):void 0})})},b.initOnload?(g=!1,b.$watch("data",function(a){return null!=a?(g&&e(),f(),g=!0):void 0})):f()}}}]); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angularslick", 3 | "version": "0.0.0", 4 | "dependencies": {}, 5 | "devDependencies": { 6 | "grunt": "~0.4.1", 7 | "grunt-autoprefixer": "~0.4.0", 8 | "grunt-bower-install": "~0.7.0", 9 | "grunt-concurrent": "~0.4.1", 10 | "grunt-contrib-clean": "~0.5.0", 11 | "grunt-contrib-coffee": "~0.7.0", 12 | "grunt-contrib-compass": "~0.6.0", 13 | "grunt-contrib-concat": "~0.3.0", 14 | "grunt-contrib-connect": "~0.5.0", 15 | "grunt-contrib-copy": "~0.4.1", 16 | "grunt-contrib-cssmin": "~0.7.0", 17 | "grunt-contrib-htmlmin": "~0.1.3", 18 | "grunt-contrib-imagemin": "~0.3.0", 19 | "grunt-contrib-jshint": "~0.7.1", 20 | "grunt-contrib-uglify": "~0.2.0", 21 | "grunt-contrib-watch": "~0.5.2", 22 | "grunt-google-cdn": "~0.2.0", 23 | "grunt-newer": "~0.5.4", 24 | "grunt-ngmin": "~0.0.2", 25 | "grunt-rev": "~0.1.0", 26 | "grunt-svgmin": "~0.2.0", 27 | "grunt-usemin": "~2.0.0", 28 | "jshint-stylish": "~0.1.3", 29 | "load-grunt-tasks": "~0.2.0", 30 | "time-grunt": "~0.2.1", 31 | "karma-ng-scenario": "^0.1.0", 32 | "grunt-karma": "^0.8.2", 33 | "karma": "^0.12.6", 34 | "karma-ng-html2js-preprocessor": "^0.1.0" 35 | }, 36 | "engines": { 37 | "node": ">=0.8.0" 38 | }, 39 | "scripts": { 40 | "test": "grunt test" 41 | } 42 | } 43 | --------------------------------------------------------------------------------