Bootstrap 3轮播转换速度

8 css carousel twitter-bootstrap

我遇到了问题.

我试过做以下事情:

.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)
Run Code Online (Sandbox Code Playgroud)

但它似乎没有正常工作.动画加快了.但我使用包含文本的旋转木马标题,这些文本存在错误.它正确滑动,但随后.content-caption一直向左移动,消失,并显示在它的正常位置.

我还需要改变其他变量吗?

小智 11

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

在html文件的末尾添加以下内容以设置转换速度:10000(10秒)

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

  • 这设定了旋转木马在每张幻灯片上暂停的时间,但我认为这与特定幻灯片进出的速度有什么关系,这正是OP所要求的. (8认同)
  • 这不是问题的答案.这是图像之间的**间隔**,而不是**转换**时间(幻灯片动画发生的时间). (5认同)

小智 8

这是非常简单的方法;

添加"data-interval="2000"html.例如:<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">

  • 这也不是过渡时间,这是幻灯片本身的暂停间隔. (9认同)