bootstrap2 的图片轮播,如何自动播放?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstrap2 的图片轮播,如何自动播放?相关的知识,希望对你有一定的参考价值。
参考技术A $(\'.carousel\').carousel(\\x0d\\x0a interval: 2000\\x0d\\x0a)\\x0d\\x0a方法1、直接放在script里\\x0d\\x0a方法2、\\x0d\\x0a$(document).ready(function() \\x0d\\x0a $(\'.carousel\').carousel(\\x0d\\x0a interval: 2000\\x0d\\x0a )\\x0d\\x0a);Twitter Bootstrap Carousel 加载时自动播放
【中文标题】Twitter Bootstrap Carousel 加载时自动播放【英文标题】:Twitter Bootstrap Carousel autoplay on load 【发布时间】:2012-11-11 14:13:44 【问题描述】:使用 twitter 引导框架,如何调用轮播来“自动滑动”。这意味着当页面加载时,轮播会自动滚动。
我已经为下一个链接的<a>
尝试了一个javascript onLoad 点击函数,但这不起作用。
【问题讨论】:
它应该会自动开始播放,而无需您做任何事情。你可以手动点击上一个/下一个链接,它可以工作吗? CoffeeScript 自动播放:$ -> $('#myCarousel').carousel() 简单地将单词'auto'添加到div类 How can I make the boostrap js carousel automatically cycle as soon as the page loads?的可能重复 【参考方案1】:您应该按照Twitter Bootstrap Documentation 所说的关于轮播的方式进行操作,因此将第一个轮播幻灯片项设置为 class="active" 并以这种方式为轮播初始化 js:
$(function()
$('.carousel').carousel(
interval: 2000
);
);
如果这还不够(但这从来没有发生在我身上)使用暴力触发点击悬停轮播控制按钮,如下所示:
$(function()
$('.carousel').carousel(
interval: 2000
);
$('.carousel-control.right').trigger('click');
);
但这只是一个不需要的技巧,真的,只需按照文档进行操作!
【讨论】:
@merv 真诚地说,我从来没有遇到过轮播问题,只是按照引导文档所说的去做 显然,我的第一条评论的时间表明它指的是您答案的原始编辑,其中确实有错误的信息。虽然后来的修订更正确,但我仍然不明白为什么要提到人为触发的事件。 我发现如果您将其中一个 img 项目设置为 class="active" 您不需要使用该技巧来触发下一张幻灯片。 @MegaTux 是的,确实,只需使用它,不需要“我的”技巧,轮播默认启动,然后 class=active sets 这是您要显示的第一张图片;) @Eirenaios - 绝非超级棒。如果您需要它,它只会隐藏代码中的另一个问题。如果是这样,你应该解决原来的问题,而不是用诡计来掩盖你的烂摊子。相信我,它会回来咬你的。它总是这样。【参考方案2】:简单。您在 div 中缺少“data-ride”属性。
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
【讨论】:
喜欢 css 方法。【参考方案3】:作为per the docs,您需要通过JavaScript 初始化Carousel 插件。官方 Bootstrap 文档页面上的轮播示例在 application.js 文件第 67-68 行初始化:
// carousel demo
$('#myCarousel').carousel()
这给了它默认设置。
如果要指定循环间隔,可以设置interval
属性,单位为毫秒:
$('.carousel').carousel(
interval: 2000
)
【讨论】:
作为一个完全相关的答案,具有适当数量的背景信息支持的准确信息,这应该是公认的答案。【参考方案4】:将它放在文档就绪块中,让它为我自动启动
$(document).ready(function()
$('#myCarousel').carousel();
);
【讨论】:
【参考方案5】:<div id="myCarousel" class="carousel slide" data-ride="carousel">
对我有用,我缺少的是 data-ride 属性。
我希望这会帮助很多人。 谢谢***,在大多数情况下,您对我非常有用。很高兴这个社区存在。
【讨论】:
【参考方案6】:您可以使用 html 标记上的 data-interval 属性来自动播放:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
数据间隔:自动循环项目之间的延迟时间(以毫秒为单位)。如果为 false,carousel 将不会自动循环。
【讨论】:
即使我使用了上述设置,我的轮播也遇到了问题..它没有按预期出现并且最初没有启动轮播【参考方案7】:<header id="myCarousel" class="carousel slide">
你需要添加
data-ride="carousel"
<header id="myCarousel" class="carousel slide" data-ride="carousel">
【讨论】:
【参考方案8】:只需将data-interval="5000"
添加到div
,IP 为carouselExampleIndicators
。
像这样:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="5000">
【讨论】:
【参考方案9】:对于 Bootstrap 4 及更高版本:
$(function()
$('.carousel').carousel(
interval: 2000,
ride: 'carousel' // this is the important part
);
);
【讨论】:
【参考方案10】:只需将“幻灯片”类添加到轮播 div 标签中,如下所示:
<div class="carousel slide" id="this-carousel-id">
【讨论】:
-1 只启用css过渡功能,但仍然不初始化Carousel插件,这是必需的。以上是关于bootstrap2 的图片轮播,如何自动播放?的主要内容,如果未能解决你的问题,请参考以下文章