Setting active slide on angular-ui-bootstrap carousel

Question

I'm using angular, bootstrap and a plugin called "ui-bootstrap" for angular to make a carousel.

I have a list of thumbnails and when clicking one a modal with the images in high definition inside a carousel is displayed, something similar to what you have on Amazon or other websites. I was trying to set the first shown image in the carousel as the one the user clicked.

I've been able to get the index of the image using $index as I'm inside an ng-repeat, give it to the modal controller and displayed the carousel with no problems. But the first image i always the index 0, even if I try to set the index that I have.

These are some of the things I tried:

    $scope.SliderItems = items; // This one sets the items in the slider array

    items[selectedIndex].active = true;
    $scope.SliderItems[selectedIndex].active = true;
    $scope.SliderItems.select(SliderItems[selectedIndex]);

I also tried to set it on a property, setting the "active" property to true on the required item showed it but then it was blocked on that item, crashing the carousel. Also, tried the property "data-slide-to" on the carousel element without success.

    $scope.SelectedIndex = selectedIndex;

So I don't know which property/method to use to do this, and the documentation on the page of the plugin doesn't give me more indications either :(

http://angular-ui.github.io/bootstrap/

Does anyone know how to set the default active slide? And even how to set it after loading it as it could be useful to have a carousel with thumbnails on the bottom that you can click to display the main image or something.

Thanks.

Solved

I tried to do something like this before and didn't work somehow, but trying again with a different approach I made it work this time. So, after setting the .active=true at the Controller, this is the HTML:

    <carousel>
        <slide ng-repeat="item in SliderItems" active="item.active">
            ...
        </slide>
    </carousel>

and just in case, the controller:

    $scope.SliderItems = items; // items comes from another controller with the items
    $scope.SliderItems[selectedIndex].active = true; //selectedIndex also comes from the other controller

Well thanks, as I say there I already tried this, but just to show you the code I've tried again and it worked this time. Maybe I didn't do it right last time. — Ruben.Canton
– Ruben.Canton, Commented Jul 25, 2014 at 9:45

cyberwombat · Accepted Answer · 2016-05-20 22:44:56Z

7

There is an active directive on the uib-carousel element:

<uib-carousel interval="5000" active="vm.active">
  <uib-slide ng-repeat="slide in vm.slides track by $index" index="$index">
       <img...
  </uib-slide>
</uib-carousel>

You can set the active slide by assigning the $index of the desired slide to the active parameter:

<a ng-click="vm.active=3">Make slide 3 active</a>

AngularUI watches the 'active' field and will create a smooth transition to the selected slide.

I believe this behavior is recent and supersedes setting the active property from the older versions.

answered May 20, 2016 at 22:44

cyberwombat

40.5k43 gold badges189 silver badges268 bronze badges

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

1 Comment

John Jeffery Over a year ago

Yes, you need a reasonably recent version of angular-ui-bootstrap for this to work. It works for me in version 1.3.3, but not in version 1.1.2.

Sunny R Gupta · Accepted Answer · 2014-07-25 11:31:35Z

3

Bootstrap allows you to specify a class active on the item that has to be shown as active by default.

Try it this way.

answered Jul 25, 2014 at 11:31

Sunny R Gupta

5,1461 gold badge33 silver badges41 bronze badges

2 Comments

Yasitha Waduge Over a year ago

I've noticed this approach works fine, however transition is not smooth. sometimes images blink.

Ka Mok Over a year ago

Can you explain this method? I'm stuck on this issue.

Tiemin Li · Accepted Answer · 2016-01-20 01:35:20Z

1

I have same issue. In my case, the next and prev action does not work when I set a active slide to true.

here is codepen for that. '//codepen.io/tiemin/pen/QyOYYb'

See the Pen Test carousel for set active slide by Tiemin Li (@tiemin) on CodePen.

Seems like the current ui-bootstrap version is not compatible with angular.

answered Jan 20, 2016 at 1:35

Tiemin Li

214 bronze badges

Comments

Bryn Kelly · Accepted Answer · 2017-03-01 19:34:46Z

1

I was attempting to figure out how to set my first item in the Bootstrap Carousel: http://getbootstrap.com/javascript/#carousel

To a class of "active" on page load, like this:

<div class="item active">

And solved it by using the ngClass directive: https://docs.angularjs.org/api/ng/directive/ngClass

To add an expression that determines whether the index is 0, and then sets the class to "active".

Example:

<div class="item" ng-class="{{$index}} == 0 ? 'active' : ''" ng-repeat="image in $ctrl.images">

This renders on the page as:

<div class="item ng-binding ng-scope active" ng-class="0 == 0 ? 'active' : ''" ng-repeat="image in $ctrl.images">

answered Mar 1, 2017 at 19:34

Bryn Kelly

111 bronze badge

1 Comment

Ram Over a year ago

Great post indeed! Welcome to stackoverflow. So I made it out of it as below: instead of checking {{$index}} == 0, we need to replace the 0 with a variable like {{$index}} == isIndexActive, and the variable can be go for a increment or decrement.

Collectives™ on Stack Overflow

Setting active slide on angular-ui-bootstrap carousel

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related