Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
like image 923
Ruben.Canton Avatar asked Jul 25 '14 09:07

Ruben.Canton


People also ask

How do I Autoplay Bootstrap carousel?

To set or to stop autoplay in Bootstrap carousel you can use data attributes or JavaScript code. You'll find detailed documentation and code examples of Bootstrap Carousel in Bootstrap Carousel Docs. Note: Autoplay for the carousel is turned on from default.

Why is Bootstrap carousel not sliding?

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

How do I make Bootstrap carousel not slide automatically?

Use the [interval]="'0'" input. This will disable the auto-sliding feature. Here's the link to the Carousel Documentation.


2 Answers

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.

like image 169
cyberwombat Avatar answered Oct 13 '22 01:10

cyberwombat


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

Try it this way.

like image 45
Sunny R Gupta Avatar answered Oct 13 '22 00:10

Sunny R Gupta