如何控制 bootstrap carousel 在项目中滑动的速度? [英] How can I control the speed that bootstrap carousel slides in items?

问题描述

我看到您可以设置间隔，但我想控制项目滑动的速度?

I see you can set the interval but I want to control how fast the items slide?

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

推荐答案

API 无法控制速度.尽管您可以修改负责此的 CSS.在 carousel.less 文件中找到

The speed cannot be controlled by the API. Though you can modify CSS that is in charge of that. In the carousel.less file find

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

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

and change .6s to whatever you want.

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

In case you do not use .less, find in the bootstrap.css file:

.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 更改为您想要的时间.您可能还想在下面的函数调用中编辑时间:

and change 0.6s to the time you want. You also might want to edit time in the function call below:

.emulateTransitionEnd(2000) 

在 bootstrap.js 函数中 Carousel.prototype.slide.同步过渡并防止幻灯片在过渡结束前消失.

at bootstrap.js in function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.

编辑 7/8/2014

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

As @YellowShark pointed out the edits in JS are not needed anymore. Only apply css changes.

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

EDIT 20/8/2015 Now, after you edit your css file, you just need to edit CAROUSEL.TRANSITION_DURATION (in bootstrap.js) or c.TRANSITION_DURATION (if you use bootstrap.min.js) and to change the value inside it (600 for default). The final value must be the same that you put in your css file( for example 10s in css = 10000 in .js)

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

EDIT 16/01/2018 For Bootstrap 4, to change the transition time to e.g., 2 seconds, add

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

到您网站的 JS 文件，以及

to your site's JS file, and

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

到您网站的 CSS 文件.

to your site's CSS file.

这篇关于如何控制 bootstrap carousel 在项目中滑动的速度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！