UI bootstrap 轮播第一张幻灯片不显示然后在最后一张幻灯片崩溃

Question

我正在尝试实现 ui-bootstraps 旋转木马，但是当页面加载时，第一个图像不显示，但控件和指示器显示。

然后，当第二张图片显示时，我可以使用控件返回到第一张图片，它会正常显示。我可以使用控件到达最后一张幻灯片或让它自动滑动，但是当我到达最后一张幻灯片时，轮播停止工作并给出错误 "Cannot read property 'slide' of undefined"，它指向 ui- 的第 576 行bootstrap-tpls.js 文件.

不确定我做错了什么，因为这看起来很容易实现，这是我的代码，这是一个 link 到一个网站的网站，上面有一个现场示例。

Example Site

查看

<div class="slider">
  <uib-carousel active="active" interval="3000">
    <uib-slide ng-repeat="slide in home.slides track by slide.id" index="slide.id">
      <img class="img-responsive" ng-src="{{slide.img}}" alt="{{slide.alt}}">
    </uib-slide>
  </uib-carousel>
</div>

控制器

.controller('HomeCtrl', function() {
  var vm = this;

  vm.slides = [
    {id: "1", img: 'img/slider/customer.jpg', alt: 'customers'},
    {id: "2", img: 'img/slider/juices.jpg', alt: 'e-juice'},
    {id: "3", img: 'img/slider/lineup.jpg', alt: 'vaporizers'},
    {id: "4", img: 'img/slider/vapeon.jpg', alt: 'vape on'}
  ];
};

*编辑

我尝试了常规的 bootstrap 轮播，效果很好。我可以用它来解决问题，但我宁愿弄清楚我在 ui-bootstrap 轮播中做错了什么。

Answer 1

我收到了类似的错误，它说："TypeError: Cannot read property 'slide' of undefined"。

我按照此处的评论之一进行了更改：

index="slide.id"

为了

index="$index"

这就解决了问题。我注意到这没有答案，所以我想提交这个。

Answer 2

问题出在ids上——你的图片第一个id应该是0，这样就没问题了

UI bootstrap 轮播第一张幻灯片不显示然后在最后一张幻灯片崩溃

UI bootstrap carousel first slide doesn't show then crashes at last slide

carousel

angularjs

angular-bootstrap