Question

17

AngularJS multi-item carousel

rated 0 times [ 19] [ 2] / answers: 1 / hits: 18627 / 9 Years ago, tue, april 28, 2015, 12:00:00

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

Answers

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

ellisc

Add To Favorites

Follow

Total Points: 533

Total Questions: 82

Total Answers: 90

Location: Bangladesh

Member since Thu, Aug 5, 2021

3 Years ago

answered 9 Years ago mckenna · Accepted Answer

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;

  }