AngularJS 1.2.x

var app = angular.module('plunker', ['ngAnimate'])

.controller('MainCtrl', function($scope, $rootScope) {
  var numImages = 30;
  
  $scope.images = [];                                                 // images array
  $scope.currentPage = 0;                                             // current page
  $scope.numImagesPerPage = 6;                                        // # images per page
  $scope.numPages = Math.floor(numImages / $scope.numImagesPerPage);  // # pages
  $rootScope.direction = 'right';                                         // initially can only move right
  
  for(var i=0; i<numImages; i++) {
    $scope.images.push(i);
  }
  
  $scope.next = function () {
    if ($scope.currentPage < $scope.numPages - 1) {
      $rootScope.direction = 'right';
      $scope.currentPage++;
    }
  }

  
  $scope.prev = function () {
    if ($scope.currentPage > 0) {
      $rootScope.direction = 'left';
      $scope.currentPage--;
    }
  }
})

.config(function($provide) {
        $provide.decorator("$animate", function ($delegate, $rootScope) {
            $delegate.originalLeave = $delegate.leave;
            $delegate.leave = function (element, doneCallback) {
                $(element).removeClass("right").removeClass("left").addClass($rootScope.direction);
                $delegate.originalLeave(element, doneCallback);
            };
            return $delegate;
        });
    })

.filter('offset', function () {
	return function (input, start) {
		if (!input) return [];
		start = parseInt(start, 10);
		return input.slice(start);
	};
})

.filter('partition', function ($cacheFactory) {
	var arrayCache = $cacheFactory('partition');
	return function (input, size) {
		if (!input) return [];
		if (!size) return [input];

		var result = [];
		var cachedParts;
		var inputString = JSON.stringify(input);
		
		for(var i=0; i<input.length; i+=size) {
			result.push(input.slice(i, i+size));
		}

		cachedParts = arrayCache.get(inputString+size);
		if (JSON.stringify(cachedParts) === JSON.stringify(result)) {
			return cachedParts;
		}
		arrayCache.put(inputString+size, result);
		return result;
	};
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
   <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
    <script data-require="angular-animate@1.2.16" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-animate.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="page-container">
      <div class="image-page" ng-class="direction" ng-repeat="page in images | partition: 6 | offset: currentPage | limitTo: 1">
        <ul class="image-list">
          <li class="image" ng-repeat="image in page">
            <img ng-src="http://placehold.it/100x100&text={{image}}" />
          </li>
        </ul>
      </div>
    </div>
    <div class="controls">
      <button ng-click="prev()">Prev</button>
      <button ng-click="next()">Next</button>
    </div>
  </body>

</html>

/* Put your css in here */

.page-container {
  position: relative;
  width: 360px;
  margin: 0 auto;
  height: 260px;
  overflow: hidden;
}

.image-page {
  position: absolute;
  width: 360px;
  top: 0;
  left: 0;
}
.image-list {
  padding: 0;
  list-style: none;
}

.image {
  float: left;
  margin: 10px;
}

.controls {
  clear: both;
  width: 100%;
  text-align: center;
}


/* animations */
.image-page.right.ng-enter, .image-page.right.ng-leave,
.image-page.left.ng-enter, .image-page.left.ng-leave {
	transition: all linear .5s;
	display: block !important;
}

.image-page.right.ng-enter {
	margin-left: 360px;
}
.image-page.right.ng-enter.ng-enter-active {
	margin-left: 0;
}

.image-page.right.ng-leave {
	margin-left: 0;
}
.image-page.right.ng-leave.ng-leave-active {
	margin-left: -360px;
}

.image-page.left.ng-enter {
	margin-left: -360px;
}
.image-page.left.ng-enter.ng-enter-active {
	margin-left: 0;
}

.image-page.left.ng-leave {
	margin-left: 0;
}
.image-page.left.ng-leave.ng-leave-active {
	margin-left: 360px;
}