Bootstrap 3 轮播过渡速度

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移动到最左边，消失，并出现在其正常位置。

是否还有其他需要更改的变量？

- user1185135

Answer 1

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

在你的HTML文件末尾添加以下内容以设置过渡速度：10000（10秒）

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

- jbiWeisendorf

---

这设置了旋转木马在每张幻灯片上暂停的时间，但我不认为这与特定幻灯片进出的速度有任何关系，这是OP所问的内容。 - joshcartme

也许不是直接相关的，但语法也可能适用于其他旋转木马属性。我正在寻找一种改变过渡速度的方法，这个片段非常好用！请确保将第二个脚本部分放在初始化旋转木马的HTML代码之后，否则就没有运气了。 - Eric Giguere

这不是对问题的回答。这是图像之间的时间间隔，而不是幻灯片动画发生的转换时间（幻灯片动画发生期间的时间）。 - ToolmakerSteve

请在回答问题之前理解问题的内容。 - The EasyLearn Academy

抱歉，这不是正确的答案。经过这么多年，我仍然会收到消息说我误解了问题 :) - jbiWeisendorf

Answer 2

以下是非常简单的方法：

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

- Ajeesh Joseph

---

这不是转场时间，而是幻灯片自身的暂停间隔。 - oucil

你知道如何为每个项目添加 data-interval 吗？ - MZaragoza

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或我这样对IT技术有兴趣的人们。原来在bootstrap.js中有一个常量需要改为选项（参见下面的“duration”）。

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

并替换为：

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

然后，我可以在我的标记中添加data-duration="1000"。

- Randy Slavey

---

这是唯一正确的方法，对于Bootstrap 3.3.7也适用。 - user31782

Answer 4

使用Bootstrap 4 SCSS的人可以使用此变量：)

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

- Robbie McFarlane

Answer 5

这对我在Bootstrap 4.1中有效

#MyCarousel .carousel-item { transition: transform 1s ease-in-out; }

将1s更改为任何持续时间。 为您的走马灯使用id将自动覆盖Bootstrap，并允许您为不同的走马灯使用不同的速度。

- ratnadhatamam

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;
}

- The EasyLearn Academy