Bootstrap学习之Carousel_bootstrap carousel__panda_的博客-程序员秘密

这是bootstrap的一个js插件，使用的时候需要引入bootstrap的库，而bootstrap的是在jQuery的基础下运行的。

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>

A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.

这是一个滑动栏。

这是一些关键词

1： Initial active element required：The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

class="active"

active类是默认被选中第一个展示

2：

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

每个item类可以加以阐述

3：可以改变延迟扩展的时间

4：或者我们用js来实现

Methods

`.carousel(options)`

Initializes the carousel with an optional options object and starts cycling through items.

复制

$('.carousel').carousel({
     
  interval: 2000
})

5：效果图

以下是具体代码实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <title></title>
    <style>
        #carousel-example-generic{
            width: 800px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            margin-top: 60px;
            margin-bottom: 80px;

        }
    </style>
</head>
<body>
<div id="carousel-example-generic" style="text-align: center" class="carousel slide"  data-ride="carousel" data-interval="3000" >
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
        <li data-target="#carousel-example-generic" data-slide-to="6"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/manchester_city1.jpg" alt="...">
                <div class="carousel-caption">
                    <h3></h3>
                </div>
            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city2.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city3.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city4.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city5.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city6.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city7.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>
<script>
    $('.carousel').carousel({
        interval: 2000;
    })
</script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

以下是用到的图片

本文链接：https://blog.csdn.net/qq_18832439/article/details/48091435

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

np.random.randint和random.randint_豪言成笑谈的博客-程序员秘密

np.random.randint(low, high=None, size=None, dtype=’l’) (return a range of intergers with low or high bounds)Return random integers from low (inclusive) to high (exclusive). the specified dtype in the “half-open” interval [low, high). Ifhigh is None (the

多旋翼飞行器设计与控制·Pixhawk4以及外部设备接线（笔记004）_手可摘星辰不去高声语的博客-程序员秘密

笔记主要来源：Pixhawk 4 接线快速入门目录一、Pixhawk 4 的各个接口二、接线图概览（重要传感器及外围设备）三、飞控、GPS的安装和方向四、电源五、无线电遥控六、数传电台（可选）七、SD Card（可选）八、电机以及其他外设一、Pixhawk 4 的各个接口FMU：Flight Management Unit 飞行管理组件主 FMU 处理器：STM32F765 32 位 Arm Cortex-M7，216MHz，2MB...

Hexo-Fluid主题添加音乐页面_hexo fuild主题添加音乐页面_林慕凡的博客-程序员秘密

效果预览：https://bynote.cn/playlist/如果你想使用音乐页面，很多人都会推荐安装hexo-tag-aplayer这款插件。这款插件通过Hexo独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的html。例如：如果使用插件，在markdown中要这样写{% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %}其会被渲染为&.

navicat版本低连接远程mysql报错_kareter的博客-程序员秘密

用navicat连接远程连接mysql，报错不知道原因。mysql安装在云服务器上ubantu，liunx基本不接触。。。。，安装ubantu也只是想练练linux。第一个错 Can't connect to MySQL server xxx.xxx.xxx.xxx (10061)查---说是配置文件/etc/mysql/my.cnf中bind-address = 127.0.0.1要注释掉，改了以后重启mysql（命令service mysql restart），重启后这个报错不见了，但又出现

【mysql】MYSQL的日志(redo log,binlog)顺序读写，数据文件随机读写以及linux底层原理_redo log如何保证顺序写_云川之下的博客-程序员秘密

文章目录前言1. 对于redo log,binlog这种日志进行的磁盘顺序读写2. 对于表空间磁盘文件里的数据页进行的磁盘随机读写3. Linux操作系统的存储系统4. 数据库服务器使用的RAID存储架构4.1 RAID存储架构的电池充放电原理4.2 RAID锂电池充放电导致MYSQL数据库性能抖动的优化4.3 解决RAID锂电池充放电导致的存储性能抖动的解决方案前言redo log用于恢复bufferpool，binlog用户恢复聚簇索引对应的ibd文件1. 对于redo log,binlog这种日

vue中根据输入地址生成百度地图_进阶de程序猿的博客-程序员秘密

在indexHTML中加入引用ak=? ?为百度地图密匙<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=？"></script>webpack.base.conf.js中与entry同级entry: { app: './src/main....