Javascript 多项目响应轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26252038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multi-item responsive carousel
提问by Katana24
I'm building a website that requires a carousel to be implemented. Because this website is built on AngularJSI wanted to go with Angulars Boostrap Carousel, however, this carousel appears to only allow one image at a time.
我正在构建一个需要实施轮播的网站。因为这个网站是建立在AngularJS 上的，所以我想使用 Angulars Boostrap Carousel，但是，这个 carousel 似乎一次只允许一张图片。
What I will need will be 3 images at a time on desktop, on a tablet 2 images and on mobile 1. So there's a significant element of responsive design involved here too.
我将需要在桌面上一次 3 张图片，在平板电脑上 2 张图片和在移动设备上 1 张。所以这里也涉及响应式设计的一个重要元素。
Does anyone have any experince with this that doesn't involve JQuery? I'm not opposed to it but have been told by a senior member of the team to try to source an alternative, if any.
有没有人有任何不涉及 JQuery 的经验？我并不反对它，但团队的一名高级成员告诉我尝试寻找替代方案，如果有的话。
What I tried from Angulars bootstrap:
我从 Angulars 引导程序中尝试过的：
$scope.getPromoURLs = function() {
var subObj = myJSON.response.details.promotionalSpots;
for( var keys in subObj ) {
var value = subObj[keys].promotionUrl;
$scope.slides.push( value );
}
};
// Builts an array of promotional URLS to from a JSON object to source the images
$scope.getPromoURLs();
$scope.addSlide = function () {
// Test to determine if 3 images can be pulled together - FAILS
var newWidth = 600 + slides.length;
slides.push({
image: ''+slides[0]+''+slides[1] // etc
// Tried to stitch images together here
});
};
// TODO Should examine array length not hardcoded 4
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
采纳答案by Bob Yuan
ui-bootstrap's carousel is not a good choice, it has other drawback like isolated scope on each slide. I'm using https://github.com/revolunet/angular-carouselwhich support multi item on each slide.
ui-bootstrap 的轮播不是一个好的选择，它还有其他缺点，比如每张幻灯片上的孤立范围。我正在使用https://github.com/revolunet/angular-carousel，它支持每张幻灯片上的多个项目。
Because this directive support ng-repeat. You easy change you collection and using nested ng-repeat to set different number of items in each slide.
因为这个指令支持 ng-repeat。您可以轻松更改集合并使用嵌套的 ng-repeat 在每张幻灯片中设置不同数量的项目。
<ul rn-carousel class="image">
<li ng-repeat="images in imageCollection">
<div ng-repeat="image in images" class="layer">{{ image }}</div>
</li>
</ul>
As you have already defined 3 break points. We just need to reconstruct the imageCollectionarray when viewport size changed.
因为您已经定义了 3 个断点。我们只需要imageCollection在视口大小改变时重建数组。
$window.on('resize', function() {
var width = $window.width();
if(width > 900) {
// desktop
rebuildSlide(3);
} else if(width <= 900 && width > 480) {
// tablet
rebuildSlide(2);
} else {
// phone
rebuildSlide(1);
}
// don't forget manually trigger $digest()
$scope.$digest();
});
function rebuildSlide(n) {
var imageCollection = [],
slide = [],
index;
// values is your actual data collection.
for(index = 0; index < values.length; index++) {
if(slide.length === n) {
imageCollection.push(slide);
slide = [];
}
slide.push(values[index]);
}
imageCollection.push(slide);
$scope.imageCollection = imageCollection;
}
回答by Giannis Grivas
So, I tried this one so as to make angularjs Carousel (ui.bootstrap.carousel)to work with multi items per animation. I have also tried to apply [Detection for Responsive Websites using AngularJS].2
所以，我尝试了这个，以使angularjs Carousel (ui.bootstrap.carousel)能够处理每个动画的多个项目。我还尝试应用 [使用 AngularJS 检测响应式网站]。2
Take a look here: http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview
看看这里：http: //plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview
Results:
结果：
1 ) One Item (Mobile Version) :
1 ) 一件（手机版）：
2 ) Two Items (Tablet Version) :
2 ) 两件 (平板版) :
3 ) Three Items (Desktop Version) :
3 ) 三项（桌面版）：
PART 2:It can also detect the resolution of the window so as to determine if it is tablet,mobileor desktopfollowing this tutorial...
Try to use this values: "mobile, tablet, desktop"to see the three different view versions.
第 2 部分：它还可以检测窗口的分辨率，以确定它是否tablet,mobile或desktop遵循本教程...尝试使用此值："mobile, tablet, desktop"查看三个不同的视图版本。
Demonstration of thetablet version:
演示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':
// 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();
}
};
});
Hope it helps!
希望能帮助到你！
