Multi-item отзывчивый карусель

Question

Я строю веб-сайт, для которого требуется карусель. Потому что этот сайт построен на AngularJS Я хотел пойти с карусели Angulars Boostrap, однако эта карусель, кажется, допускает только одно изображение за раз.

То, что мне понадобится, будет 3 изображения за раз на рабочем столе, на планшете 2 изображения и на мобильном телефоне 1. Таким образом, здесь есть значительный элемент гибкого дизайна.

У кого-нибудь есть опыт с этим, что не связано с JQuery? Я не против этого, но мне сказал старший член команды, чтобы попытаться найти альтернативу, если таковая имеется.

То, что я пытался от бутстрапа углов главного: карусельного

$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) Один товар (мобильная версия):

2) Два Items (Tablet Версия):

3) Три Items (Desktop Version):

ЧАСТЬ 2: Он может также определить разрешение окна таким образом, чтобы определить, является ли tablet,mobile или desktop после этого tutorial ... Попробуйте использовать эти значения: "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(); 
    } 
    }; 
}); 

Надеется, что это помогает!