小编Gra*_*dan的帖子

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

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

不知道我做错了,因为这看起来很简单,这里是我的代码,这里是一个链接到一个网站,其中有一个现实的例子.

示例站点

视图

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

我有一个html5视频标头，仅按一个问题就可以正常工作，该容器比视频高4像素。除非容器在视频中覆盖了插入阴影，而且阴影略微延伸到视频下方，否则不会有什么问题。

我display: inline-block在父div上的某个地方读到了某个设置，该设置使它只能扩展到其子级的大小，但是在我尝试时并没有任何改变。

的CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
video {
    width: 100%;
    height: 100%;
}

.vidContainer {
    position: relative;
    width: 100%;
    height: 100%;
}
.vidShadow {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-box-shadow: inset 0 0 0 500px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 0 0 500px rgba(0,0,0,.5);
    box-shadow: inset 0 0 0 500px rgba(0,0,0,.5);
}

的HTML

<div class="vidContainer">
  <video loop autoplay>
      <source src="media/headerVideo.webm" type="video/webm">
      <source src="media/headerVideo.mp4" type="video/mp4"> …