correcting the label when adding the carousel dependency to your module

README.md

@@ -19,7 +19,7 @@ Add the dependency in your Angular's project dependency arguments:
 
 ```js
 var app = angular.module('MyApp', [
-  'angular-carousel-directive'
+  'angular-carousel'
 ]);
 ```
 

angular-carousel.js

@@ -2,9 +2,14 @@
     angular.module('angular-carousel', [])
     .directive('angularCarousel', [function () {
 
-        function Carousel (element, arrowThreshold) {
+        function Carousel (element, arrowThreshold, css3Support, buttons, slideContent) {
             this.element = element;
             this.arrowThreshold = arrowThreshold;
+            this.buttons = buttons;
+            this.slideContent = slideContent;
+
+            //boolean variable
+            this.css3Support = css3Support;
 
             this.currentIndex = 0;
 
@@ -18,8 +23,11 @@
 
             this.calculateSlideHeight();
             this.requireArrows();
+
+            this.goToSlide();
         }
 
+
         Carousel.prototype = {
 
             calculateSlideHeight: function () {
@@ -30,62 +38,117 @@
                     if ($(this).height() > minHeight ) {
                         minHeight = $(this).height();
                     }
-
                 });
 
                 this.carouselBelt.height(minHeight);
             },
 
+            goToSlide: function () {
+                var _this = this;
+
+                console.log(this.buttons);
+
+                console.log(this.slideContent);
+
+                this.buttons.each(function(button){
+
+                    $(this).on('click', function() {
+
+                        if (!_this.currentIndex !== button) {
+
+                            _this.removeActiveClass();
+                            _this.currentIndex = button;
+                            _this.animateSlide();
+                            _this.updateActiveClass();
+                        }    
+                    });
+                });
+            },
+
             nextSlide: function () {
-                if(this.currentIndex < this.beltLength - 1 ) {
+
+                if (this.currentIndex < this.beltLength - 1 ) {
+                    //remove the active class from the current navigation and slide content
+                    this.removeActiveClass();
+
                     ++this.currentIndex;
                     this.animateSlide();
+
+                    //add the active class for the next tab
+                    this.updateActiveClass();
                 }
             },
 
             previousSlide: function () {
+
                 if ( this.currentIndex > 0) {
+                    //remove the active class from the current navigation and slide content
+                    this.removeActiveClass();
+
                     --this.currentIndex;
                     this.animateSlide();
+
+                    //add the active class for the next tab
+                    this.updateActiveClass();
                 }
             },
 
+            removeActiveClass: function () {
+                this.buttons.eq(this.currentIndex).removeClass('is-active');
+                this.slideContent.eq(this.currentIndex).removeClass('is-active');
+            },
+
+            updateActiveClass: function () {
+                this.buttons.eq(this.currentIndex).addClass('is-active');
+                this.slideContent.eq(this.currentIndex).addClass('is-active');
+            },
+
             animateSlide: function () {
-                this.carouselBelt.css({
-                    'transform': 'translateX(-' + this.currentIndex * this.slides.width() + 'px)'
-                })
+
+                if (this.css3Support) {
+                    this.carouselBelt.css({
+                        'transform': 'translateX(-' + this.currentIndex * this.slides.width() + 'px'
+                    });
+                }
+
+                else {
+                    this.carouselBelt.animate({left: - this.currentIndex * this.slides.width() + 'px' })
+                }  
             },
 
             requireArrows: function () {
                 if (this.maxLength <= this.arrowThreshold) {
                     this.arrows.hide();
                 }
             }
-
         }
 
         return {
             restrict: 'A',
             link: function (scope, element, attrs) {
-              console.log('[ng-carousel] init');
+
+                console.log('[ng-carousel] init');
 
                 var belt = angular.element('.carousel-belt', element),
-                    leftArrow = angular.element('> .arrow-left', element),
-                    rightArrow = angular.element('> .arrow-right', element),
+                    leftArrow = angular.element('.arrow-left', element),
+                    rightArrow = angular.element('.arrow-right', element),
+                    buttons = angular.element('.carousel-nav__slide', element),
+                    slideContent = angular.element('.carousel__detail-item', element),
+                    css3Support = Modernizr.csstransforms3d,
                     arrowThreshold = attrs.arrowThreshold;
+
+                var carousel = new Carousel(element, arrowThreshold, css3Support, buttons, slideContent);
 
-                    var carousel = new Carousel(element, arrowThreshold);
-
-                    rightArrow.on('click', element, function (e) {
-                        e.preventDefault();
-                        carousel.nextSlide();
-                    });
+                rightArrow.on('click', element, function (e) {
+                    e.preventDefault();
+                    carousel.nextSlide();
+                });
 
-                    leftArrow.on('click', element, function (e) {
-                        e.preventDefault();
-                        carousel.previousSlide();
-                    });
+                leftArrow.on('click', element, function (e) {
+                    e.preventDefault();
+                    carousel.previousSlide();
+                });
             }
-        }
+         }
     }]);
 }());