Question

160

Multi-item responsive carousel

rated 0 times [ 166] [ 6] / answers: 1 / hits: 31944 / 10 Years ago, wed, october 8, 2014, 12:00:00

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

    }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cierra

Add To Favorites

Follow

Total Points: 504

Total Questions: 108

Total Answers: 109

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

answered 10 Years ago jarettajb · Accepted Answer

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;

}