Make carousel work with multiple items displayed

bower.json

@@ -1,12 +1,12 @@
 {
-  "name": "angular-carousel",
-  "description": "Angular Carousel - Mobile friendly touch carousel for AngularJS",
+  "name": "angular-carousel-multiple",
+  "description": "Angular Carousel - Mobile friendly touch carousel for AngularJS, a forked version that allows display of multiple items at once.",
   "version": "0.3.10",
-  "homepage": "http://revolunet.github.com/angular-carousel",
-  "author": "Julien Bouquillon <julien@revolunet.com>",
+  "homepage": "https://github.com/u982744/angular-carousel",
+  "author": "Tim Berman <berman.tim@gmail.com>",
   "repository": {
     "type": "git",
-    "url": "git://github.com/revolunet/angular-carousel.git"
+    "url": "git://github.com/u982744/angular-carousel.git"
   },
   "main": [
     "dist/angular-carousel.js",

demo/demo.css

@@ -35,8 +35,8 @@ h3 {
 }
 
 ul[rn-carousel] {
-    width:400px;
-    height:200px;
+    width:100%;
+    height:300px;
     margin: 0 auto;
 }
 
@@ -48,6 +48,7 @@ ul[rn-carousel] {
 }
 
 .carousel-demo {
+  width: 100%;
     margin-top:20px;
     display:inline-block;
     text-align: center;

dist/angular-carousel.css

@@ -25,7 +25,8 @@ ul[rn-carousel] {
     padding: 0;
     margin: 0;
     list-style-type: none;
-    width: 100%;
+    width: 450px;
+    padding-right: 10px;
     height: 100%;
     display: inline-block; }
 

dist/angular-carousel.js

@@ -1,6 +1,6 @@
 /**
  * Angular Carousel - Mobile friendly touch carousel for AngularJS
- * @version v0.3.10 - 2015-02-11
+ * @version v0.3.10 - 2015-02-26
  * @link http://revolunet.github.com/angular-carousel
  * @author Julien Bouquillon <[email protected]>
  * @license MIT License, http://www.opensource.org/licenses/MIT
@@ -326,7 +326,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
 
                         scope.nextSlide = function(slideOptions) {
                             var index = scope.carouselIndex + 1;
-                            if (index > currentSlides.length - 1) {
+                            if (index > currentSlides.length - scope.visibleCount) {
                                 index = 0;
                             }
                             if (!locked) {
@@ -337,7 +337,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                         scope.prevSlide = function(slideOptions) {
                             var index = scope.carouselIndex - 1;
                             if (index < 0) {
-                                index = currentSlides.length - 1;
+                                index = currentSlides.length - scope.visibleCount;
                             }
                             goToSlide(index, slideOptions);
                         };
@@ -386,10 +386,33 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                         }
 
                         function getContainerWidth() {
-                            var rect = iElement[0].getBoundingClientRect();
+                            var rect = iElement.children()[0].getBoundingClientRect();
                             return rect.width ? rect.width : rect.right - rect.left;
                         }
 
+                        // need to make this run after window changes size too...
+                        function setVisibleCount(useTimeout) {
+                            var useTimeout = useTimeout || false;
+
+                            function getCount() {
+                                var item = iElement.children()[0].getBoundingClientRect(),
+                                    itemWidth = item.width ? item.width : item.right - item.left,
+                                    container = iElement[0].getBoundingClientRect(),
+                                    containerWidth = container.width ? container.width : container.right - container.left;
+
+                                return Math.floor(containerWidth / itemWidth);
+                            }
+
+                            // necessary as first call DOM isn't ready so can't calculate how many are visible
+                            if (useTimeout) {
+                                window.setTimeout(function () {
+                                    scope.visibleCount = getCount();
+                                }, 0);
+                            } else {
+                                scope.visibleCount = getCount();
+                            }
+                        }
+
                         function updateContainerWidth() {
                             elWidth = getContainerWidth();
                         }
@@ -452,7 +475,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                             var nextSlideIndexCompareValue = isRepeatBased ? repeatCollection.replace('::', '') + '.length - 1' : currentSlides.length - 1;
                             var tpl = '<div class="rn-carousel-controls">\n' +
                                 '  <span class="rn-carousel-control rn-carousel-control-prev" ng-click="prevSlide()" ng-if="carouselIndex > 0"></span>\n' +
-                                '  <span class="rn-carousel-control rn-carousel-control-next" ng-click="nextSlide()" ng-if="carouselIndex < ' + nextSlideIndexCompareValue + '"></span>\n' +
+                                '  <span class="rn-carousel-control rn-carousel-control-next" ng-click="nextSlide()" ng-if="carouselIndex < slides.length - visibleCount"></span>\n' +
                                 '</div>';
                             iElement.append($compile(angular.element(tpl))(scope));
                         }
@@ -486,7 +509,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
 
                                     if (newValue !== undefined && newValue !== null) {
                                         if (currentSlides && newValue >= currentSlides.length) {
-                                            newValue = currentSlides.length - 1;
+                                            setVisibleCount(true);
+                                            newValue = currentSlides.length - scope.visibleCount;
                                             updateParentIndex(newValue);
                                         } else if (currentSlides && newValue < 0) {
                                             newValue = 0;
@@ -568,7 +592,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
                                     shouldMove = Math.abs(absMove) > minMove;
 
                                 if (currentSlides && (slidesMove + scope.carouselIndex) >= currentSlides.length) {
-                                    slidesMove = currentSlides.length - 1 - scope.carouselIndex;
+                                    slidesMove = currentSlides.length - scope.visibleCount - scope.carouselIndex;
                                 }
                                 if ((slidesMove + scope.carouselIndex) < 0) {
                                     slidesMove = -scope.carouselIndex;