twitter-bootstrap – Twitter Bootstrap Carousel显示两项

发布时间：2020-12-18 00:27:46 所属栏目：安全来源：网络整理

导读：现在我已经实现了Twitter Bootstrap 3 Carousel,它显示了一个项目,在转换过程中显示了下一个元素,所以它看起来像： [1] /transition/ [2] /transition/ [3] ... 我必须显示两个项目,转换后显示第二个元素与第三个元素： [1][2] /transition/ [2][3] /transit

现在我已经实现了Twitter Bootstrap 3 Carousel,它显示了一个项目,在转换过程中显示了下一个元素,所以它看起来像：

[1]    /transition/   [2]    /transition/   [3]   ...

我必须显示两个项目,转换后显示第二个元素与第三个元素：

[1][2]  /transition/  [2][3]  /transition/  [3][4] ...

甚至有可能实现吗？

我试图在页面加载时将活动类应用于两个元素,但Carousel不再起作用.使用以下CSS也不起作用：

.item.active + .item {
  display: block !important;
}

解决方法

Hsz的解决方案工作正常,直到Twitter Bootstrap 3.3,其中增加了对3D转换的支持,它将覆盖转换的样式(左：50％和左：-50％)

因此,您必须使用以下css覆盖Twitter Bootstrap默认过渡样式：

@media all and (transform-3d),(-webkit-transform-3d) {
  .carousel-inner > .item.next,.carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(50%,0);
      transform: translate3d(50%,0);
  }
  .carousel-inner > .item.prev,.carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-50%,0);
      transform: translate3d(-50%,0);
  }
}

如果显示3项等,则可能需要将50％更改为33％

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!