UI引导轮播第一张幻灯片不显示，然后在最后一张幻灯片崩溃 [英] UI bootstrap carousel first slide doesn't show then crashes at last slide

问题描述

我正在尝试实现ui-bootstraps轮播，但是在页面加载时，第一个图像没有显示，但控件和指示器却显示了.

I am trying to implement ui-bootstraps carousel but when the page loads the first image doesn't show but the controls and indicators do.

然后，当第二张图像显示时，我可以使用控件返回到第一张图像，它将显示正常.我可以使用控件到达最后一张幻灯片，也可以使其自动滑动，但是当我到达最后一张幻灯片时，轮播会停止工作并给出错误无法读取未定义的属性'slide'"，该错误指向ui的第576行-bootstrap-tpls.js文件.

Then, when the second image shows, I can use the controls to go back to the first image and it will show fine. I can use the controls to get to the last slide or let it slide automatically but when I get to the last slide the carousel stops working and gives the error "Cannot read property 'slide' of undefined" which points to line 576 of the ui-bootstrap-tpls.js file.

不确定我做错了什么，因为这似乎很容易实现，这是我的代码，这是指向网站的链接，其中包含发生了什么事的实时示例.

Not sure what I'm doing wrong as this seems pretty simple to implement, here is my code and here is a link to a site with a live example of whats going on .

示例网站

查看

<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'}
  ];
};

*编辑

我尝试了常规的自举轮播，效果很好.我可以改用它来解决问题，但我想弄清楚ui-bootstrap轮播在做什么.

I tried out the regular bootstrap carousel and it works fine. I can use it instead to solve the problem but I'd rather figure out what I'm doing wrong with the ui-bootstrap carousel.

推荐答案

我收到一个类似的错误，它是在说:"TypeError:无法读取未定义的属性'slide'."

I was receiving a similar error, it was saying: "TypeError: Cannot read property 'slide' of undefined".

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

I followed one of the comments here and changed:

index="slide.id"

为

index="$index"

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

And that fixed the problem. I noticed this did not have an answer so I wanted to submit this.

这篇关于UI引导轮播第一张幻灯片不显示，然后在最后一张幻灯片崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！