javascript - 在 angular-ui-bootstrap 轮播上设置事件幻灯片

Question

我正在使用 angular、bootstrap 和一个名为“ui-bootstrap”的插件来制作轮播。

我有一个缩略图列表，当单击其中一个时，会显示轮播中带有高清图像的模式，类似于您在亚马逊或其他网站上看到的内容。我试图将轮播中显示的第一张图片设置为用户点击的图片。

我已经能够使用 $index 获取图像的索引，因为我在 ng-repeat 中，将它提供给模态 Controller 并毫无问题地显示轮播。但是第一张图片我的索引始终为 0，即使我尝试设置我拥有的索引也是如此。

这些是我尝试过的一些事情:

    $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”但没有成功。

    $scope.SelectedIndex = selectedIndex;

所以我不知道使用哪个属性/方法来执行此操作，插件页面上的文档也没有给我更多指示:(

http://angular-ui.github.io/bootstrap/

有谁知道如何设置默认事件幻灯片？甚至在加载后如何设置它，因为在底部有一个带缩略图的轮播可能很有用，您可以单击它来显示主图像或其他内容。

谢谢。

已解决

我以前尝试过这样做，但不知何故没有奏效，但这次我用不同的方法再次尝试，使它奏效了。因此，在 Controller 中设置 .active=true 后，这是 HTML:

    <carousel>
        <slide ng-repeat="item in SliderItems" active="item.active">
            ...
        </slide>
    </carousel>

为了以防万一， Controller :

    $scope.SliderItems = items; // items comes from another controller with the items
    $scope.SliderItems[selectedIndex].active = true; //selectedIndex also comes from the other controller

Answer 1

在 uib-carousel 元素上有一个 active 指令:

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

您可以通过将所需幻灯片的 $index 分配给事件参数来设置事件幻灯片:

<a ng-click="vm.active=3">Make slide 3 active</a>

AngularUI 监视“事件”字段，并将创建到所选幻灯片的平滑过渡。

我相信这种行为是最近出现的，它取代了旧版本中的 active 属性设置。