Image Carousel Images

by Jeremy Gillick

HTML

<div ng-app="myApp">
  <div ng-controller="myController">
  
   <!--img src="http://i.imgur.com/JJaPd8V.jpg" />
   <img src="http://i.imgur.com/XrZXN.jpg" />
   <img src="http://i.imgur.com/2puJ3X8.jpg" />
   <img src="http://i.imgur.com/YIT9H.jpg" />
   <img src="http://i.imgur.com/qyMix.jpg" /-->
   
   <button ng-click="previous()">Previous</button>
   <img ng-src="{{selectedImage()}}" />
   <button ng-click="next()">Next</button> 

  </div>
</div>

CSS

img {
    max-width: 200px;
    max-height: 200px;
}

JavaScript

var app = angular.module('myApp', []);

function controller ($scope) {
	
  var images = ["http://i.imgur.com/JJaPd8V.jpg", "http://i.imgur.com/XrZXN.jpg", "http://i.imgur.com/2puJ3X8.jpg", "http://i.imgur.com/YIT9H.jpg", "http://i.imgur.com/qyMix.jpg"]
  var selectedImageIndex = 0;
  
  $scope.previous = function() {
  	if (selectedImageIndex > 0) {
    	selectedImageIndex --;
    } else {
    	selectedImageIndex = images.length - 1;
    }
  }
  
  $scope.next = function() {
  	if (selectedImageIndex < images.length - 1) {
    	selectedImageIndex ++;
    } else {
    	selectedImageIndex = 0;
    }
  }
  
  $scope.selectedImage = function() {
    return images[selectedImageIndex];
  }
  
}

app.controller("myController", controller);