我看到你可以设置时间间隔,但是我想控制项目滑动的速度。
// Sets interval...what is transition slide speed?
$('#mainCarousel').carousel({
interval: 3000
});
我看到你可以设置时间间隔,但是我想控制项目滑动的速度。
// Sets interval...what is transition slide speed?
$('#mainCarousel').carousel({
interval: 3000
});
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
中。这将同步过渡并防止在转换结束之前幻灯片消失。$(document).ready(function() {
jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000 // 2 seconds
});
.carousel-inner .carousel-item {
transition: -webkit-transform 2s ease;
transition: transform 2s ease;
transition: transform 2s ease, -webkit-transform 2s ease;
}
jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
- Walfdiv
中编写 data-interval
即可:<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
这个例子来自于w3schools。
data-interval
决定了新幻灯片移动之后的时间跨度,而不是一个幻灯片移动所需的时间。 - user31782<div class="carousel" data-interval="5000">
对于 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)
使用Bootstrap 4,只需使用以下CSS:
.carousel .carousel-item {
transition-duration: 3s;
}
将 3s
更改为您选择的持续时间。
我注意到的一件事是,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;
}
对我来说,在我的视图末尾添加以下内容有效:
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").carousel({
interval : 8000,
pause: false
});
});
</script>
它为轮播图设置了8秒的间隔时间
不需要任何外部代码,只需使用data-interval=""
属性
更多信息请访问getbootstrap
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="2500">
如果您想改变速度,请更改“2500”
使用 SCSS 的 Bootstrap 4,您可以像这样在您的 _variables.scss
文件中覆盖配置变量 $carousel-transition-duration
:
$carousel-transition-duration: 2s;
或者设置元素的单独持续时间,使用以下代码:
.carousel-item {
transition-duration: 2s;
}
如果您不想更改bootstrap的js文件,也可以直接将所需值注入jquery插件中(bootsrap 3.3.6)。
当然,这需要手动通过js激活走马灯,而不是直接通过data-ride属性。
例如:
var interval = 3500;
$.fn.carousel.Constructor.TRANSITION_DURATION = interval - 500;
elem.carousel({
interval : interval
});