一、不能自动播放的解决办法

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">&lsaquo;</a>
     <a class="carousel-control right" href="#index-Carousel"  data-slide="next">&rsaquo;</a>

Bootstrap之Carousel问题的更多相关文章

  1. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  2. Bootstrap 之 Carousel

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

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

    Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...

  4. Bootstrap插件-carousel(轮播图)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. bootstrap实现Carousel旋转木马(焦点图)

    引入bootstrap相关文件后,在html中写如下代码: <div class="col-lg-9" > <!-- Carousel============== ...

  6. bootstrap的carousel图片轮播

    整个轮播是放在一个div .carousel和.slide的div中的, 包括3个部分: 1. 第一个部分indicator位于下方的指示器部分. 结构是一个ol和li, ol的类是carousel- ...

  7. 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  8. Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    Bootstrap 的 carousel.js 插件并没有支持手势. 3种解决方案 : jQuery Mobile (http://jquerymobile.com/download/) $(&quo ...

  9. Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js

    在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...

随机推荐

  1. LeetCode Shortest Word Distance II

    原题链接在这里:https://leetcode.com/problems/shortest-word-distance-ii/ 题目: This is a follow up of Shortest ...

  2. LeetCode Shortest Palindrome

    原题链接在这里:https://leetcode.com/problems/shortest-palindrome/ 题目: Given a string S, you are allowed to ...

  3. 详解OpenGL中的各种变换(投影变换,模型变换,视图变换)(完)——法线变换

    前面两节内容已经说完了所有的三种变换.也就是说我们现在程序里面既不需要glLookAt(),也不需要gluPerspective(),这些矩阵我们都可以自己写.然后,再用glMultMatrix()来 ...

  4. Speed-BI数据分析案例:2016年8月汽车销量排行榜

    据中国汽车工业协会统计分析,2016年8月,乘用车市场表现较好,当月销量环比和同比均呈较快增长.1-8月,乘用车销量总体呈稳定增长,增幅比1-7月继续小幅提升.      8月,乘用车共销售179.5 ...

  5. ThinkPHP 自动验证与自动填充无效可能的原因(转)

    自动验证与自动填充是在使用ThinkPHP时经常用到的功能,但偶尔会遇到自动验证与自动填充无效的情况,本文就ThinkPHP 自动验证与自动填充无效可能的原因做一些分析. create() Think ...

  6. iTOP-4412 平台基础软件的安装和学习

    这两天在电脑上根据开发手册安装了超级终端.虚拟机.Ubuntu.以及Vim 编辑器等开发所必备的环境 1.笔记本没有串口,从实验室找了USB 转串口线来连接开发板和PC,从网盘找到并安装了USB 转串 ...

  7. sockopt note

    1.closesocket(一般不会立即关闭而经历TIME_WAIT的过程)后想继续重用该socket:BOOL bReuseaddr=TRUE;setsockopt(s,SOL_SOCKET ,SO ...

  8. Codeforce Round #226 Div2

    这次CF虽然,但是- - 第一题看了很久的题目意思额,虽然慢了点- -,但还算没出错,还学会了hack了- -,还+了100- - 第二题想了很久- -...后来发现可以暴力- -,哎 第三题本来也应 ...

  9. 转:windows 7系统安装与配置Tomcat服务器环境

    工具/原料 jdk-7u45-windows-x64(我的系统是64位系统,32位的请选x86下载) apache-tomcat-8.0.0-RC5-windows-x64 方法/步骤   下载说明, ...

  10. TImageList 和 TlistView 组件(C++Builder)

    __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { //加载图标到Imagelist Graphics::TBitmap *bm ...