jessedhillon · November 20, 2014 04:36
diff --git a/carousel.html b/carousel.html
 <!DOCTYPE html>
 <html ng-app="carousel">
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
        <script type="text/javascript">
 (function() {

 var carousel = angular.module("carousel", []);
 carousel.controller("CarouselController", ["$scope", "$interval", function($scope, $interval) {
    $scope.images = [
        "http://www.horsebreedsinfo.com/images/brown_horse_running.jpg",
        "http://www.acuteaday.com/blog/wp-content/uploads/2011/09/epic-horse-running.jpg",
        "http://hd.wallpaperswide.com/thumbs/2_horses-t2.jpg"
    ];

    $scope.currentImage = 0;

    $scope.nextImage = function() {
        if($scope.currentImage == $scope.images.length - 1) {
            $scope.currentImage = 0;
        } else {
            $scope.currentImage += 1;
        }
    }

    $scope.previousImage = function() {
        if($scope.currentImage == 0) {
            $scope.currentImage = $scope.images.length - 1;
        } else {
            $scope.currentImage -= 1;
        }
    }

    $interval($scope.nextImage, 5000);
 }]);

 })()
        </script>
        <style type="text/css">
 .carousel {
    width: 500px;
    height: 500px;
    text-align: center;
 }

 .carousel img {
    display: inline-block;
    max-height: 500px;
    max-width: 500px;
 }

 .controls {
    width: 120px;
    height: 70px;
 }

 .controls button {
    display: block;
 }

 .controls .left {
    float: left;
 }

 .controls .right {
    float: right;
 }
        </style>
    </head>

    <body>
        <div ng-controller="CarouselController">
            <div class="carousel">
                <img ng-src="{{ images[currentImage] }}"/>
            </div>

            <p>
                These buttons hide/show based on whether or not we're at the end<br/>
            </p>
            <div class="controls">
                <button class="left" ng-show="currentImage > 0" ng-click="previousImage()">Previous</button>
                <button class="right" ng-show="currentImage < (images.length - 1)" ng-click="nextImage()">Next</button>
            </div>

            <p>
                These buttons loop around the end back to the other side<br/>
            </p>
            <div class="controls">
                <button class="left" ng-click="previousImage()">Previous</button>
                <button class="right" ng-click="nextImage()">Next</button>
            </div>
        </div>
    </body>
 </html>
	<!DOCTYPE html>
	<html ng-app="carousel">
	<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
	<script type="text/javascript">
	(function() {

	var carousel = angular.module("carousel", []);
	carousel.controller("CarouselController", ["$scope", "$interval", function($scope, $interval) {
	$scope.images = [
	"http://www.horsebreedsinfo.com/images/brown_horse_running.jpg",
	"http://www.acuteaday.com/blog/wp-content/uploads/2011/09/epic-horse-running.jpg",
	"http://hd.wallpaperswide.com/thumbs/2_horses-t2.jpg"
	];

	$scope.currentImage = 0;

	$scope.nextImage = function() {
	if($scope.currentImage == $scope.images.length - 1) {
	$scope.currentImage = 0;
	} else {
	$scope.currentImage += 1;
	}
	}

	$scope.previousImage = function() {
	if($scope.currentImage == 0) {
	$scope.currentImage = $scope.images.length - 1;
	} else {
	$scope.currentImage -= 1;
	}
	}

	$interval($scope.nextImage, 5000);
	}]);

	})()
	</script>
	<style type="text/css">
	.carousel {
	width: 500px;
	height: 500px;
	text-align: center;
	}

	.carousel img {
	display: inline-block;
	max-height: 500px;
	max-width: 500px;
	}

	.controls {
	width: 120px;
	height: 70px;
	}

	.controls button {
	display: block;
	}

	.controls .left {
	float: left;
	}

	.controls .right {
	float: right;
	}
	</style>
	</head>

	<body>
	<div ng-controller="CarouselController">
	<div class="carousel">
	<img ng-src="{{ images[currentImage] }}"/>
	</div>

	<p>
	These buttons hide/show based on whether or not we're at the end<br/>
	</p>
	<div class="controls">
	<button class="left" ng-show="currentImage > 0" ng-click="previousImage()">Previous</button>
	<button class="right" ng-show="currentImage < (images.length - 1)" ng-click="nextImage()">Next</button>
	</div>

	<p>
	These buttons loop around the end back to the other side<br/>
	</p>
	<div class="controls">
	<button class="left" ng-click="previousImage()">Previous</button>
	<button class="right" ng-click="nextImage()">Next</button>
	</div>
	</div>
	</body>
	</html>