在 angular-ui-bootstrap 轮播上设置活动幻灯片 [英] Setting active slide on angular-ui-bootstrap carousel

问题描述

我正在使用 angular、bootstrap 和一个名为ui-bootstrap"的插件来让 angular 制作旋转木马.

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.

我已经能够使用 $index 获取图像的索引，因为我在 ng-repeat 中，将其提供给模态控制器并毫无问题地显示轮播.但是第一个图像我总是索引 0，即使我尝试设置我拥有的索引.

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]);

我还尝试将它设置在一个属性上，在所需项目上将active"属性设置为 true 显示它，但随后它在该项目上被阻止，导致轮播崩溃.此外，在轮播元素上尝试了属性data-slide-to"，但没有成功.

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.

谢谢.

已解决

我之前尝试过做这样的事情，但不知何故不起作用，但这次我用不同的方法再次尝试使它起作用.因此，在 Controller 设置 .active=true 后，这是 HTML:

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

推荐答案

Bootstrap 允许您在 item 上指定一个类 active，该类必须通过默认.

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

试试这个方法.

这篇关于在 angular-ui-bootstrap 轮播上设置活动幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！