Carousel reattivo multielemento

Question

Sto costruendo un sito Web che richiede l'implementazione di un carosello. Poiché questo sito Web è basato su AngularJS Volevo andare con Angosars Boostrap Carousel, tuttavia, questa giostra sembra consentire solo un'immagine alla volta.

Quello che mi servirà saranno 3 immagini alla volta sul desktop, su un tablet 2 immagini e sul cellulare 1. Quindi anche qui c'è un elemento significativo del design reattivo.

Qualcuno ha qualche esperienza con questo che non coinvolge JQuery? Non mi oppongo ma mi è stato detto da un anziano membro del team di cercare di trovare un'alternativa, se esiste.

Quello che ho cercato da Angolari bootstrap: carosello

$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

di ui-bootstrap non è una buona scelta, ha altro inconveniente come scopo isolato su ciascun vetrino. Sto usando https://github.com/revolunet/angular-carousel che supporta il multi elemento su ogni diapositiva.

Poiché questa direttiva supporta ng-repeat. Puoi facilmente modificare la tua raccolta e utilizzare ng-repeat nidificato per impostare un numero diverso di elementi in ogni diapositiva.

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

Come già definito 3 punti di interruzione. Abbiamo solo bisogno di ricostruire l'array imageCollection quando le dimensioni della vista cambiano.

$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

Così, ho provato questo in modo da rendere angularjs Carousel (ui.bootstrap.carousel) a lavorare con i multi articoli per l'animazione. Ho anche provato ad applicare [Rilevamento per siti Web reattivi utilizzando AngularJS]. 2

Date un'occhiata qui: http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview

Risultati:

1) Un Prodotto (Versione Mobile):

2) due voci (Tablet Versione):

3) tre elementi (Desktop Version):

PARTE 2: Può anche rilevare la risoluzione della finestra in modo da determinare se si tratta di tablet,mobile o desktop seguito da questo tutorial ... Provare a utilizzare questi valori: "mobile, tablet, desktop" per vedere le tre differenze Vedi le versioni.

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

Speranza che aiuta!