Add animation for landing page slider

andela · Oct 5, 2016 · d0e444d · d0e444d
1 parent 62ff119
commit d0e444d
Showing 1 changed file with 55 additions and 1 deletion.
diff --git a/public/js/controllers/index.js b/public/js/controllers/index.js
@@ -21,4 +21,58 @@ angular.module('mean.system')
         $scope.avatars = data;
       });
 
-}]);
+    //Index slider
+    var
+      cards = jQuery('.cards').find('.real-card'),
+      sliderLeft = jQuery('#slider-left'),
+      sliderRight = jQuery('#slider-right'),
+      currentIndex = 0;
+
+    if(cards.length > 0){
+      sliderLeft.click(function () {
+        if (currentIndex > 0) {
+          var
+            currentCard = jQuery(cards[currentIndex]);
+            currentCard.fadeOut(300);
+            currentCard.removeClass('current');
+            currentIndex--;
+            currentCard = jQuery(cards[currentIndex]);
+            currentCard.animate({left:130},300,'swing');
+            currentCard.css('transform', 'rotate(0deg)');
+            currentCard.addClass('current');
+
+          if (currentIndex == 0){
+            jQuery('#slider-left').addClass('dead').removeClass('not-dead');
+          }
+
+          if (currentIndex == cards.length - 2) {
+            jQuery('#slider-right').removeClass('dead').addClass('not-dead');
+          }
+
+        }
+      });
+
+      sliderRight.click(function () {
+        if(currentIndex + 1 < cards.length) {
+
+          var
+            currentCard = jQuery(cards[currentIndex]);
+            currentCard.css('transform', 'rotate(-6deg)');
+            currentCard.animate({left:90},300,'swing');
+            currentCard.removeClass('current');
+            currentCard.show();
+            currentIndex++;
+            currentCard = jQuery(cards[currentIndex]);
+            currentCard.fadeIn(300);
+            currentCard.addClass('current');
+
+          if(currentIndex == 1){
+            jQuery('#slider-left').removeClass('dead').addClass('not-dead');
+          }
+
+          if((currentIndex + 1) == cards.length){
+            jQuery('#slider-right').removeClass('not-dead').addClass('dead');
+          }
+        }
+      });
+    }}]);