title: Multi-item responsive carousel
body: <p>I'm building a website that requires a carousel to be implemented. Because this website is built on <strong>AngularJS</strong> I wanted to go with Angulars Boostrap Carousel, however, this carousel appears to only allow one image at a time. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>What I tried from Angulars bootstrap:</p>
  
  <pre><code>   $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 &lt; 4; i++) {
          $scope.addSlide();
      }        
  </code></pre>