javascript 在 angular-ui-bootstrap 轮播上设置活动幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24952433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting active slide on angular-ui-bootstrap carousel
提问by Ruben.Canton
I'm using angular, bootstrap and a plugin called "ui-bootstrap" for angular to make a carousel.
我正在使用 angular、bootstrap 和一个名为“ui-bootstrap”的插件来让 angular 制作旋转木马。
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.
我已经能够使用 $index 获取图像的索引，因为我在 ng-repeat 中，将其提供给模态控制器并毫无问题地显示轮播。但是第一个图像我总是索引 0，即使我尝试设置我拥有的索引。
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.
我还尝试将它设置在一个属性上，将所需项目上的“活动”属性设置为 true 显示它，但随后它在该项目上被阻止，导致轮播崩溃。此外，在轮播元素上尝试了属性“data-slide-to”，但没有成功。
$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/
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:
我之前尝试过做这样的事情，但没有以某种方式起作用，但是这次我用不同的方法再次尝试使它起作用。因此，在控制器上设置 .active=true 后，这是 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
采纳答案by Sunny R Gupta
Bootstrap allows you to specify a class activeon the itemthat has to be shown as active by default.
引导允许你指定一个类active上item有被默认显示为主动。
Try it this way.
试试这个方法。
回答by cyberwombat
There is an activedirective on the uib-carouselelement:
元素active上有一个指令uib-carousel：
<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:
您可以通过将所需幻灯片的 $index 分配给活动参数来设置活动幻灯片：
<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.
AngularUI 会观察“活动”字段，并将创建到所选幻灯片的平滑过渡。
I believe this behavior is recent and supersedes setting the active property from the older versions.
我相信这种行为是最近发生的，并取代了旧版本中的 active 属性设置。
回答by Tiemin Li
I have same issue. In my case, the next and prev action does not work when I set a active slide to true.
我有同样的问题。就我而言，当我将活动幻灯片设置为 true 时，下一个和上一个操作不起作用。
here is codepen for that. '//codepen.io/tiemin/pen/QyOYYb'
这是代码笔。'//codepen.io/tiemin/pen/QyOYYb'
请参阅 CodePen 上 Tiemin Li (@tiemin) 的笔测试轮播设置活动幻灯片。Seems like the current ui-bootstrap version is not compatible with angular.
似乎当前的 ui-bootstrap 版本与 angular 不兼容。
回答by Bryn Kelly
I was attempting to figure out how to set my first item in the Bootstrap Carousel: http://getbootstrap.com/javascript/#carousel
我试图弄清楚如何在 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
并通过使用 ngClass 指令解决它：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".
添加判断索引是否为0的表达式，然后将类设置为“活动”。
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">
