Я создаю веб-сайт, для которого требуется карусель. Поскольку этот сайт построен на AngularJS, я хотел пойти с Angulars Boostrap Carousel, однако эта карусель, кажется, допускает только одно изображение за раз.
То, что мне понадобится, будет равно 3 снимкам за раз на рабочем столе, на планшете 2 изображения и на мобильном телефоне 1. Таким образом, здесь также присутствует значительный элемент гибкого дизайна.
Есть ли у кого-нибудь эксперимент, который не связан с JQuery? Я не против этого, но сказал старшему члену команды, чтобы попытаться найти альтернативу, если она есть.
Что я пробовал из бутстрапа 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();
}