防止 twitter 引导轮播在页面加载时自动滑动

Posted 2023-02-16

【中文标题】防止 twitter 引导轮播在页面加载时自动滑动

【英文标题】：Preventing twitter bootstrap carousel from auto sliding on page load

【发布时间】：2012-11-01 17:59:13

【问题描述】：

那么，除非单击下一个或上一个按钮，否则是否有？

谢谢

【参考方案1】：

或者，如果您使用的是 Bootstrap 3.0，您可以使用 data-interval="false" 来停止循环

<div id="carousel-example-generic" class="carousel slide" data-interval="false">

其他有用的轮播数据属性在这里 -> http://getbootstrap.com/javascript/#carousel-usage

【讨论】：

这不是问题的 100% 答案，因为即使单击按钮，它也会停止循环。但这正是我想要的。所以还是谢谢你！

data-interval="false" 也适用于 Bootstrap 4

【参考方案2】：

其实问题现在已经解决了。我在方法 'carousel' 中添加了 'pause' 参数，如下所示：

$(document).ready(function()       
   $('.carousel').carousel('pause');
);

无论如何，非常感谢 @Yohn 提供的有关此解决方案的提示。

【讨论】：

这将在 prev/next 之后开始滑动，如果这不是您要查找的内容，请查看 ***.com/a/18208327/463065。

更具体的是$(function() $("#idName").carousel('pause'); );

【参考方案3】：

解决了按上一个/下一个按钮后轮播自动滑动的问题。

$('.carousel').carousel(
    pause: true,
    interval: false
);

GitHub commit 78b927b

【参考方案4】：

如果你使用 bootstrap 3 在轮播的 html 结构上设置 data-interval="false"

示例：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">

【参考方案5】：

使用data-interval="false"停止自动滑动 使用data-wrap="false" 停止圆形滑动

【参考方案6】：

将此添加到您的课程 div 中：

data-interval="false"

【讨论】：

Michael Kopec 2 年前的answer 已经说过要这样做。

【参考方案7】：

以下是引导轮播的参数列表。 比如间隔、暂停、换行：

更多详情请参考此链接：

http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

希望对你有帮助:)

注意：这是为了进一步的帮助。我的意思是加载轮播后如何自定义或更改默认行为。

【参考方案8】：

我想也许你应该去看看关于轮播的官方说明，对我来说，我没有找到上面的答案，因为引导程序的多个版本，我使用的是 b4-alpha 和 我想要自动播放效果停下来。

$(document).ready(
    pause:true,
    interval:false
);

当鼠标离开该页面时，此脚本不会产生任何效果，正好是轮播区域。去官方定义并找到那些：

所以你会发现为什么。如果触发了轮播页面的onmouseover事件，页面会暂停，当鼠标离开该页面时，它会再次恢复。

因此，如果您希望页面永远停止并手动旋转，您可以设置data-interval='false'。

【参考方案9】：

--使用data-interval="false" 停止自动滑动 --使用data-wrap="false" 停止循环滑动

...

【参考方案10】：

对于 Bootstrap 4，只需从轮播 div 中删除 'data-ride="carousel"'。这将删除加载时的自动播放。

要再次启用自动播放，您仍然需要在 javascript 中使用“播放”调用。