jquery - Bootstrap 3 轮播 : set unidirectional (vertical) transition

Question

我正在开发一个带有垂直过渡(并且没有箭头)的 Bootstrap 3 轮播。它有效，但我正在寻找特定的过渡。

.carousel.vertical {
  position: relative;
}

.carousel.vertical .carousel-inner {
  height: 100%;
  width: auto;
}

.carousel.vertical .carousel-inner>.item {
  width: auto;
  transition: 0.6s ease-in-out top;
}

.carousel.vertical .carousel-inner>.item {
  transition: 0.6s ease-in-out;
}

.carousel.vertical .carousel-inner>.item.next,
.carousel.vertical .carousel-inner>.item.active.right {
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.item.prev,
.carousel.vertical .carousel-inner>.item.active.left {
  transform: translate3d(0, -100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.item.next.left,
.carousel.vertical .carousel-inner>.item.prev.right,
.carousel.vertical .carousel-inner>.item.active {
  transform: translate3d(0, 0, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.active,
.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev {
  display: block;
}

.carousel.vertical .carousel-inner>.active {
  top: 0;
}

.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel.vertical .carousel-inner>.next {
  top: 100%;
}

.carousel.vertical .carousel-inner>.prev {
  top: -100%;
}

.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.prev.right {
  top: 0;
}

.carousel.vertical .carousel-inner>.active.left {
  top: -100%;
}

.carousel.vertical .carousel-inner>.active.right {
  top: 100%;
}

.carousel.vertical .carousel-indicators {
  display: inline-block;
  width: auto;
  padding: 0;
  margin: 0;
  left: auto;
  right: 10px;
  bottom: 2px;
  z-index: 9;
  font-size: 0;
}

.carousel.vertical .carousel-indicators li {
  border: none;
  cursor: pointer;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-indent: -9999px;
  background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}

.carousel.vertical .carousel-indicators li.active {
  background-position: -528px -524px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=west" alt="">
      </div>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
  </div>
</div>

有一个jsFiddle 也有它。

我希望轮播过渡方向为向上，无论单击的指示器的顺序如何。

换句话说:如果事件指示器(以及相应的幻灯片)是第三个，并且用户单击第二个或第一个，则过渡方向应该向上，就像事件指示器是第一个并且她/他正在点击第二个或第三个指示器。

缺少什么？

Answer 1

因此，我对此问题进行了大量搜索，发现了很多SO问题，但没有人可以提供所需的解决方案。但我找到了一个。

这是片段，希望对您有所帮助。

请注意，我尝试更改每个单独的规则以获得预期的结果，一旦我得到了我想要的结果，我将它们组合起来并使 CSS 更干净。

// Set animation duration to 1 second
var carouselDuration = function() {
  $.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
}

carouselDuration();

.carousel.vertical {
    position: relative;
}

.carousel.vertical .carousel-inner {
    height: 100%;
    width: auto;
}

.carousel.vertical .carousel-inner>.item {
    width: auto;
    /* set the animation duration to 1 second */
    transition: 1s ease-in-out;
    transform: translate3d(0, 100%, 0);
    top: 0;
}

.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right {
    transform: translate3d(0, 100%, 0);
    top: 0;
}

.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active {
    transform: translate3d(0, 0, 0);
    top: 0;
}

.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left {
    transform: translate3d(0, -100%, 0);
    top: 0;
}

.carousel.vertical .carousel-indicators {
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0;
    left: auto;
    right: 10px;
    bottom: 2px;
    z-index: 9;
    font-size: 0;
}

.carousel.vertical .carousel-indicators li {
    border: none;
    cursor: pointer;
    display: inline-block;
    width: 18px;
    height: 18px;
    text-indent: -9999px;
    background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}

.carousel.vertical .carousel-indicators li.active {
    background-position: -528px -524px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=west" alt="">
      </div>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
  </div>
</div>