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
  • 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 9:45
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.

|improve this answer|||||
  • I've noticed this approach works fine, however transition is not smooth. sometimes images blink. – Yasitha Chinthaka Feb 5 '16 at 4:55
  • Can you explain this method? I'm stuck on this issue. – Ka Mok Aug 14 '16 at 19:39
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.

|improve this answer|||||
  • 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 7:01
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.

|improve this answer|||||
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">
|improve this answer|||||
  • 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 9 '18 at 11:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.