1

我一直在努力让rn-carousel正常工作，幻灯片 2+ 完全不在位
......直到我偶然发现这个（看似无关的）问题：
https ://github.com/revolunet/angular-carousel/issues/245

我添加了以下使事情完美运行的类：

ul[rn-carousel] > li {
    color: black;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: visible;
    vertical-align: top;
    position: absolute;
    left: 0;
    right: 0;
    white-space: normal;
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
    height: 100%;
    display: inline-block; }

然后我开始消除所有 CSS 样式，直到找到解决问题的样式：

显然“位置：绝对”是所有<li>元素上必需的 CSS 样式？？

（相当有限的）文档中没有提到任何内容......
- 我在某处有错误吗？
- 这是我不知道的标准 CSS 问题吗？
（有关信息，该rn-carousel指令会display: inline-block自动<li>添加）

在以下版本范围内进行了尝试，结果相同：
- rn-carousel 版本 0.3.5 - 0.3.9
- angularjs 版本 1.3.0 - 1.3.12

普朗克

4

1 回答 1

1

position: relativeangular-carousel 需要在父容器 ( ul) 和position: absolute子容器 ( ) 上才能正常工作。li

包括默认angular-carousel.css样式表会添加以下定义：

ul[rn-carousel] {
  //...
  position: relative;
  //...
  }

  ul[rn-carousel] > li {
    //...
    position: absolute;
    //...
    }

这不应干扰您需要对li. 如有必要，您可以将您的内容包装在 adiv和命名空间中的任何样式到该元素上的类。

于 2015-02-17T18:01:15.520 回答