Possible d'afficher deux diapositives dans le carrousel à la fois?

Question

Je viens de commencer à apprendre sur Angular.js et j'utilise le contrôle Carousel dans Angular-ui. Est-il possible d'afficher deux diapositives en même temps au lieu d'une?

Je veux afficher les images comme celles-ci -

< image 1 image 2 > 
then 
< image 3 image 4 > 
then 
< image 5 image 6 > 

Voici un échantillon -

http://plnkr.co/edit/BnErmMDl8nPvXPrw3ULu?p=preview

Answer 1

Vous pouvez regrouper les images ensemble et ng-repeat sur ces images regroupées au lieu. Mis à part quelques corrections de style nécessaires, voici comment:

http://plnkr.co/edit/5JFeZgTup7abIsjxOeqi?p=preview

HTML:

<carousel interval="myInterval"> 
    <slide ng-repeat="slideCollection in groupedSlides" active="slide.active"> 
    <div> 
     <img ng-src="{{slideCollection.image1.image}}" style="margin:auto;">  
     <img ng-src="{{slideCollection.image2.image}}" style="margin:auto;">  
    </div> 
    </slide> 
</carousel> 

JavaScript:

$scope.$watch('slides', function(values) { 
    var i, a = [], b; 

    for (i = 0; i < $scope.slides.length; i += 2) { 
    b = { image1: $scope.slides[i] }; 

    if ($scope.slides[i + 1]) { 
     b.image2 = $scope.slides[i + 1]; 
    } 

    a.push(b); 
    } 

    $scope.groupedSlides = a; 
}, true);