多项目响应转盘

问题描述

我要建一个网站，要求将实施的传送带。由于这个网站是建立在 AngularJS 我想一起去Angulars自举旋转木马，但是，这种旋转木马似乎只允许一个图像在同一时间。

我需要将在桌面上一次3张图片，在平板电脑上2个图像和移动1，所以在这里也涉及响应式设计的显著元素。

有没有人有任何与此的遭遇，这并不涉及JQuery的？我不反对，但通过团队的高级成员已被告知，试图采购替代方案，如果有的话。

我从Angulars引导尝试什么：

  $ scope.getPromoURLs =功能（）{
        VAR subObj = myJSON.response.details.promotionalSpots;
        对（在subObj VAR键）{
            VAR值= subObj [键] .promotionUrl;
            $ scope.slides.push（值）;
        }
    };
    //从JSON对象源图像竣工图的促销URL的数组
    $ scope.getPromoURLs（）;    $ scope.addSlide =功能（）{
        //测试以确定3图像可以被拉到一起 - 未
        VAR newWidth = 600 + slides.length;
        slides.push（{
           图片：''+滑梯[0] +''+幻灯片[1] //等
           //试图在这里缝合在一起的图像
        }）;
    };    // TODO应该检查数组的长度并不难$ C $ 4 CD
    为（变量I = 0; I＆下; 4;我++）{
        $ scope.addSlide（）;
    }
 

解决方案

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

由于该指令的支持NG-重复。您可以轻松改变你的收集和使用嵌套NG​​-重复设置不同数量的每张幻灯片的项目。

 ＆LT; UL RN-旋转木马类=形象＆GT;
  ＆LT;李NG重复=，在imageCollection图像＆GT;
    ＆LT; D​​IV NG重复=形象形象CLASS =图层＆GT; {{}图像}＆LT; / DIV＆GT;
  ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

由于您已经定义了3个破发点。我们只需要重建 imageCollection 阵列时，视口大小改变。

  $ window.on（'调整'，函数（）{
    变种宽度= $ window.width（）;
    如果（宽＆GT; 900）{
       // 桌面
       rebuildSlide（3）;
    }否则如果（宽＆LT; = 900安培;＆安培;宽度GT; 480）{
       //平板电脑
       rebuildSlide（2）;
    }其他{
       // 电话
       rebuildSlide（1）;
    }
    //不要忘记手动触发$消化（）
    $ $范围摘要（）。
}）;功能rebuildSlide（N）{
   VAR imageCollection = []
       幻灯= []，
       指数;
   //值是实际的数据收集。
   对于（指数= 0;指数 -  LT; values​​.length;指数++）{
       如果（slide.length === N）{
           imageCollection.push（幻灯片）;
           滑动= [];
       }
       slide.push（值[指数]）;
   }
   imageCollection.push（幻灯片）;
   $ scope.imageCollection = imageCollection;
}
 

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.

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.

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.

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'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.

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>

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

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