多项目响应轮播

Posted 2023-02-22

【中文标题】多项目响应轮播

【英文标题】：Multi-item responsive carousel

【发布时间】：2014-12-02 19:50:02

【问题描述】：

我正在构建一个需要实施轮播的网站。因为这个网站是建立在 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();
            

【问题讨论】：

Should I use a carousel?（剧透：答案是否定的）。轮播真的、真的有必要吗？

@GregL 嗨，格雷格，是的，我之前读过，不幸的是，这是业务的要求，并且已经受到开发人员的质疑 - 他们坚持使用它

你可以看看github.com/gilbitron/carouFredSel。这是一个响应式轮播（唉，建立在 jQuery 之上）

@Katana24 -- 我使用owlgraphic.com/owlcarousel/demos/itemsCustom.html（这是此轮播的第 1 版，第 2 版更好，但在 Beta 版中，我不会在生产中使用）。

【参考方案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;

【讨论】：

我目前正在对此进行检查，但据我所见，它应该可以完成这项工作。我想要的功能的关键部分是我不应该加载任何额外的 JQuery 库。很好的发现！

多项目是什么意思？我们可以通过使用上述指令来做到这一点吗？ bootsnipp.com/snippets/featured/carousel-product-cart-slider

@Sampath 多项目意味着您需要使用 ng-repeat 在每张幻灯片中生成多个块。该指令可以支持您的展示案例

@lordfriend 你会如何处理 3 个项目，但是当你滑动时，只有一个项目从一侧隐藏，而只有一个项目从另一侧出现？像这样：coolcarousels.frebsite.nl/c/58

@Ravul 好吧，指令可能不支持您期望的功能。您可能需要找到其他解决方案

【参考方案2】：

所以，我尝试了这个，以使angularjs Carousel (ui.bootstrap.carousel) 可以在每个动画中处理多个项目。我也尝试申请 [Detection for Responsive Websites using AngularJS].2

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

结果：

1）一件（手机版）：

2) 两件（平板版）：

3）三件套（桌面版）：

第 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();
    
  ;
);

希望对你有帮助！

【讨论】：

此代码是否损坏。当我查看演示时，在较小的屏幕上，幻灯片仍然存在，只是垂直显示？

我们可以动态地做到这一点吗？我想创建这种类型的轮播。 carousel