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

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. JavaScript:下拉列表框的事件处理

    下拉列表框处理操作主要使用的是一个onchang的事件,此事件描述的是内容改变后行为. 范例:观察下拉列表框的事件处理 代码: <!doctype html> <html lang ...

  2. Spring 3.x jar 包详解 与 依赖关系(转)

    以下的内容我会持续更新(当然是我有新发现的时候); 以下内容是我在网上搜索.整理.修改的而成的内容.由于很多内容都是转载了,无法追溯到源头,因此无法一一对原作者进行道谢. 这几天,我查阅大量的官方的文 ...

  3. linux多个python版本下导致no request报错

    解决办法: sudo apt-get install uwsgi uwsgi-core uwsgi-plugin-python sudo apt-get install uwsgi-plugin-py ...

  4. [BS-13] 创建和注册UITableViewCell及Storyboard和Xib区别

    创建和注册UITableViewCell及Storyboard和Xib区别 // 界面创建完成被调用 - (void)viewDidLoad { [super viewDidLoad]; /** 如果 ...

  5. [转载]ArcGIS Engine 中的多线程使用

    ArcGIS Engine 中的多线程使用 原文链接 http://anshien.blog.163.com/blog/static/169966308201082441114173/   一直都想写 ...

  6. 【未完待补充】linux 设置So动态库链接路径

    缘起 安装python的包Rtree(Rtree-0.8.2),但需要先安装C语言依赖包spatialindex-src(spatialindex-src-1.8.5).在安装完spatialinde ...

  7. Hadoop2.2.0 第一步完成MapReduce wordcount计算文本数量

    1.完成Hadoop2.2.0单机版环境搭建之后需要利用一个例子程序来检验hadoop2 的mapreduce的功能 //启动hdfs和yarn sbin/start-dfs.sh sbin/star ...

  8. Redis 存储原理

  9. Java中几种日志方案

    .本文记录Java中几种常用的日志解决方案 0x01 Log4j .这应该是一个比较老牌的日志方案了,配置也比较简单,步骤如下 1)添加对应依赖,比如 Gradle 中 dependencies { ...

  10. sdutoj 2607 Mountain Subsequences

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2607 Mountain Subsequence ...