我该如何控制Bootstrap走马灯切换幻灯片的速度？

Question

我看到你可以设置时间间隔，但是我想控制项目滑动的速度。

   // Sets interval...what is transition slide speed?
    $('#mainCarousel').carousel({
    interval: 3000
});

- genxgeek

---

谷歌员工 --> 减慢间隔（显示下一张图片之间的时间）::: https://dev59.com/HmQm5IYBdhLWcg3wyhjk#38203373 - Don Cheadle

如果您正在寻找Angular解决方案，请点击此处。 - Shahid

Answer 1

速度无法由API控制。但您可以修改负责速度的CSS样式。 在carousel.less文件中查找。

.item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
}

并将 .6s 更改为您想要的任何内容。

---

如果您不使用 .less，请在 bootstrap.css 文件中查找：

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

将 0.6s 改成你想要的时间。你可能也需要编辑下面函数调用中的时间：

.emulateTransitionEnd(2000) 

在函数 Carousel.prototype.slide 中的 bootstrap.js 中。这将同步过渡并防止在转换结束之前幻灯片消失。

编辑7/8/2014：如@YellowShark所指出，JS中的编辑不再需要。只需应用CSS更改。

编辑20/8/2015：现在，在您编辑css文件后，您只需要编辑CAROUSEL.TRANSITION_DURATION（在bootstrap.js中）或c.TRANSITION_DURATION（如果您使用bootstrap.min.js），并更改其中的值（默认为600）。最终值必须与您在css文件中放置的值相同（例如，在css中为10秒 = 在.js中为10000）。

编辑16/01/2018: 对于Bootstrap 4，要将转换时间更改为2秒，请添加

$(document).ready(function() {
  jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000  // 2 seconds
});

将此代码添加到您网站的JS文件中。

.carousel-inner .carousel-item {
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
}

将其添加到您网站的CSS文件中。

- Dmitry Efimenko

---

谢谢您的回复！我尝试将后者放在我的主 .html 页面的样式中，并将 .6 更改为 .1，但在使用 chrome 时似乎没有任何影响。 - genxgeek

在Bootstrap 3中似乎无法正常工作。幻灯片在移动完成之前会闪烁消失。 - Chris Harrison

只是想指出，您现在不需要修改任何JavaScript代码了，代码中的那一行现在会提取.css('transition-duration')值，所以您只需要按照上面描述的添加一些CSS即可。 （另外，请确保轮播项具有“slide”类，文档中可能没有提到这一点。） - YellowShark

在Bootstrap 3（v3.3.5，无论如何）中，JS不再从CSS中获取那个持续时间的值。可以很容易地设置而不修改Bootstrap，例如：jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 1000; - Walf

jQuery.fn.carousel.Constructor.TRANSITION_DURATION 返回未定义。如何更改它？转换起作用并且幻灯片滑动缓慢，但是滑出的图像太快地显示为：none;。 - Ben

Answer 2

只需在包含轮播的 div 中编写 data-interval 即可：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">

这个例子来自于w3schools。

- jaswinder singh

---

警告： "data-interval" 的度量单位为毫秒。500 = 0.5秒（非常快）。如果您有一些文本要在幻灯片上显示，10000（10秒）更好。运行良好。我认为这应该是被接受的答案。 - Renascienza

这个答案是错误的。data-interval决定了新幻灯片移动之后的时间跨度，而不是一个幻灯片移动所需的时间。 - user31782

谢谢，老兄。这救了我的一天。+1，这应该被标记为正确答案，而不是去编辑bootstrap.css文件。 - FONGOH MARTIN

我一直在寻找这个确切的答案...但在意识到那个与幻灯片速度有关之前，我尝试了另一个答案。而这个答案则涉及幻灯片之间的时间间隔。所以感谢您包含了这个答案，因为这正是我想要的！（即使500太快了，但那是另外一个故事） - Malachi

你知道如何设置每张幻灯片的间隔时间吗？ - MZaragoza

Answer 3

您需要在主DIV中设置间隔，使用data-interval标记。然后它就会正常工作，您可以为不同的幻灯片设置不同的时间。

<div class="carousel" data-interval="5000">

- Ali Umair

---

你能提供一个例子吗？我需要为不同的幻灯片设置不同的时间间隔，这些都是从 API 调用返回的控制器中配置的。我们可以使用滑块器来显示网页吗？ - Archna

"data-interval" 确定了新幻灯片移动的时间跨度，而不是动画持续时间。 - Ricardo Vigatti

Answer 4

对于 Twitter Bootstrap 3：

你必须按照其他答案中指定的方式更改 CSS 过渡效果：

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

从0.6秒到1.5秒（例如）。

另外，还有一些需要更改的Javascript代码。在bootstrap.js文件中有一行：

.emulateTransitionEnd(600)

这应该被更改为相应的毫秒数。因此，对于1.5秒，您需要将数字更改为1500：

.emulateTransitionEnd(1500)

- Chris Harrison

Answer 5

使用Bootstrap 4，只需使用以下CSS：

.carousel .carousel-item {
    transition-duration: 3s;
}

将 3s 更改为您选择的持续时间。

- kmoser

---

非常非常好 :) - Mohammed Baashar

Answer 6

我注意到的一件事是，Bootstrap 3使用.6s和0.6s两种方式添加样式。因此，您可能需要像这样显式地定义过渡持续时间（CSS）：

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

- bkrall

---

对我没用 :( 它仍然像没有变化一样快速滚动（我已经改成了1.6） - Andiana

Answer 7

对我来说，在我的视图末尾添加以下内容有效：

<script type="text/javascript">
$(document).ready(function(){
     $("#myCarousel").carousel({
         interval : 8000,
         pause: false
     });
});
</script>

它为轮播图设置了8秒的间隔时间

- Erik

Answer 8

不需要任何外部代码，只需使用data-interval=""属性

更多信息请访问getbootstrap

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="2500">

如果您想改变速度，请更改“2500”

- Chethana Kalpa

Answer 9

使用 SCSS 的 Bootstrap 4，您可以像这样在您的 _variables.scss 文件中覆盖配置变量 $carousel-transition-duration：

$carousel-transition-duration: 2s;

或者设置元素的单独持续时间，使用以下代码：

.carousel-item {
    transition-duration: 2s;
}

在你的CSS/SCSS中指定元素的特定属性。

- shaack

Answer 10

如果您不想更改bootstrap的js文件，也可以直接将所需值注入jquery插件中（bootsrap 3.3.6）。

当然，这需要手动通过js激活走马灯，而不是直接通过data-ride属性。

例如：

var interval = 3500;
$.fn.carousel.Constructor.TRANSITION_DURATION = interval - 500;
elem.carousel({
    interval : interval
});

- Andreas

---

我喜欢这种方法，因为它不需要您编辑"bootstrap.js"，并使其成为"不能更新的"。 - TryingToImprove

更改为200后，我再也看不到平滑的动画了，图像会在过渡中间消失。 - TomSawyer

嗨@TomSawyer - 动画是通过CSS维护的，但很重要的一点是，转换时间足够长，以覆盖整个过渡。在JavaScript中，它只定义了何时设置“in”类，以及何时再次删除它。如果您想缩短动画，请检查在less文件中定义的位置。 - Andreas