UI引导传送带第一张幻灯片不显示，然后在最后一张幻灯片崩溃

我想实现ui-bootstraps传送带，但当页面加载第一个图像不显示，但控件和指标。UI引导传送带第一张幻灯片不显示，然后在最后一张幻灯片崩溃

然后，当第二个图像显示，我可以使用控件返回到第一个图像，它会显示罚款。我可以使用控件来到最后一张幻灯片或让它自动滑动，但是当我到达最后一张幻灯片时，传送带停止工作，并给出错误“无法读取未定义的属性”幻灯片，该幻灯片指向ui的第576行-bootstrap-tpls.js文件。

不知道我在做什么错，因为这似乎很容易实现，这里是我的代码，这里是一个链接到一个网站的一个活生生的例子发生了什么。

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旋转木马做错了什么。

来源

2016-05-02 Grant Jordan

试图改变你的代码通过$指数slide.id，而不是使用轨迹跟踪，并看看这是否有帮助。 –

@AlexChance这样做了。非常感谢。我想知道为什么我的原始方法不起作用，因为文档是如何工作的。 –

这可能是你格式化你的ID的方式。我调试了你网站上的代码，并看到这一行'angular.extend（q [s] .slide || {} .....'当我检查's'时，它包含“4”，并且由于数组的幻灯片只有4个元素，最后一个元素是[3]，这就是为什么它会抛出错误。也可以解释为什么它不会立即显示第一张幻灯片，如果它期望[0]，并且您的第一张幻灯片ID为“1”，使其成为第二个元素 –

我收到一个类似的错误，它说：“TypeError：无法读取未定义的属性”幻灯片“。

我跟着一个评论在这里和改变：

index="slide.id"

为

index="$index"

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

来源

2016-07-31 19:50:56

所以基本上'slide.id'应该已经从* 0 *（_zero_）开始，因为属性'index'似乎是指array_的_index。 – Giraldi

谢谢哟你好先生 –

问题是在IDS - 您的图片的第一个ID应该是0，你会就好了

来源

2016-08-20 12:52:58 vvn050

UI引导传送带第一张幻灯片不显示，然后在最后一张幻灯片崩溃

回答

相关问题