7

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
Ruben.Canton
  • 1,263
  • 3
  • 15
  • 29
  • 1
    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 Jul 25 '14 at 09:45

4 Answers4

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.

cyberwombat
  • 38,105
  • 35
  • 175
  • 251
  • 1
    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. – John Jeffery Sep 29 '16 at 07:01
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.

Sunny R Gupta
  • 5,026
  • 1
  • 31
  • 40
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.

Tiemin Li
  • 21
  • 4
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">
Bryn Kelly
  • 11
  • 1
  • 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. – Ram Jun 09 '18 at 11:56