Question

我正在建立一个需要实施轮播的网站。因为这个网站建立在 AngularJS 上，我想使用Angulars Boostrap Carousel，但是，这个轮播似乎一次只允许一个图像。

我需要的是桌面，平板电脑2图像和移动设备上的3张图像。因此，这里也有一个重要的响应式设计元素。

有没有人对此有任何不涉及JQuery的经验？我并不反对，但团队的一名高级成员告诉我，如果有的话，我会尝试寻找替代方案。

我从Angulars bootstrap尝试了什么：

   $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-bootstrap的旋转木马不是一个好选择，它有其他缺点，如每张幻灯片上的隔离范围。我正在使用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）一个项目（手机版）：

enter image description here

2）两项（平板电脑版）：

enter image description here

3）三项（桌面版）：

enter image description here

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

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

希望它有所帮助！

多项响应式旋转木马

2 个答案: