Bootstrap 3 Carousel: установить однонаправленный (вертикальный) переход

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>