1

我正在尝试修改 twitter引导轮播，以便项目不是从侧面直接滑入，而是斜向滑入。

它使用 css3 转换完成，因此大概是通过在 bootstrap 已经定义的左右转换之外添加顶部或底部转换，那么这应该是可以实现的。我似乎无法让它工作。这是我到目前为止所拥有的：

.item.next.left {
  top: 50px;
}
.item.left {
  top: 0px;
  -moz-transition: top 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s;
}
.item.active {
  top: 50px;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/1500X500" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1500X500" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

这种做我想要的，因为过渡是从右上角开始的，但它并不理想，因为幻灯片从它应该在的位置向下完成 50px。理想情况下，它应该开始更高并在正确的位置结束。当我点击下一个时，我需要它从右下角到左上角进入。任何人都知道如何实现这一目标？

更新：

好的，我很幸运，因为我可以使用以下代码从右下角进入下一个转换：

.carousel-inner > .item { top:47px; }
.carousel-inner > .item.active { top:0; }
.carousel-inner > .next.left { top:0px; -moz-transition:top 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s; }

我可以使用以下代码从左上角进入上一个过渡：

.carousel-inner > .item { top:-47px; }
.carousel-inner > .item.active.right { top:0; }
.carousel-inner > .prev.right { top:0px; -moz-transition:top 0.6s ease-in-out 0s, left 0.6s ease-in-out 0s; }

因此，如果可能的话，我需要以某种方式将两者结合起来。但是，由于它们都依赖于为 .carousel-inner > .item 设置的不同的最高值，我不知道是否有办法解决这个问题

4

0 回答 0