demo(carousel): center images and increase size to full frame

Author: Justin Hall

src/carousel/docs/demo.html

@@ -1,13 +1,15 @@
 <div ng-controller="CarouselDemoCtrl">
-  <carousel interval="myInterval">
-    <slide ng-repeat="slide in slides" active="slide.active">
-      <img ng-src="{{slide.image}}" style="margin:auto;">
-      <div class="carousel-caption">
-        <h4>Slide {{$index}}</h4>
-        <p>{{slide.text}}</p>
-      </div>
-    </slide>
-  </carousel>
+  <div style="height: 305px">
+    <carousel interval="myInterval">
+      <slide ng-repeat="slide in slides" active="slide.active">
+        <img ng-src="{{slide.image}}" style="margin:auto;">
+        <div class="carousel-caption">
+          <h4>Slide {{$index}}</h4>
+          <p>{{slide.text}}</p>
+        </div>
+      </slide>
+    </carousel>
+  </div>
   <div class="row">
     <div class="col-md-6">
       <a class="btn btn-info" ng-click="addSlide()">Add Slide</a>

src/carousel/docs/demo.js

@@ -2,9 +2,9 @@ function CarouselDemoCtrl($scope) {
   $scope.myInterval = 5000;
   var slides = $scope.slides = [];
   $scope.addSlide = function() {
-    var newWidth = 200 + ((slides.length + (25 * slides.length)) % 150);
+    var newWidth = 600 + slides.length;
     slides.push({
-      image: 'http://placekitten.com/' + newWidth + '/200',
+      image: 'http://placekitten.com/' + newWidth + '/300',
       text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
         ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
     });

template/carousel/slide.html

@@ -4,4 +4,4 @@
     'next': (next || active) && direction=='next',
     'right': direction=='prev',
     'left': direction=='next'
-  }" class="item" ng-transclude></div>
+  }" class="item text-center" ng-transclude></div>