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. IOS在线安装App

    在越狱设备上可以安装,如果设备不越狱也想安装,就要企业发布权限了,可惜我没有,所以不能测试了! 1.创建ipa及plist文件: XCode菜单栏->Product->Archive-&g ...

  2. PeopleSoft Rich Text Boxes上定制Tool Bars

      在使用PT8.50或在8.51时,你可能遇到过Rich-text编辑框.该插件使你能够格式化文本,添加颜色.链接.图片等等.下面是效果图: 如果页面中只有这么一个字段,该文本框就会有足够的空间来容 ...

  3. c#序列化json字符串及处理

    上面提到的第四篇文章最后有个解析数组的例子,出现了 .First.First.First.First.Children(); 我表示很晕,网上找的的例子大多数是关于JObject的,但是我很少看到JA ...

  4. PMP考试

    今天是第二次PMP模拟考试,得了146分,比上次高25分,这次题目相对简单些,看来昨晚的复习没有白费,还是有效果的. 有些题目影响还是比较深刻,老外的项目管理思想是先规划好一切再执行(管理),比如信息 ...

  5. 捷波朗 jabra BT3030 蓝牙耳机

    蓝牙版本V2.0 通话时间 8小时 按键说明:轻敲 快按轻敲两下 在1.5秒内快速按两下按 大约 1秒钟按住 大约 4秒钟 充电提示绿灯闪亮 正在充电持续绿灯 已完全充满电 检查电量按 音量上调(+) ...

  6. php 两段文本对比,不同的文字显示高亮

    php 两段文本对比,不同的文字显示高亮[下面这个只能区分错误后面的..]   <?php $str1 ="MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwgg ...

  7. javascript - 可编辑表格控件 支持全键盘操作(无JS框架)

    项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定 ...

  8. Kafka深度解析

    本文转发自Jason’s Blog,原文链接 http://www.jasongj.com/2015/01/02/Kafka深度解析 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅 ...

  9. sendEmail报错:at /usr/share/perl5/vendor_perl/IO/Socket/SSL.pm

    sendEmail发送邮件是出现以下报错: *******************************************************************  Using the ...

  10. 嵌入式Linux > 简易安装思路,步骤记录

    思路就是把ipk文件通过ftp上传到linux上,然后通过opkg来安装. 很多的工具已经都能UI化这些操作了,命令行只是备用的工具, - 当所有工具都不好用或者遇到问题的时候,上命令行是最直接.快捷 ...