我正在尝试实现 ui-bootstraps 轮播,但是当页面加载时,第一个图像不会显示,但控件和指示器会显示。
然后,当第二个图像显示时,我可以使用控件返回到第一个图像,它将显示正常。我可以使用控件到达最后一张幻灯片或让它自动滑动,但是当我到达最后一张幻灯片时,轮播停止工作并给出错误“无法读取未定义的属性‘幻灯片’”,该错误指向 ui 的第 576 行-bootstrap-tpls.js 文件。
不确定我做错了什么,因为这似乎很容易实现,这是我的代码,这是一个指向网站的链接,其中包含正在发生的事情的实时示例。
示例站点 http://test.codebyjordan.com
View
<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'}
];
};
*edit
我尝试了常规的引导轮播,效果很好。我可以用它来解决问题,但我宁愿弄清楚我在 ui-bootstrap 轮播中做错了什么。