Handle all Slick events with 1.4 event model, remove deprecated callbacks on init, and pass relevant event details to callbacks

app/scripts/app.coffee

@@ -20,22 +20,28 @@ angular.module('slick', [])
       cssEase: "@"
       customPaging: "&"
       dots: "@"
+      dotsClass: "@"
       draggable: "@"
       easing: "@"
+      edgeFriction: "@"
       fade: "@"
       focusOnSelect: "@"
       infinite: "@"
       initialSlide: "@"
       lazyLoad: "@"
-      onBeforeChange: "&"
-      onAfterChange: "&"
-      onInit: "&"
-      onReInit: "&"
-      onSetPosition: "&"
+      mobileFirst: "@"
+      onBeforeChange: "="
+      onAfterChange: "="
+      onInit: "="
+      onReInit: "="
+      onSetPosition: "="
       pauseOnHover: "@"
       pauseOnDotsHover: "@"
       responsive: "="
+      respondTo: "@"
       rtl: "@"
+      rows: "@"
+      slidesPerRow: "@"
       slide: "@"
       slidesToShow: "@"
       slidesToScroll: "@"
@@ -47,8 +53,11 @@ angular.module('slick', [])
       useCSS: "@"
       variableWidth: "@"
       vertical: "@"
+      verticalSwiping: "@"
+      waitForAnimate: "@"
       prevArrow:"@"
       nextArrow:"@"
+      zIndex: "@"
 
     link: (scope, element, attrs) ->
       destroySlick = () ->
@@ -81,19 +90,23 @@ angular.module('slick', [])
             cssEase: scope.cssEase or "ease"
             customPaging: if attrs.customPaging then customPaging else undefined
             dots: scope.dots is "true"
+            dotsClass: scope.dotsClass or "slick-dots" 
             draggable: scope.draggable isnt "false"
             easing: scope.easing or "linear"
+            edgeFriction: scope.edgeFriction or 0.15
             fade: scope.fade is "true"
             focusOnSelect: scope.focusOnSelect is "true"
             infinite: scope.infinite isnt "false"
             initialSlide:scope.initialSlide or 0
             lazyLoad: scope.lazyLoad or "ondemand"
-            beforeChange: if attrs.onBeforeChange then scope.onBeforeChange else undefined
-            onReInit: if attrs.onReInit then scope.onReInit else undefined
-            onSetPosition: if attrs.onSetPosition then scope.onSetPosition else undefined
+            mobileFirst: scope.mobileFirst is "true"
             pauseOnHover: scope.pauseOnHover isnt "false"
+            pauseOnDotsHover: scope.pauseOnDotsHover is "true"
             responsive: scope.responsive or undefined
             rtl: scope.rtl is "true"
+            respondTo: if scope.respondTo? then scope.respondTo else "window"
+            rows: if scope.rows? then parseInt(scope.rows, 10) else 1
+            slidesPerRow: if scope.slidesPerRow? then parseInt(scope.slidesPerRow, 10) else 1
             slide: scope.slide or "div"
             slidesToShow: if scope.slidesToShow? then parseInt(scope.slidesToShow, 10) else 1
             slidesToScroll: if scope.slidesToScroll? then parseInt(scope.slidesToScroll, 10) else 1
@@ -105,24 +118,48 @@ angular.module('slick', [])
             useCSS: scope.useCSS isnt "false"
             variableWidth: scope.variableWidth is "true"
             vertical: scope.vertical is "true"
+            verticalSwiping: scope.verticalSwiping? is "true"
+            waitForAnimate: scope.waitForAnimate? isnt "true"
+            zIndex: if scope.zIndex? then parseInt(scope.zIndex, 10) else 1000
             prevArrow: if scope.prevArrow then $(scope.prevArrow) else undefined
             nextArrow: if scope.nextArrow then $(scope.nextArrow) else undefined
 
 
-          slider.on 'init', (sl) ->
+          slider.on 'init', (event, slick) ->
             scope.onInit() if attrs.onInit
             if currentIndex?
-              sl.slideHandler(currentIndex)
+              slick.slideHandler(currentIndex)
 
-          slider.on 'afterChange', (event, slick, currentSlide, nextSlide) ->
-            scope.onAfterChange() if scope.onAfterChange
+          slider.on 'reInit', (event, slick) ->
+            scope.onReInit() if attrs.onReInit
+
+          slider.on 'setPosition', (event, slick) ->
+            scope.onSetPosition() if attrs.onSetPosition
+
+          slider.on 'swipe', (event, slick, direction) ->
+            scope.onSwipe(direction) if attrs.onSwipe
+
+          slider.on 'afterChange', (event, slick, currentSlide) ->
+            scope.onAfterChange(currentSlide) if scope.onAfterChange
 
             if currentIndex?
               scope.$apply(->
                 currentIndex = currentSlide
                 scope.currentIndex = currentSlide
               )
 
