Multi-item responsive carousel

Question

I'm building a website that requires a carousel to be implemented. Because this website is built on AngularJS I wanted to go with Angulars Boostrap Carousel, however, this carousel appears to only allow one image at a time.

What I will need will be 3 images at a time on desktop, on a tablet 2 images and on mobile 1. So there's a significant element of responsive design involved here too.

Does anyone have any experince with this that doesn't involve JQuery? I'm not opposed to it but have been told by a senior member of the team to try to source an alternative, if any.

What I tried from Angulars bootstrap:

   $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's carousel is not a good choice, it has other drawback like isolated scope on each slide. I'm using https://github.com/revolunet/angular-carousel which support multi item on each slide.

Because this directive support ng-repeat. You easy change you collection and using nested ng-repeat to set different number of items in each slide.

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

As you have already defined 3 break points. We just need to reconstruct the imageCollection array when viewport size changed.

$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;
}