多项目响应轮播 [英] Multi-item responsive carousel

问题描述

我正在构建一个需要实施轮播的网站.因为这个网站是建立在 AngularJS 之上的，所以我想使用 Angulars Boostrap Carousel，但是，这个 carousel 似乎一次只允许一张图片.

I'm building a website that requires a carousel to be implemented. Because this website is built on AngularJS I wanted to go with Angulars Boostrap Carousel, however, this carousel appears to only allow one image at a time.

我需要在台式机上一次 3 张图片，在平板电脑上 2 张图片，在移动设备上一次 1 张.因此，这里也涉及响应式设计的一个重要元素.

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.

有没有人有任何不涉及 JQuery 的经验?我并不反对，但团队的一位高级成员告诉我尝试寻找替代方案(如果有).

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.

我从 Angulars bootstrap 中尝试的:

What I tried from 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();
    }        

推荐答案

ui-bootstrap 的轮播不是一个好的选择，它还有其他缺点，比如每张幻灯片上的孤立范围.我正在使用 https://github.com/revolunet/angular-carousel 支持多项目在每张幻灯片上.

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-carousel which support multi item on each slide.

因为这个指令支持ng-repeat.您可以轻松更改集合并使用嵌套的 ng-repeat 在每张幻灯片中设置不同数量的项目.

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.

<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 数组.

As you have already defined 3 break points. We just need to reconstruct the imageCollection array when viewport size changed.

$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;
}

这篇关于多项目响应轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！