Possible to show two slides in the carousel at a time?

Question

I just started learning about Angular.js and I'm using the Carousel control in Angular-ui. Is it possible to display two slides at the same time instead of one?

I want to display the images like these -

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

Here's a sample -

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

Solution

You can group the images together and ng-repeat over those grouped images instead. Aside from some needed styling fixes, here's how:

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

Comments

[tempid]

You sir, are awesome! It worked like a charm. I'm liking Angular so far. Quick question - how do I add a border when I hover over an image? Just use CSS? If I needed to tweak the existing CSS, do I need to download the bootstrap.css locally, and then make the changes (no more CDN)?

[Langdon]

You should be able to use the :hover selector in css to add the border, so like img:hover { border: 1px solid red; }. And you don't need to download the bootstrap.css and modify it, you can edit your own css file locally and include it after bootstrap.css to overwrite whatever you want.

[tempid]

Thank you for your time. That makes sense.

[user3202087]

Will this answer help in general.. Like if i have n number of images in an array. As of now this answer shows just for 2 images(static). What if it is dynamic?

[serge]

What if I need to display 4 slides?

[Langdon]

@Serge add 4 <img> tags and change the logic inside the $watch