BS4(3)-首頁

範例結果

以下中文描述源自BS4中文網

一、廣告輪播

【Documentaion(文件)】>【Components(元件)】>【Collapse(輪播)】(連結處)

S1:準備工作:header區圖片改為廣告輪播

S1-1:三張照片的輪播+文字描述

  <header>
    <!-- Carousel 廣告輪播-->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="./images/slider01.jpg" alt="First slide">
          <div class="carousel-caption d-none d-md-block">
            <h5>考照必勝,省很大</h5>
            <p>考照必勝,省很大內文</p>
          </div>
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="./images/slider02.jpg" alt="Second slide">
          <div class="carousel-caption d-none d-md-block">
            <h5>台灣動畫新里程</h5>
            <p>台灣動畫新里程內文</p>
          </div>
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="./images/slider03.jpg" alt="Third slide">
          <div class="carousel-caption d-none d-md-block">
            <h5>Python創新應用實務班</h5>
            <p>Python創新應用實務班內文</p>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </header>

S1-2:六張照片的輪播+下方導引鈕確認

  <header>
<!-- Carousel 廣告輪播-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./images/slider01.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>考照必勝,省很大</h5>
<p>考照必勝,省很大內文</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./images/slider02.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>台灣動畫新里程</h5>
<p>台灣動畫新里程內文</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./images/slider03.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Python創新應用實務班</h5>
<p>Python創新應用實務班內文</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./images/slider04.jpg" alt="設計無限未來">
<div class="carousel-caption d-none d-md-block">
<h5>設計無限未來</h5>
<p>設計無限未來內文</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./images/slider05.jpg" alt="簡報完全攻略">
<div class="carousel-caption d-none d-md-block">
<h5>簡報完全攻略</h5>
<p>簡報完全攻略內文</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./images/slider06.jpg" alt="Maker機器人程式營">
<div class="carousel-caption d-none d-md-block">
<h5>Maker機器人程式營</h5>
<p>Maker機器人程式營內文</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>

S2:CSS美化

body {
font-family: Verdana, 'Microsoft JhengHei', sans-serif;
}
/* header Carosel 調整 */
.carousel-caption{
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, 1px 3px 3px #000, -1px 3px 3px #000;
}
.carousel-indicators li{
box-shadow: 1px 1px 2px #000;
}
.carousel-indicators .active{
background-color: rgba(253, 82, 148, 0.726);
}

Carousel 加入Swipe事件

參考連結

S0.降jQuery 版本至1.12.4版【jQuery CDN

S1.至jQuery Mobile官網,下載swipe等Touch事件

S2寫入jQuery