用Bootstrap的Carousel做幻灯片尝试详解

用Bootstrap的Carousel做幻灯片尝试详解

 2016-01-15 12:21    网页设计   标签：Bootstrap 代码   1293    发表评论

今天准备做一个可移动的幻灯片展示，用Bootstrap自带的Carousel插件做后发现，原来它是这样的强大，根本不单单只做幻灯片！

Bootstrap给出的标准代码是这样的：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." 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>

代码分为3个部分，第一部分是指示，也就是告诉系统你有几张幻灯片。从0到10顺序排列，第一个<li>上加.active；第二部分是幻灯片内容，里面一般用来插入图片；第三部分是控制按钮，向左向右那种。

第一部分和第三部分都很容易理解，在这里我也不用多说了什么了。其中的第二部分是重点，我们来细细看下这段代码：

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

这段代码的本意思插入一个图片，然后调用了一个.carousel-caption的div来展示相应的标题或文字描述。其实我们可以把这段代码完全改变了，改变成一个单独的div模版，这样，它也可以实现的，就像我改变的这样：

<div class="row">
    <img class="col-sm-7 col-xs-12 img-responsive" src="#">
    <p class="col-sm-5 hidden-xs">
        ....
    </p>
</div>

这个会调用一个单独的div模块，这个模版左右7：5的形式排列，左边是图片，右面是文章，当界面缩小时，文字隐藏。通过这个一个变换，我们会代码的朋友们可以自行调整你们的所需，达到你们所需的目的。