Twitter Bootstrap 轮播垂直滑动

Question

是否可以在 Twitter Bootstrap 中实现垂直旋转木马滑动？ 在 bootstrap.js 我发现这个

  , slide: function (type, next) {
  var $active = this.$element.find('.active')
    , $next = next || $active[type]()
    , isCycling = this.interval
    , direction = type == 'next' ? 'left' : 'right'
    , fallback  = type == 'next' ? 'first' : 'last'
    , that = this

我试图将方向更改为“向上”和“向下”，但滑动不起作用。

Answer 1

是的。

下面是一个 hacky 的方法，它通过简单地覆盖 CSS 来完成所有事情。

如果您向旋转木马添加vertical类，则将以下 CSS 添加到页面将覆盖垂直滑动：

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

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
  top: 0;
}

.carousel.vertical .next {
  top: 100%;
}

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

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

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

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

.carousel.vertical .item {
    left: 0;
}​

这基本上是把所有东西都放在carousel.less中，然后left到top 。

JSFiddle

---

这至少表明你需要做什么才能让它垂直滑动。 然而，在实践中，确实应该向carousel.less添加up和down类，并向bootstrap-carousel.js添加一个新选项以在它们之间切换。

Answer 2

当与最新（当前）版本的 Bootstrap (v3.3.4) 一起使用时，先前答案中提供的解决方案在某些流行的浏览器（如 Google Chrome）上无法正常工作。

如果有人需要与 Bootstrap v3.3.4 一起使用的更新解决方案，这里是——

 .carousel-inner.vertical { height: 100%; }.carousel-inner.vertical >.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-inner.vertical >.item { -webkit-transition: -webkit-transform.6s ease-in-out; -o-transition: -o-transform.6s ease-in-out; transition: transform.6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; }.carousel-inner.vertical >.item.next, .carousel-inner.vertical >.item.active.right { top: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }.carousel-inner.vertical >.item.prev, .carousel-inner.vertical >.item.active.left { top: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }.carousel-inner.vertical >.item.next.left, .carousel-inner.vertical >.item.prev.right, .carousel-inner.vertical >.item.active { top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }.carousel-inner.vertical >.active { top: 0; }.carousel-inner.vertical >.next, .carousel-inner.vertical >.prev { top: 0; height: 100%; width: auto; }.carousel-inner.vertical >.next { left: 0; top: 100%; }.carousel-inner.vertical >.prev { left: 0; top: -100% }.carousel-inner.vertical >.next.left, .carousel-inner.vertical >.prev.right { top: 0; }.carousel-inner.vertical >.active.left { left: 0; top: -100%; }.carousel-inner.vertical >.active.right { left: 0; top: 100%; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div style="width:600px"> <:-- wrap @img width --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000"> <.-- 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> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <:-- Wrapper for slides --> <div class="carousel-inner vertical" role="listbox"> <div class="item active"> <img src="http.//placehold:it/600x400&text=First+Slide" alt="First Slide"> <div class="carousel-caption"> First Slide </div> </div> <div class="item"> <img src="http.//placehold.it/600x400&text=Second+Slide" alt="Second Slide"> <div class="carousel-caption"> Second Slide </div> </div> <div class="item"> <img src="http://placehold.it/600x400&text=Third+Slide" alt="Third Slide"> <div class="carousel-caption"> Third Slide </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> </div>

注意：将vertical类添加到您的carousel-inner ，或根据需要编辑 CSS。

Answer 3

试试这个插件https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

看看这里。

Twitter Bootstrap 垂直缩略图轮播

Answer 4

试试这个代码

Bootstrap 4 - 垂直滑块

https://www.codeply.com/p/JxZ8htyOFN