CODEWITHSUNDEEP
javascriptangularjscarouselangular-ui-bootstrap
Ruben.Canton
Ruben.Canton

Reputation: 1303

Setting active slide on angular-ui-bootstrap carousel

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

Upvotes: 7

Views: 12668

Answers (4)

Bryn Kelly
Bryn Kelly

Reputation: 11

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

Upvotes: 1

cyberwombat
cyberwombat

Reputation: 40084

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.

Upvotes: 7

Tiemin Li
Tiemin Li

Reputation: 21

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.

Upvotes: 1

Sunny R Gupta
Sunny R Gupta

Reputation: 5126

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

Try it this way.

Upvotes: 3

Related Questions