Bootstrap之Carousel不能自动播放的解决办法(转)

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});

转载于:https://www.cnblogs.com/MirageFox/p/5969866.html

Bootstrap之Carousel不能自动播放的解决办法(转)相关推荐

chrome下音频无法自动播放的解决办法
众所周知,chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接 ...
iphone 微信网页自动播放音频解决办法
2019独角兽企业重金招聘Python工程师标准>>> iphone 虽然支持html5的audio 但有很多限制,比如必须通过用户操作才能加载音视频文件,而 preload 属性 ...
win10未开启没有运行无线服务器,win10系统提示共享无线自动配置服务没有自动运行的解决办法...
win10系统提示共享无线自动配置服务没有自动运行的解决办法? win10系统有很多人都喜欢使用,我们操作的过程中常常会碰到win10系统提示共享无线自动配置服务没有自动运行的问题.如果遇到win10 ...
unity3d 动画中断并重新播放的解决办法
为什么80%的码农都做不了架构师?>>> 如果想中断某个正在播放的动画,然后重新播放? 比如玩家被敌人击中了,正在播放被击中的动画,不巧紧接着玩家又被敌人击中一次,此时就得中断 ...
服务器虚拟机经常自动断网解决办法
虚拟机经常自动断网解决办法问题:虚拟机时常出现断网情况,无法远程连接,无法使用解决方案: 右键网络连接,选择疑难解答,出现如下结果一.进去控制面板,选择网络和Internet,再选择网络和共享中 ...
ideapad720s在接通电源情况下，关机后自动重启的解决办法
win10, ideapad720s, 在接通电源情况下,关机后自动重启的解决办法本文参考:[求助] Win10系统联想U430P笔记本关机后自动重启的解决方法! 步骤1:点击笔记本左下角的&quo ...
输入文字时自动带空格解决办法
输入文字时自动带空格解决办法: 把输入法中的全角改为半角,即: 把改为
Android Studio 自动更新失败解决办法
Android Studio 自动更新失败解决办法 Dec 26th, 2014 | Comments 昨天在G+中看到Android Studio又有更新了就心血来潮想去更新体验一下,可是无论我怎么 ...
电脑无法自动获得ip解决办法(dhcp服务无法启动）
局域网电脑无法自动获得ip解决办法: 一下方法针对电脑设置的问题,一般电脑自动获得ip上网,首先在路由器需要开启DHCP服务(一般都会开启的),然后需要电脑开启dhcp client 服务和dns c ...

Bootstrap之Carousel不能自动播放的解决办法(转)

Bootstrap之Carousel不能自动播放的解决办法(转)相关推荐

最新文章

热门文章