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 ima

Answer 1

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.

Answer 2

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">

Answer 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.

Answer 4

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.