Bootstrap 3轮播过渡速度

Posted 2023-03-06

【中文标题】Bootstrap 3轮播过渡速度

【英文标题】：Bootstrap 3 carousel transition speed

【发布时间】：2014-01-17 08:48:20

【问题描述】：

我遇到了问题。

我已尝试执行以下操作：

.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)

但它似乎无法正常工作。动画速度加快。但是我使用了一个包含文本的轮播标题，这是错误的。它可以正常滑动，但随后 .content-caption 一直向左移动，消失并出现在正常位置。

我还需要更改其他变量吗？

【参考方案1】：

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

在 html 文件末尾添加以下内容以设置转换速度：10000（10 秒）

 <script src="../../dist/js/bootstrap.min.js"></script>  
 <script>
  $('.carousel').carousel(
   interval: 10000
  );
 </script>                           

【讨论】：

设置轮播在每张幻灯片上暂停的时间，但我认为这与 OP 要求的特定幻灯片进出的速度无关。

可能没有直接链接，但语法也可能适用于其他轮播属性。我正在寻找一种改变转换速度的方法，这个 sn-p 就像一个魅力！确保将第二个脚本部分放在初始化轮播的 html 代码之后，否则将不走运。

这不是问题的答案。这是图像之间的 interval，而不是 transition 时间（幻灯片动画发生的时间）。

在写答案之前请先了解什么是问题

对不起，这是错误的答案。这么多年后，我仍然得到消息说我误解了这个问题:)

【参考方案2】：

这是非常简单的方法；

在 html 中添加"data-interval="2000"。如：<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">

【讨论】：

这也不是过渡时间，这是幻灯片本身的暂停间隔。

您知道如何将data-interval 添加到每个项目吗？

【参考方案3】：

要更改实际滑动速度，而不是过渡时间，因为我使用 LESS，我发现将其添加到我的 custom.less（首先导入所有其他引导 LESS 文件）是有效的：

@slideSpeed: 2s
.carousel-inner 
    > .item 
        .transition(@slideSpeed ease-in-out left);
        @media all and (transform-3d), (-webkit-transform-3d) 
            transition: transform @slideSpeed ease-in-out;
        
    

希望这对将来像 @ToolmakerSteve 或我这样的人有所帮助。

原来 bootstrap.js 中有一个常量，我也必须将其更改为一个选项（请参阅下面的“持续时间”）

  Carousel.DEFAULTS = 
  interval: 5000,
  pause: 'hover',
  wrap: true,
  keyboard: true,
  duration: 600

并替换：

    //.emulateTransitionEnd(Carousel.TRANSITION_DURATION)
    .emulateTransitionEnd(this.options.duration)

然后，我可以将 data-duration="1000" 添加到我的标记中。

【讨论】：

这是唯一正确的方法，也适用于 bootstrap 3.3.7。

【参考方案4】：

那些使用 bootstrap 4 scss 的人可以使用这个变量 :)

$carousel-transition:           transform .6s ease-in-out !default;

【参考方案5】：

这在 Bootstrap 4.1 中适用于我

#MyCarousel .carousel-item transition: transform 1s ease-in-out;

将 1s 更改为任何持续时间。 为轮播使用 id 将自动覆盖 Bootstrap，并允许您对不同的轮播使用不同的速度。

【参考方案6】：

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