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
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.
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.).
Use the [interval]="'0'" input. This will disable the auto-sliding feature. Here's the link to the Carousel Documentation.
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.
Bootstrap allows you to specify a class active
on the item
that has to be shown as active by default.
Try it this way.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With