Bootstrap之Carousel问题
一、不能自动播放的解决办法
1、默认使用Bootstrap的Carousel组件,只需要加上 data-ride="carousel" 就可以实现自动播放了。无需使用初始化的js函数。所以,如果carousel不会自动播放,那么首先检查这个部分。这里还能加其他参数,比如是设置图片 轮转的时间间隔。
代码:<div id="carousel-ad" class="carousel slide" data-ride="carousel" data-interval="2000">
2、当 data-ride="carousel" 这个方法不管用的时候,可以手动初始化一下。代码如下:
$('#carousel-ad').carousel();
如果还想控制图片轮转的时间间隔,还有参数:
$(function(){
$('#carousel-ad').carousel({
interval: 3000
});
});
二、更改左右箭头
1、上下居中
<a class="left carousel-control" href="#index-Carousel" data-slide="prev" role="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一页</span>
</a>
<a class="right carousel-control " href="#index-Carousel" data-slide="next" role="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一页</span>
</a>
2、顶端
<a class="carousel-control left" href="#index-Carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#index-Carousel" data-slide="next">›</a>
Bootstrap之Carousel问题的更多相关文章
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- Bootstrap 之 Carousel
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- Bootstrap之Carousel不能自动播放的解决办法(转)
Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...
- Bootstrap插件-carousel(轮播图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap实现Carousel旋转木马(焦点图)
引入bootstrap相关文件后,在html中写如下代码: <div class="col-lg-9" > <!-- Carousel============== ...
- bootstrap的carousel图片轮播
整个轮播是放在一个div .carousel和.slide的div中的, 包括3个部分: 1. 第一个部分indicator位于下方的指示器部分. 结构是一个ol和li, ol的类是carousel- ...
- 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
- Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
Bootstrap 的 carousel.js 插件并没有支持手势. 3种解决方案 : jQuery Mobile (http://jquerymobile.com/download/) $(&quo ...
- Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...
随机推荐
- django 部署到 apache
安装完django之后,每次都需要通过命令来启动启动开发服务器.虽然调试和测试方便,但只能在本地运行,并且不能承受许多用户同时使用的负载.所以需要将Django部署到生产级的服务器,这里选择apach ...
- 微信域名weixin.com天价成交!是腾讯吗?
据业内人士爆料,“微信”双拼域名weixin.com已于今天交易了,成交价格8位数.如此大手笔,神秘买家会是腾讯吗? 通过查询该域名的whois信息,最近一次的更新时间显示为今年4月13日,注册邮箱信 ...
- mysql开发中使用存储过程
在mysql开发中使用存储过程的理由: 当希望在不同的应用程序或平台上执行相同的函数,或者封装特定功能时,存储过程是非常有用的 mysql 执行语句是要先编译,然后再执行的.这样如果查询并发大的时候. ...
- robotframework数据驱动框架
即将更新...............
- 阿里云数据库实例的一个db被开发人员删除了 如何恢复
1没有 逻辑备份的话. 如下操作即可 可以将那个临时实例的需要导的db用逻辑备份出来恢复到主实例就行了 好多朋友都在问,RDS中把数据恢复到7天内任意时间点的功能在哪里啊? 其实挺简单的,只需要五步操 ...
- javascript学习之JSON
JSON本来是javascript的一个自己,后来已经成为了一种独立的数据格式,在web应用中运用极其广泛. 与javascript对象不同的是,JSON中的属性名任何时候都必须加双引号. javaS ...
- 转:VS中的路径宏 vc++中OutDir、ProjectDir、SolutionDir各种路径
http://www.cnblogs.com/lidabo/archive/2012/05/29/2524170.html
- PLSQL 的简单命令之二
--1. 查询工资大于12000的员工姓名和工资 --2. 查询员工号为176的员工的姓名和部门号 ' --3. 选择工资不在5000到12000的员工的姓名和工资 --4. 选择雇用时间在1998- ...
- linux gitlab nginx 安装 配置
更新:bitnami-gitlab 7.8版本后界面发生变化 邮件问题: cd /data/server/gitlab/apps/gitlab/htdocs/config vim environmen ...
- RMAN-06059: expected archived log not found, loss of archived log compromises recoverability
归档日志被物理删除后执行rman操作报错: RMAN> backup database plus archivelog; Starting backup at -JUL- :: current ...