jquery – Twitter Bootstrap旋转木马垂直滑动

前端之家收集整理的这篇文章主要介绍了jquery – Twitter Bootstrap旋转木马垂直滑动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以实现垂直传送带滑动widh 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

我试图改变方向“上”和“下”,但滑动不工作。

解决方法

是。

下面是一个很简单的方式来做,这通过简单地覆盖CSS来做。

如果您将一个类垂直添加到您的旋转木马,则将以下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;
}​

这基本上是把所有的东西都带回来。

JSFiddle

这至少表明你需要做什么才能让它垂直滑动。然而,实际上,实际上应该把上下班加入carousel.less,并在bootstrap-carousel.js之间添加一个新的选项来切换它们。

原文链接:https://www.f2er.com/jquery/182970.html

猜你在找的jQuery相关文章