Bootstrap grid carousel slider using angular Js

Question

I have approximately 20 results. I want to show 2 rows each with 4 grids in tablet mode and I want to slide the grids from left to right (carousel). How do I do this using AngularJS?

<div class="margin-25">
    <div ng-repeat="customer in customerData" class="col-sm-3">
      <div class="well">

          <a href="profile.html">
              <div class="col-sm-4">
                <div class="text-center">
                    <img src="../app/imgs/photo.jpg" width="50" height="50" class="img-circle m-t-xs img-responsive" alt="image">
                    <div class="m-t-xs font-bold">{{customer.customerName}}</div>
                </div>
              </div>
              <div class="col-sm-8">              
                  <h4><strong>{{customer.CustomerNumber}}</strong></h4>
                  <address>                
                      {{customer.branch.address}}<br>
                      {{customer.branch.city}}<br>                
                  </address>
              </div>
              <div class="clearfix"></div>
            </a>           
      </div>
    </div>
  </div>

Can anybody suggest the best examples or an any approach to do this?

Answer 1

This may not be the prettiest way to do but this is generating slides dynamically now regardless of the size of the customerData. I used a filter from This Post to keep track of the customers as the slide changes.

  <carousel interval="myInterval" no-wrap="noWrapSlides">

    <slide active="slide.active" ng-repeat="slide in customerData | limitTo: slideLength track by $index">
     <div class="col-sm-3" ng-repeat="customer in customerData | startFrom: ($index*8) | limitTo: 8">
         <div class="well">

             <a href="profile.html">
                 <div class="col-sm-4">
                   <div class="text-center">
                       <img src="http://placehold.it/150x150.gif" width="50" height="50" class="img-circle m-t-xs img-responsive" alt="image">
                       <div class="m-t-xs font-bold">{{customer.customerName}}</div>
                   </div>
                 </div>
                 <div class="col-sm-8">              
                     <h4><strong>{{customer.CustomerNumber}}</strong></h4>
                     <address>                
                         {{customer.branch.address}}<br>
                         {{customer.branch.city}}<br>                
                     </address>
                 </div>
                 <div class="clearfix"></div>
               </a>           
         </div>
       </div>
    </slide>

  </carousel>

 

  angular.module('demoApp', ['ngAnimate', 'ui.bootstrap'])

 .filter('startFrom', function() {
   return function(input, start) {
          if(input) {
              start = +start; //parse to int
              return input.slice(start);
          }
          return [];
      }
  })

.controller('DemoApp', ['$scope', function ($scope) {

$scope.slideLength = Math.ceil($scope.customerData.length / 8); // place this after your model has been declared