1

Twitterのブートストラップカルーセルを変更して、アイテムが横からまっすぐにスライドするのではなく、斜めにスライドするようにしようとしています。

css3トランジションで行われたため、おそらく、ブートストラップがすでに定義した左右のものに加えて、上または下のものを追加することで、これを達成できるはずです。私はそれを機能させることができないようです。これは私がこれまでに持っているものです:

.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>

この種のトランジションは右上から来るので、私が望むことを行いますが、スライドが本来あるべき場所から 50 ピクセル下で終了するため、理想的ではありません。理想的には、より高く開始し、適切な場所で終了する必要があります。次に打つときは右下から左上に向かって入っていく必要があります。これを達成する方法を知っている人はいますか？

アップデート：

次のコードを使用して、次の移行のために右下からそれを取得できるという点で、少し運が良かったです。

.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; }

可能であれば、どうにかして2つを組み合わせる必要があります。ただし、どちらも .carousel-inner > .item に設定されている別のトップ値に依存しているため、これを回避する方法があるかどうかはわかりません

4

0 に答える 0