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

Kathir · Accepted Answer · 2015-04-28 20:43:28Z

12

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

edited Apr 28, 2015 at 20:43

answered Apr 28, 2015 at 18:47

Kathir

6,2068 gold badges38 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Belle Over a year ago

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 Over a year ago

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 Over a year ago

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

Shabbir Dhangot Over a year ago

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

jrobichaud Over a year ago

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 · Accepted Answer · 2018-02-06 02:26:28Z

0

I am using ng-repeat and converting to image,Here is my code but not converting

<carousel interval="myInterval">
    <slide ng-repeat="rc in RequirementConsultanctDetails" active="slide.active">

        <div class="" style="width:600px;margin:auto;" ng-show="rc.photo!=null">
            <div>
                <img ng-src="data:image/jpeg;base64,{{rc.photo}}" width="200px" style="float:left;">               
            </div>
            <div>                 
                <img ng-src="{{RequirementConsultanctDetails[getSecondIndex($index+1)].photo}}" width="200px" style="float:left;">                  
            </div>
            <div>                 
                <img ng-src="{{RequirementConsultanctDetails[getSecondIndex($index+2)].photo}}" width="200px" style="float:left;">                   
            </div>
        </div>
    </slide>
</carousel>

edited Feb 6, 2018 at 2:26

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered May 29, 2017 at 7:02

user8080009

1

1 Comment

Pang Over a year ago

Is this an answer or a question?

Collectives™ on Stack Overflow

AngularJS multi-item carousel

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related