Question

我遇到了问题。

我尝试过以下操作：

.carousel-inner > .item {
 position: relative;
 display: none;
 -webkit-transition: 0.6s ease-in-out left;
 -moz-transition: 0.6s ease-in-out left;
 -o-transition: 0.6s ease-in-out left;
 transition: 0.6s ease-in-out left;
}


In the bootstrap.js:

.emulateTransitionEnd(600)

但它似乎无法正常工作。动画加快了。但我使用包含文本的旋转木马标题，这些文本存在错误。它正确滑动，但随后.content-caption一直向左移动，消失，并显示在正常位置。

我需要更改其他变量吗？

Answer 1

访问：http://getbootstrap.com/javascript/#carousel

在html文件的末尾添加以下内容以设置转换速度：10000（10秒）

 <script src="../../dist/js/bootstrap.min.js"></script>  
 <script>
  $('.carousel').carousel({
   interval: 10000
  });
 </script>

Answer 2

这是非常简单的方法;

在html中添加"data-interval="2000"。例如：<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">

Answer 3

要更改实际的幻灯片速度，而不是转换时间，因为我使用LESS，我发现将此添加到我的custom.less（它首先导入所有其他bootstrap LESS文件）工作：

@slideSpeed: 2s
.carousel-inner {
    > .item {
        .transition(@slideSpeed ease-in-out left);
        @media all and (transform-3d), (-webkit-transform-3d) {
            transition: transform @slideSpeed ease-in-out;
        }
    }
}

希望将来可以帮助像@ToolmakerSteve或我这样的人。

原来我在bootstrap.js中有一个常量，我必须更改为一个选项（参见下面的“持续时间”）

  Carousel.DEFAULTS = {
  interval: 5000,
  pause: 'hover',
  wrap: true,
  keyboard: true,
  duration: 600
}

并替换：

    //.emulateTransitionEnd(Carousel.TRANSITION_DURATION)
    .emulateTransitionEnd(this.options.duration)

然后，我可以将data-duration =“1000”添加到我的标记中。

Answer 4

那些使用bootstrap 4 scss的人可以使用这个变量：）

$carousel-transition:           transform .6s ease-in-out !default;

Answer 5

这在Bootstrap 4.1中对我有效

var FromDate = $("#FromDate").val(); var TotalDays = $("#txtDays").val(); FromDate.setDate(parseInt(FromDate.getDate()) + parseInt(NoOfDays)); var dd = FromDate.getDate()-1;

将1s更改为任何持续时间。为轮播使用ID会自动覆盖Bootstrap，并允许您对不同的轮播使用不同的速度。

Answer 6

.carousel-inner>.item {
-webkit-transition: 0.9s ease-in-out left;
transition: 0.9s ease-in-out left;
-webkit-transition: 0.9s, ease-in-out, left;
-moz-transition: .9s, ease-in-out, left;
-o-transition: .9s, ease-in-out, left;
transition: .9s, ease-in-out, left;
}

Bootstrap 3轮播转换速度

6 个答案: