如何控制引导旋转木马滑入物品的速度？

Question

我看到你可以设置间隔,但我想控制项目滑动的速度有多快？

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

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) 

在bootstrap.js函数Carousel.prototype.slide.在转换结束之前,同步转换并防止幻灯片消失.

编辑2014年7月8日

正如@YellowShark所指出的,不再需要JS中的编辑.仅应用css更改.

编辑20/8/2015 现在,在编辑css文件后,您只需编辑CAROUSEL.TRANSITION_DURATION(在bootstrap.js中)或c.TRANSITION_DURATION(如果使用bootstrap.min.js)并更改其中的值(默认为600).最终值必须与放在css文件中的值相同(例如,css中的10s = .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文件.

Answer 2

只要写data-interval在div包含旋转木马:

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

从w3schools取的例子.

Answer 3

对于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)

Answer 4

您需要将主DIV中的间隔设置为data-interval标记.它会正常工作,你可以给不同的幻灯片提供不同的时间.

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

Answer 5

使用 Bootstrap 4，只需使用此 CSS：

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

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

Answer 6

我注意到的一件事是Bootstrap 3正在添加a .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;
    }

Answer 7

对我来说，在我的视图末尾添加了这个：

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

它给旋转木马一个 8 秒的间隔

Answer 8

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

更多信息请访问getbootstrap

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

当你想改变速度改变“2500”