Çoklu öğe yanıtlı carousel

Question

Uygulanacak olan bir atlı karıncaya ihtiyaç duyan bir web sitesi yapıyorum. Bu web sitesi AngularJS üzerine kurulduğundan, Angulars Boostrap Carousel ile gitmek istedim, ancak bu atlıkarınca her seferinde bir görüntüye izin veriyor gibi görünüyor.

İhtiyacım olan şey masaüstünde, tablette 2 görüntüde ve mobil cihazda bir seferde 3 resim olacak. Yani burada da önemli bir duyarlı tasarım öğesi var.

Bu konuda JQuery içermeyen herhangi bir deneyimi var mı? Buna karşı değilim ama ekibin üst düzey bir üyesi tarafından, eğer varsa, bir alternatifi kaynaklamaya çalıştığı söylendi. Ben Angulars bootstrap gelen çalıştığım şey

:

$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 atlı karınca iyi bir seçim değildir, her slaytta izole kapsam gibi diğer dezavantajı var. Her slaytta birden çok öğeyi destekleyen https://github.com/revolunet/angular-carousel kullanıyorum. Bu yönerge ng-yinelemeyi desteklediğinden,

. Her slaytta farklı sayıda öğe ayarlamak için koleksiyonu değiştirip yuvalanmış ng-yinelemeyi kolayca kullanabilirsiniz.

<ul rn-carousel class="image"> 
    <li ng-repeat="images in imageCollection"> 
    <div ng-repeat="image in images" class="layer">{{ image }}</div> 
    </li> 
</ul> 

Daha önce 3 ara noktayı tanımladığınız gibi. Görüntü boyutu değiştiğinde sadece dizisini yeniden oluşturmamız gerekiyor.

$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

Yani, animasyonlar en çok öğe ile çalışmak angularjs Carousel (ui.bootstrap.carousel) yapmak amacıyla bunu denedik. Ayrıca [AngularJS kullanarak Duyarlı Web Siteleri için Algılama] uygulamayı denedim. http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview

Sonuçlar::

1) Tek Parça (Mobil Versiyonu):

2) İki Öğeler (Tablet 2

burada bir göz atın Versiyon):

3) Üç Öğeler (Masaüstü Versiyonu):

BÖLÜM 2: o olup olmadığını belirlemek amacıyla Ayrıca pencerenin çözünürlüğü algılayabilir tablet,mobile veya desktop takip eden tutorial ... Bu değerleri kullanmayı deneyin: "mobile, tablet, desktop" üç farklı görmek için sürümlerini görüntüle.tablet version ait

Gösteri:

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

yardımcı olur Umut!