After experimenting with integrating the angularjs Carousel (ui.bootstrap.carousel) to support multiple items per animation, I also explored implementing [Detection for Responsive Websites using AngularJS].2
Check out the demo here: http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview
Results:
1 ) Single Item (Mobile Version) :
2 ) Double Items (Tablet Version) :
3 ) Triple Items (Desktop Version) :
PART 2:
It can also detect the window resolution to determine whether it is tablet, mobile or desktop by following this tutorial...
Experiment with these values: "mobile, tablet, desktop" to see the three different view versions.
Showcase of the tablet version:
var app = angular.module('myApp', ['ui.bootstrap', 'angular-responsive']);
app.controller('MainCtrl', function($scope) {
$scope.displayMode = 'mobile'; // default value
$scope.$watch('displayMode', function(value) {
switch (value) {
case 'mobile':
// execute code for mobile mode
console.log(value);
break;
case 'tablet':
// perform tasks for tablet mode
console.log(value);
break;
}
});
});
function CarouselDemoCtrl($scope) {
var whatDevice = $scope.nowDevice;
$scope.myInterval = 7000;
$scope.slides = [{
image: 'http://placekitten.com/221/200',
text: 'Kitten.'
}, {
image: 'http://placekitten.com/241/200',
text: 'Kitty!'
}, {
image: 'http://placekitten.com/223/200',
text: 'Cat.'
}, {
image: 'http://placekitten.com/224/200',
text: 'Feline!'
}, {
image: 'http://placekitten.com/225/200',
text: 'Cat.'
}, {
image: 'http://placekitten.com/226/200',
text: 'Feline!'
}, {
image: 'http://placekitten.com/227/200',
text: 'Cat.'
}, {
image: 'http://placekitten.com/228/200',
text: 'Feline!'
}, {
image: 'http://placekitten.com/229/200',
text: 'Cat.'
}, {
image: 'http://placekitten.com/230/200',
text: 'Feline!'
}];
var i, first = [],
second, third;
var many = 1;
//##################################################
//Need to be changed to update the carousel since the resolution changed
$scope.displayMode = "tablet";
//##################################################
if ($scope.displayMode == "mobile") {many = 1;}
else if ($scope.displayMode == "tablet") {many = 2;}
else {many = 3;}
for (i = 0; i < $scope.slides.length; i += many) {
second = {
image1: $scope.slides[i]
};
if (many == 1) {}
if ($scope.slides[i + 1] && (many == 2 || many == 3)) {
second.image2 = $scope.slides[i + 1];
}
if ($scope.slides[i + (many - 1)] && many == 3) {
second.image3 = $scope.slides[i + 2];
}
first.push(second);
}
$scope.groupedSlides = first;
}
app.directive('dnDisplayMode', function($window) {
return {
restrict: 'A',
scope: {
dnDisplayMode: '='
},
template: '<span class="mobile"></span><span class="tablet"></span><span class="tablet-landscape"></span><span class="desktop"></span>',
link: function(scope, elem, attrs) {
var markers = elem.find('span');
function isVisible(element) {
return element && element.style.display != 'none' && element.offsetWidth && element.offsetHeight;
}
function update() {
angular.forEach(markers, function(element) {
if (isVisible(element)) {
scope.dnDisplayMode = element.className;
return false;
}
});
}
var t;
angular.element($window).bind('resize', function() {
clearTimeout(t);
t = setTimeout(function() {
update();
scope.$apply();
}, 300);
});
update();
}
};
});
I trust this provides some valuable insight!