+          slider.on 'beforeChange', (event, slick, currentSlide, nextSlide) ->
+            scope.onBeforeChange(currentSlide, nextSlide) if attrs.onBeforeChange
+
+          slider.on 'breakpoint', (event, slick) ->
+            scope.onBreakpoint() if attrs.onBreakpoint
+
+          slider.on 'destroy', (event, slick) ->
+            scope.onDestroy() if attrs.onDestroy
+
+          slider.on 'edge', (event, slick, direction) ->
+            scope.onEdge(direction) if attrs.onEdge
+
           scope.$watch("currentIndex", (newVal, oldVal) ->
             if currentIndex? and newVal? and newVal != currentIndex
               slider.slick('slickGoTo', newVal)

bower.json

@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "angular": "~1.3.0",
-    "slick-carousel": "~1.4.1"
+    "slick-carousel": "~1.5.5"
   },
   "author": {
     "name": "Vasyl Stanislavchuk"

dist/slick.js

@@ -28,11 +28,11 @@ angular.module('slick', []).directive('slick', [
         infinite: '@',
         initialSlide: '@',
         lazyLoad: '@',
-        onBeforeChange: '&',
-        onAfterChange: '&',
-        onInit: '&',
-        onReInit: '&',
-        onSetPosition: '&',
+        onBeforeChange: '=',
+        onAfterChange: '=',
+        onInit: '=',
+        onReInit: '=',
+        onSetPosition: '=',
         pauseOnHover: '@',
         pauseOnDotsHover: '@',
         responsive: '=',
@@ -96,9 +96,6 @@ angular.module('slick', []).directive('slick', [
               infinite: scope.infinite !== 'false',
               initialSlide: scope.initialSlide || 0,
               lazyLoad: scope.lazyLoad || 'ondemand',
-              beforeChange: attrs.onBeforeChange ? scope.onBeforeChange : void 0,
-              onReInit: attrs.onReInit ? scope.onReInit : void 0,
-              onSetPosition: attrs.onSetPosition ? scope.onSetPosition : void 0,
               pauseOnHover: scope.pauseOnHover !== 'false',
               responsive: scope.responsive || void 0,
               rtl: scope.rtl === 'true',
@@ -116,17 +113,32 @@ angular.module('slick', []).directive('slick', [
               prevArrow: scope.prevArrow ? $(scope.prevArrow) : void 0,
               nextArrow: scope.nextArrow ? $(scope.nextArrow) : void 0
             });
-            slider.on('init', function (sl) {
+            slider.on('init', function (event, slick) {
               if (attrs.onInit) {
                 scope.onInit();
               }
               if (currentIndex != null) {
-                return sl.slideHandler(currentIndex);
+                return slick.slideHandler(currentIndex);
               }
             });
-            slider.on('afterChange', function (event, slick, currentSlide, nextSlide) {
+            slider.on('reInit', function (event, slick) {
+              if (attrs.onReInit) {
+                return scope.onReInit();
+              }
+            });
+            slider.on('setPosition', function (event, slick) {
+              if (attrs.onSetPosition) {
+                return scope.onSetPosition();
+              }
+            });
+            slider.on('swipe', function (event, slick, direction) {
+              if (attrs.onSwipe) {
+                return scope.onSwipe(direction);
+              }
+            });
+            slider.on('afterChange', function (event, slick, currentSlide) {
               if (scope.onAfterChange) {
-                scope.onAfterChange();
+                scope.onAfterChange(currentSlide);
               }
               if (currentIndex != null) {
                 return scope.$apply(function () {
@@ -135,6 +147,26 @@ angular.module('slick', []).directive('slick', [
                 });
               }
             });
+            slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+              if (attrs.onBeforeChange) {
+                return scope.onBeforeChange(currentSlide, nextSlide);
+              }
+            });
+            slider.on('breakpoint', function (event, slick) {
+              if (attrs.onBreakpoint) {
+                return scope.onBreakpoint();
+              }
+            });
+            slider.on('destroy', function (event, slick) {
+              if (attrs.onDestroy) {
+                return scope.onDestroy();
+              }
+            });
+            slider.on('edge', function (event, slick, direction) {
+              if (attrs.onEdge) {
+                return scope.onEdge(direction);
+              }
+            });
             return scope.$watch('currentIndex', function (newVal, oldVal) {
               if (currentIndex != null && newVal != null && newVal !== currentIndex) {
                 return slider.slick('slickGoTo', newVal);