多项目响应旋转木马

Question

我正在构建一个需要实施旋转木马的网站。因为这个网站是建立在AngularJS我想和Angulars Boostrap Carousel一起去，但是，这个旋转木马似乎一次只允许一张图片。

我需要的是在桌面上，平板电脑上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(); 
    }   

Answer 1

UI，引导旋转木马是不是一个好的选择，它有一个像每张幻灯片上孤立的范围等缺点。 我使用https://github.com/revolunet/angular-carousel，它支持每张幻灯片上的多项目。

因为此指令支持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> 

由于您已经定义了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; 
} 

Answer 2

所以，我想这一次，使angularjs Carousel (ui.bootstrap.carousel)每个动画多的项目工作。我也尝试应用[使用AngularJS检测响应式网站]。 2

到这里看看：http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview

结果：

1）一个项目（手机版）：

2）两个项目（平板版本）：

3）三个项目（桌面版）：

第2部分： 它还可以检测窗口的分辨率，以确定它是否是tablet,mobile或desktop继此tutorial ... 尝试使用此值："mobile, tablet, desktop"看到三个不同ent视图版本。

示范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(); 
    } 
    }; 
}); 

希望它能帮助！