.carousel .item {
  padding-bottom: 720/1280 * 100%;
  background-size: cover;

  &:nth-child(1) { background-image: url('https://placehold.it/1280x720?text=Slide 1'); }
  &:nth-child(2) { background-image: url('https://placehold.it/1280x720?text=Slide 2'); }
  &:nth-child(3) { background-image: url('https://placehold.it/1280x720?text=Slide 3'); }
}

.carousel.vertical .carousel-inner > .item {
  -webkit-transition: .6s ease-in-out top;
  -o-transition: .6s ease-in-out top;
  transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel.vertical .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
    -ms-transition: -ms-transform .6s ease-in-out;
    -o-transition: -o-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    -ms-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-perspective: 1000;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
.carousel.vertical .carousel-inner > .item.next,
.carousel.vertical .carousel-inner > .item.active.right {
    top: 0;
    -ms-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
.carousel.vertical .carousel-inner > .item.prev,
.carousel.vertical .carousel-inner > .item.active.left {
    top: 0;
    -ms-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
.carousel.vertical .carousel-inner > .item.next.left,
.carousel.vertical .carousel-inner > .item.prev.right,
.carousel.vertical .carousel-inner > .item.active {
    top: 0;
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.carousel.vertical .carousel-inner > .active {
  top: 0;
}
.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev {
  top: 0;
  height: 100%;
  width: 100%;
}
.carousel.vertical .carousel-inner > .next {
  left: 0;
  top: 100%;
}
.carousel.vertical .carousel-inner > .prev {
  left: 0;
  top: -100%
}
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .prev.right {
  top: 0;
}
.carousel.vertical .carousel-inner > .active.left {
  left: 0;
  top: -100%;
}
.carousel.vertical .carousel-inner > .active.right {
  left: 0;
  top: 100%;
}


.carousel.vertical .carousel-indicators, .carousel-indicators-vertical {
  right: auto;
  top: auto;
  /*transform: translate(-50%);*/
  bottom: auto;
  left: auto;
  width: 100%;
  margin: 0px;
  padding: 0px;

    li {
    display: block;
    margin: 5px 0;
  }
}


/*.carousel.vertical .carousel-indicators, .carousel-indicators-vertical {
  right: 20px;
  top: 50%;
  transform: translate(-50%);
  bottom: auto;
  left: auto;
  width: auto;
  margin: 0;
  padding: 0;

    li {
    display: block;
    margin: 5px 0;
  }
}*/