Angular Corousel with Image-Thumbnail
· One min read
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;
}
}