Angular Corousel with Image-Thumbnail

See http://plnkr.co/edit/8TACXGHmMDV4k0O7D6DC?p=preview

We have implemented the corousel with image thumbnail into an AngularJS (Angular version 1) project based on the bootstrap angular-ui library, http://angular-ui.github.io/bootstrap/.

Preview

HTML Code

Slide {{$index}}

{{slide.text}}_P_ _N_ Add SlideInterval, in milliseconds:   
        
Enter a negative number to stop the interval.

JS Code

angular.module('plunker', ['ui.bootstrap']);  
function CarouselDemoCtrl($scope) {  
  $scope.myInterval = 5000;  
  $scope.thumbnailSize = 5;  
  $scope.thumbnailPage = 1;  
  var slides = $scope.slides = [];  
  $scope.addSlide = function(i) {  
    var newWidth = 600 + slides.length;  
    slides.push({  
      image: 'http://placekitten.com/' + newWidth + '/300',  
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +  
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4],  
      index: i  
    });  
  };  
  for (var i=0; i<8; i++) {  
    $scope.addSlide(i);  
  }  
    
  $scope.prevPage = function(){  
    if ($scope.thumbnailPage > 1){  
      $scope.thumbnailPage--;  
    }  
    $scope.showThumbnails = slides.slice(($scope.thumbnailPage-1)*$scope.thumbnailSize,$scope.thumbnailPage*$scope.thumbnailSize);  
  }  
    
  $scope.nextPage = function(){  
    if ($scope.thumbnailPage <= Math.floor(slides.length/$scope.thumbnailSize)){  
      $scope.thumbnailPage++;  
    }  
    $scope.showThumbnails = slides.slice(($scope.thumbnailPage-1)*$scope.thumbnailSize,$scope.thumbnailPage*$scope.thumbnailSize);  
  }  
    
  $scope.showThumbnails = slides.slice(($scope.thumbnailPage-1)*$scope.thumbnailSize,$scope.thumbnailPage*$scope.thumbnailSize);  
  $scope.setActive = function(idx) {  
    $scope.slides[idx].active=true;  
  }  
}