bootstrap輪播圖組件

一、輪播圖組件模板（官方文檔）

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <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>
      
        <!-- 輪播圖片及說明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="..." alt="圖片1">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="..." alt="圖片2">
            <div class="carousel-caption">
              ...
            </div>
          </div>
        </div>
      
        <!-- 控制按鈕：左右切換 -->
        <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>

二、分析輪播圖組件結構

①carousel 輪播圖的模塊， slide是否加上滑動效果，data-ride="carousel" 初始化輪播圖屬性

②data-target="#carousel-example-generic" 控制目標輪播圖，data-slide-to="數字" 控制的是輪播圖當中的第幾張 （索引），class="active" 當前選中的點

③role="listbox" 提供給屏幕閱讀器使用，class="carousel-inner"需要輪播的容器，每一個容器里class="item"包括輪播圖片img和圖片的說明性文字carousel-caption

④left carousel-control是切換上一張的按鈕，right carousel-control是切換下一張的按鈕，其中的data-slide="next/prev"聲明左滑還是右滑，aria-hidden和sr-only是提供給屏幕閱讀器使用

三、精簡版輪播圖模板

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <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>
        <!-- 輪播圖片及說明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="..." alt="圖片1">
          </div>
          <div class="item">
            <img src="..." alt="圖片2">
          </div>
          <div class="item">
            <img src="..." alt="圖片3">
          </div>
        </div>
        <!-- 控制按鈕：左右切換 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>

四、例子：在PC端使用輪播圖（高度固定，圖片居中，容器鋪滿，使用背景圖）

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <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>
        <!-- 輪播圖片及說明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#" class="pc_imgBox" style="background-image: url('images/2-1.png')"></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url('images/2-2.png')"></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url('images/2-3.png')"></a>
          </div>
        </div>
        <!-- 控制按鈕：左右切換 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>

        .pc_imgBox{
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position:  center;
            background-repeat: no-repeat;
        }
        .carousel-indicators{
            background: #ccc;
        }
 

五、例子：在移動端使用輪播圖（寬度自適應，高度自動變化，使用img引入圖片）

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <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>
        <!-- 輪播圖片及說明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#" class="pc_imgBox"><img src="images/1-1.png" alt=""></a>
          </div>
          <div class="item">
            <a href="#" class="m_imgBox"><img src="images/1-2.png" alt=""></a>
          </div>
          <div class="item">
            <a href="#" class="m_imgBox"><img src="images/1-3.png" alt=""></a>
          </div>
        </div>
        <!-- 控制按鈕：左右切換 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>

        .m_imgBox{
            display: block;
            width: 100%;
        }
        .carousel-indicators{
            background: #ccc;
        }
  

六、例子：響應式的輪播圖（利用媒體查詢自適應PC端和移動端）

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 指示器 -->
        <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>
        <!-- 輪播圖片及說明文字 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-1.png')"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-1.png" alt=""></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-2.png')"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-2.png" alt=""></a>
          </div>
          <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-3.png')"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-3.png" alt=""></a>
          </div>
        </div>
        <!-- 控制按鈕：左右切換 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>

        .pc_imgBox{
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position:  center;
            background-repeat: no-repeat;
        }
        .m_imgBox{
            display: block;
            width: 100%;
        }
        .carousel-indicators{
            background: #ccc;
        }