Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强。

用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了不能自动播放的问题。

查了一下,发现有不少人问Bootstrap的Carousel组件不能自动播放的问题,这里要注意几个问题:

先看一下Carousel的正确写法(代码,这里使用的是Bootstrap 3.2版本):

    <div id="carousel-ad" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-ad" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ad" data-slide-to="1"></li>
<li data-target="#carousel-ad" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img class="img-responsive" src="data:images/pic01.jpg"></div>
<div class="item"><img class="img-responsive" src="data:images/pic02.jpg"></div>
<div class="item"><img class="img-responsive" src="data:images/pic03.jpg"></div>
</div>
</div>

1、首先注意的部分是data-ride="carousel"

默认使用Bootstrap的Carousel组件,只需要加上 data-ride="carousel" 就可以实现自动播放了。无需使用初始化的js函数。所以,如果carousel不会自动播放,那么首先检查这个部分。这里还能加其他参数,比如是设置图片轮转的时间间隔。

设置图片轮转的时间间隔:<div id="carousel-ad" class="carousel slide" data-ride="carousel" data-interval="2000">

2、其实还有手动初始化carousel组件的方法

这个方法在Bootstrap 2.x就在使用,当 data-ride="carousel" 这个方法不管用的时候,可以手动初始化一下。

$('#carousel-ad').carousel();

如果想控制图片轮转的时间间隔,还有参数:

        $(function(){
$('#carousel-ad').carousel({
interval: 3000
});
});

如果设置不自动播放:

        $('#carousel-ad').carousel({
pause: true,
interval: false
});

Bootstrap之Carousel不能自动播放的解决办法(转)的更多相关文章

  1. 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法

    由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...

  2. 使用swiper插件,隐藏swiper后再显示,不会触发自动播放的解决办法

    问题: 项目中有一个需求,当点击P1时,两个页面进行轮播.当点击P2时,页面不轮播. 设置好以后,点击P2,再点击P1,此时页面不能自动轮播,只能手动触发. 解决: 在轮播器配置里,配置observe ...

  3. X5内核浏览器video自动全屏解决办法-canvas

    最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...

  4. Windows Server 2008 任务计划无法自动运行的解决办法

    问题:编写的bat脚本,直接执行,成功:但是在任务管理器中配置该任务,运行不成功,结果显示为:0x1,系统环境为 Windows Server 2008. 分析:bat任务没有调用执行. 解决方案: ...

  5. win10总是自动重启的解决办法

    win10总是自动重启的解决办法_百度经验http://jingyan.baidu.com/article/7908e85c983523af481ad214.html

  6. 关于微信H5页面开发中音乐不自动播放的解决方法

    我想应该有很多人在做H5场景应用.H5微刊.H5微杂志的时候加入背景音乐吧(客户需求),相信很多人一定碰过不能自动播放的时候,即使是相同的iPhone 5s也有不播放的时候,很蛋疼吧!? 之前我的解决 ...

  7. bootstrap顶部导航遮挡下面内容的解决办法

    使用bootstrap设置顶部导航,并将导航栏固定,代码如下: <nav class="navbar navbar-expand-lg navbar-light bg-light fi ...

  8. 【转】使用ffmpeg转码的MP4文件需要加载完了才能播放的解决办法

    1.前一段时间做了一个ffmpeg转码MP4的项目,但是转出来的MP4部署在网站上需要把整个视频加载完成才能播放,到处找资料,最后找到解决方案记录于此备忘. FFMpeg转码由此得到的mp4文件中, ...

  9. jenkins构建完成后,执行的命令行的东西也会自动结束的解决办法

    问题: 把添加VPN的指令写在脚本里,然后用jenkins执行这个脚本,jenkins执行的结果是成功的,但是在机器上看,并没有执行成功.   问题分析: 其实在机器上执行过添加VPN的操作,只是在j ...

随机推荐

  1. 打开QQ会话

    Android:String url="mqqwpa://im/chat?chat_type=wpa&uin=123456";startActivity(new Inten ...

  2. splitFile2SmallFile

    1. split file into several files """ this is aa customizable version of the standard ...

  3. 2.MongoDB数据库简介

    1).简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. mongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...

  4. Timer的故事----Jdk源码解读

    咱们今天也来说说定时器Timer Timer是什么? Timer  n. [电子] 定时器:计时器:计时员 从翻译来看,我们可以知道Timer的本意是,定时定点. 而JDK中Timer类也的确是这个本 ...

  5. 最新IP地址数据库Dat格式-高性能高并发版(2017年1月)

    最新IP地址数据库->Dat格式 高性能格式->qqzeng-ip.dat 国内版-20170101-Dat 版                国外版-20170101-Dat 版     ...

  6. 【转】Delphi+Halcon实战一:两行代码识别QR二维码

    Delphi+Halcon实战一:两行代码识别QR二维码 感谢网友:绝代双椒( QQ号应原作者要求隐藏了:xxxx6348)的支持 本文是绝代双椒的作品,因为最近在忙zw量化培训,和ziwang.co ...

  7. Lucene.net应用

    1.加入盘古分词方法 /// <summary> /// 对输入的搜索的条件进行分词 /// </summary> /// <param name="str&q ...

  8. Fuzz的那些事

    Fuzz这个词汇行内的都懂,fuzz工具我就不多说了. 今天,说说fuzz前的准备工作--如何对软件进行修改实现可自动化和无人值守fuzz. 很多软件会有试用期.弹窗.覆盖提示.人机交互等等,这些都会 ...

  9. 完整安装cocoaPods

    cocoaPods是一款xcode项目管理第三方库的工具 *ruby源码镜像下载:https://ruby.taobao.org/mirrors/ruby/*升级gem的版本: $sudo gem u ...

  10. jQuery validation学习(1)验证只输入空格通过验证

    当input输入了空格是不会提示信息的 一般会去除空格然后进行验证 这个时候就要添加onkeyup事件去除左侧的空格 验证只输入空格通过验证 //添加验证手机方法 jQuery.validator.a ...