AngularJS multi-item carousel

Question

I'm using UI Bootstrap carousel, but it displays only one slide - http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview.
How to display images this way?

img1 - img2 - img3
then
img2 - img3 - img4 
then
img3 -img4 - img5
then
img4 - img5 - img6
then
img5 - img6 - img1

(like in the this carousel http://coolcarousels.frebsite.nl/c/58/)

Solution

You can use the $index inside the ng-repeat to create additional images and add the next two images.

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

 <carousel interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <div class="" style="width:600px;margin:auto;">
    <div >
    <img ng-src="{{slide.image}}" width="200px" style="float:left;">
    </div>
    <div >
    <img ng-src="{{slides[getSecondIndex($index+1)].image}}" width="200px" style="float:left;" >
    </div>
     <div >
    <img ng-src="{{slides[getSecondIndex($index+2)].image}}" width="200px" style="float:left;" >
    </div>
    </div>
  </slide>
</carousel>

Code to get the rotating images

$scope.getSecondIndex = function(index)
  {
    if(index-slides.length>=0)
      return index-slides.length;
    else
      return index;
  }

Comments

[Belle]

I've already tried it. The problem is that {{slides[$index+1].image}} and {{slides[$index+2].image}} are empty at the end of slider. For instance, if I have 4 images in $scope.slides, it will display them like this: img1 -img2 - img3 and then img4 - empty - empty. But I want it to show img1 - img2 - img3 ,then img4 - img1 - img2, then img1 - img2 - img3 and so on.

[Belle]

Thanks, it works. But still it's a little bit different from what I want. Is it possible to make it display images like in this slider coolcarousels.frebsite.nl/c/58?

[Belle]

Kathir,thank you so much! I've changed my slider a little bit, and now everything works perfectly well! =))

[Madasu K]

@Kathir, In your solution, I want carousel right controller to be disabled once all the images in the array are displayed. That is, in the carousel, when the right end image is the last image in the slides, the right controller should be disabled, i.e., there should be not be any more sliding effect.

[Shabbir Dhangot]

@Kathir I am getting problem in angular 2. Any example you have.

[jrobichaud]

This answer does not work properly. The animation is wrong, it does an animation like it was offsetting of 3 but it actually offsets the images by 1.

[Pang]

Is this an answer or a question?

[manihiki]

Hi @Kathir or anyone else, know how to modify this so the animation only offsets by 1 image instead of all 3? (jrobichaud mentions this in his comment above)