Also habe ich versucht, diese ein, um angularjs Carousel (ui.bootstrap.carousel) zu machen mit Multi Artikel pro Animation zu arbeiten. Ich habe auch versucht, [Erkennung für Responsive Websites mit AngularJS] anzuwenden. 2
Werfen Sie einen Blick hier: http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview
Ergebnisse:
1) Ein Artikel (Handy-Version):
2) Zwei Artikel (Tablet Version):
3) Drei Artikel (Desktop-Version):
TEIL 2: Es kann auch die Auflösung des Fensters erfassen, um zu bestimmen, ob es tablet,mobile
oder desktop
folgende tutorial ... Versuchen Sie, diese Werte zu verwenden: "mobile, tablet, desktop"
, um die drei verschiedenen zu sehen ent sehen Versionen.
Demonstration dertablet 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':
// do stuff for mobile mode
console.log(value);
break;
case 'tablet':
// do stuff 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();
}
};
});
Hoffe, es hilft!
[Sollte ich ein Karussell verwenden?] (Spoiler: Die Antwort ist nein). Ist ein Karussell wirklich, wirklich notwendig? – GregL
@GregL Hallo Greg, yeah Ich habe das vorher gelesen und leider ist es eine Anforderung aus dem Geschäft und wurde bereits von Entwicklern in Frage gestellt - sie bleiben dabei – Katana24
Sie können einen Blick auf https://github.com/ Gilbitron/CarouFredSel. Es ist ein reaktionsfähiges Karussell (leider auf jQuery aufgebaut) – HerrSerker