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)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...
随机推荐
- 招聘一个靠谱的iOS》面试题参考答案(上)
说明:面试题来源是微博@我就叫Sunny怎么了的这篇博文:<招聘一个靠谱的 iOS>,其中共55题,除第一题为纠错题外,其他54道均为简答题. 博文中给出了高质量的面试题,但是未给出答案, ...
- Android Error:Execution failed for task ':app:mergeDebugResources'. > Crunching Cruncher bg_btn.9.png
使用Android Studio来进行图片背景设置,编译时发生了一个mergeDebugResources异常. 异常原因 这个异常的意思是对资源合并发生错误,那就是我使用的图片资源有问题,我使用的图 ...
- tomcat的部署
零.服务器.Servlet容器.web容器 Servlet容器:能够运行Servlet的环境叫做Servlet容器 web容器:能够运行web应用的环境就叫做web容器 weblogic websph ...
- AsyncTask的使用方法和理解
.对于耗时的操作,我们的一般方法是开启“子线程”.如果需要更新UI,则需要使用handler 2.如果耗时的操作太多,那么我们需要开启太多的子线程,这就会给系统带来巨大的负担,随之也会带来性能方面的问 ...
- D3D标注动态避让
原来也思考了该如何实现标注动态避让,认为必须得计算字符串所占的大小.如果在屏幕上要计算屏幕象素之类的东西. 今天总算找到了实现方法,在C# WorldWind中的KMLImporter类中有.关键是F ...
- bootstrap学习之三—插件
一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...
- Exchanger示例
Exchanger有两个用户,当一(A)方调用exchange方法之后,就开始等待,直到另一(B)方开始调用exchange方法.两个exchange可以认为是原子性的. public class C ...
- 仿Smarty替换模板标签时遇到的问题
最近正在做一个微型的仿TP框架,当然以鄙人之技术只能略仿表层,于是遇到的问题层出不穷.今天做到View层替换模板部分,本以为一下子搞掂的事,果不其然又是败下阵来. 好了,来重点. 模板文件 test1 ...
- IIS URL Rewrite redirect from one Domain to another
IIS URL Rewrite enables Web administrators to create powerful rules to implement URLs that are easie ...
- 客户端 ios与android 的判断
<script> if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //alert(navigator.userAgen ...