AngularJS - Carousel - Source http://jsbin.com/zahime

carousel.js

angular.module('myApp',['ngRoute']);
 
 (function () {
    'use strict';

    /**
     * @ngdoc directive
     * @memberOf myApp
     * @name carousel
     * @description Single or multi-item carousel slider. If the "slides-to-show" value is greater than 1, scope.timeline is true and
     * the carousel acts like a timeline, exposing multiple slides. Carousel-tooltip will only appear for the first instance, if multiple are displayed on the page at the same time,
     * it will be the first to render. Auto-advance will call next() on $timeout of 10,000.
     * @requires $interval
     * @example
     * Example to show one slide at a time.
     * <carousel carousel-tooltip ng-swipe-right="previous()" ng-swipe-left="next()" auto-advance>
     *     <div ng-show="carouselTooltip">Tooltip stuff</div>
     *     <carousel-item ng-show="getShouldBeShown(0)">slide 1</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(1)">slide 2</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(2)">slide 3</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(3)">slide 4</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(4)">slide 5</carousel-item>
     *     <button ng-click="previous()">previous</button>
     *     <button ng-click="next()">next</button>
     * </carousel>
     *
     * @example
     * Example to show 3 slides at a time, while advancing 3 slides at a time. Notice the added ng-show on the previous/next button.
     * Allowing for the carousel to not advance past the last slide. Carousel-tooltip will only appear for the first instance, if multiple are displayed on the page at the same time,
     * it will be the first to render.
     * <carousel carousel-tooltip slides-to-show="3" slides-to-move="3" ng-swipe-right="previous()" ng-swipe-left="next()">
     *     <div ng-show="carouselTooltip">Tooltip stuff</div>
     *     <carousel-item ng-show="getShouldBeShown(0)">slide 1</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(1)">slide 2</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(2)">slide 3</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(3)">slide 4</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(4)">slide 5</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(5)">slide 6</carousel-item>
     *     <carousel-item ng-show="getShouldBeShown(6)">slide 7</carousel-item>
     *     <button ng-click="previous()" ng-show="showPreviousButton">previous</button>
     *     <button ng-click="next()" ng-show="showNextButton">next</button>
     * </carousel>
     */
    angular.module('myApp').directive('carousel', ['$timeout', function (timeout) {
        return {
            restrict: 'AE',
            scope: true,
            link: function (scope, element, attributes) {
                scope.numberOfSlides = element.find("carousel-item").length + element[0].querySelectorAll("[carousel-item]").length;
                scope.carouselIndicators = new Array(scope.numberOfSlides);
                scope.selectedIndex = 0;
                scope.slidesToShow = parseInt(attributes.slidesToShow) || 1;
                scope.slidesToMove = parseInt(attributes.slidesToMove) || 1;
                scope.timeline = scope.slidesToShow > 1;
                scope.makeGrid = false;
                scope.timer = {};
                scope.autoAdvance = attributes.autoAdvance !== undefined;

                // Only used for hiding the time line buttons since time lines do not wrap around.
                scope.showPreviousButton = false;
                scope.showNextButton = true;
                scope.carouselTooltip = false;

                var carouselTooltip = 'carouselTooltip';
                if (attributes.carouselTooltip !== undefined && localStorage.getItem(carouselTooltip) === null) {
                    localStorage.setItem(carouselTooltip, 'true');
                    scope.carouselTooltip = true;
                }

                function advanceSlideTimeout() {
                    if (scope.autoAdvance) {
                        return scope.timer = timeout(function () {
                            scope.next();
                        }, 10000);
                    }
                }

                advanceSlideTimeout();

                scope.getShouldBeShown = function (index) {
                    if (scope.makeGrid) {
                        return scope.makeGrid;
                    }

                    if (scope.timeline) {
                        return index >= scope.selectedIndex && index < scope.slidesToShow + scope.selectedIndex;
                    }

                    return scope.selectedIndex === index;
                };

                function toIndex(index) {
                    scope.carouselTooltip = false;
                    var maxIndex = scope.numberOfSlides - scope.slidesToShow,
                        previousIndex = scope.timeline ? 0 : scope.numberOfSlides - 1;

                    if (scope.autoAdvance) {
                        timeout.cancel(scope.timer);
                        scope.timer = advanceSlideTimeout();
                    }

                    if (index > maxIndex) {
                        scope.selectedIndex = scope.timeline ? maxIndex : 0;
                    } else if (index < 0) {
                        scope.selectedIndex = previousIndex;
                    } else {
                        scope.selectedIndex = index;
                    }

                    scope.showPreviousButton = scope.selectedIndex !== 0;
                    scope.showNextButton = scope.selectedIndex !== scope.numberOfSlides - scope.slidesToShow;

                    return scope.selectedIndex;
                }

                scope.next = function () {
                    return toIndex(scope.selectedIndex + scope.slidesToMove);
                };

                scope.previous = function () {
                    return toIndex(scope.selectedIndex - scope.slidesToMove);
                };

                scope.$root.$on(scope.group, function (event, args) {
                    scope.makeGrid = args.trigger === 'grid';
                    if (scope.makeGrid) {
                        timeout.cancel(scope.timer);
                    } else {
                        scope.timer = advanceSlideTimeout();
                    }
                });
            }
        };
    }]);
}());

index.html

<div ng-app="myApp" carousel>
    <div ng-repeat="slide in slides" ng-show="selectedIndex == $index">
    	<img ng-src="{{slide}}" />
    </div>
    <button class="button" ng-click="toIndex(selectedIndex-1)"><</button>
    <span ng-repeat="slide in slides">
    	<button class="button" ng-click="toIndex($index)">{{ $index + 1 }}</button>
    </span>
    <button class="button" ng-click="toIndex(selectedIndex+1)">></button>
</div>