Image Carousel Images

by Jeremy Gillick

HTML

<!--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" /-->

<div ng-app="myApp">
  <div ng-controller="ImagePage">
    <div image-carousel-show images="imageList"/>
  </div>
</div>
<script type="text/ng-template" id="/carousel.html">
  <div class="container">
    <div class="image-container">
      <img ng-src="{{images[currentImageIndex]}}" />
    </div>
    <div class="btn-container">
      <button ng-click="prev()">Left</button>
       <button ng-click="next()">Right</button>
    </div>
  </div>
</script>

CSS

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

.container {
    width: 200px;
}

.image-container {
  text-align: center;
}

.btn-container {
  text-align: center;
}

JavaScript

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

 myAppModule.controller('ImagePage', function($scope, $timeout){
   $scope.imageList = ["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"];
   

 });
 
 
 myAppModule.controller('ImageCarousel', function($scope, $timeout){

   
   $scope.prev = function(){
     if ($scope.currentImageIndex == 0) {
       $scope.currentImageIndex = $scope.images.length - 1;
     } else {
       $scope.currentImageIndex -=1;
     };
   }
   
   $scope.next = function(){
     if ($scope.currentImageIndex == $scope.images.length - 1) {
       $scope.currentImageIndex = 0;
     } else {
       $scope.currentImageIndex += 1;
     };
   }
   
   $scope.currentImage = function(){
     return $scope.images[$scope.currentImageIndex];
   }
   
   var init = function(){
     $scope.currentImageIndex = 0; // ASSUMING there is always at least one image
   };
   
   init();
 }).directive('imageCarouselShow', function() {
  return {
  	controller: 'ImageCarousel',
    templateUrl: '/carousel.html',
    scope : {
      'images' : '='
    }
  };
});