博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap之Carousel不能自动播放的解决办法(转)
阅读量:6868 次
发布时间:2019-06-26

本文共 1108 字,大约阅读时间需要 3 分钟。

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

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

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

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

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

你可能感兴趣的文章
过度加班? - 是该到了认真考虑的时候了。
查看>>
linux启动出问题
查看>>
linux查看哪些进程占用swap空间
查看>>
VS_断点无效
查看>>
关于“无敌删除命令”
查看>>
017 搭建eureka注册中心
查看>>
nis服务器搭建
查看>>
红帽企业存储管理之DRBD应用详解
查看>>
Linux下mail服务器架构之源码实现postfix邮件基本功能
查看>>
Bios加密
查看>>
Apache 服务+ AWStat分析系统的应用
查看>>
前端技术学习之选择器(六)
查看>>
使用 Docker 搭建 Tomcat 运行环境
查看>>
vim使用技巧
查看>>
牛反天望观测太阳系内目标的使用小记 (一)
查看>>
Create a RHEL6 PXE Installation Server
查看>>
【Android游戏开发二十二】(图文详解)游戏中灵活实现动画播放!
查看>>
桌面支持--Office2013没有Office Picture Manage怎么安装
查看>>
chmod修改文件权限失败
查看>>
数据结构与算法-->互为素数
查看>>