網頁日記 # 7｜Iris 程式小白

恭喜你們看到倒數第二集啦！ 可喜可賀🤩 

相信你學 JS 的目的應該也是想走前端或是做出屬於自己香味的網頁吧～ 那這集就是你發揮所學的地方嘍（摩拳擦掌🤛 

延續上集下拉式選單的精彩製作，這集要來教大家如何最簡單生出看起來好像很厲害的圖片輪播 Carousel！一起練功吧～

使用 Bootstrap 前注意事項：

1. 使用前必須按指示寫入指定 CSS 和 JS 程式碼（如不清楚可回上一篇日記 review）
2. Carousel 功能不會自動化調整輪播畫面尺寸，因此必須另行定義
3. Carousel default 功能無附加箭頭 (▶) 和指示 (indicators)，若有需求需自行添加
4. active 一定需加到其中一張輪播畫面的 <class> 之中，否則將無法顯示
5. 除了使用附加 js 碼可以指定換頁的間隔時間，在 <div> 中加入 data-interval=”10000″ 也可以達到一樣的效果 
6. data-slide 用於控制輪播畫面畫動的方向，可以選擇向前 (prev) 或向後 (next)；主要用於「箭頭」控制畫面次序（向前箭：carousel-control-prev-icon；向後箭：carousel-control-next-icon）
7. data-slide-to 表示一個輪播畫面到另一個輪播畫面的步驟，像是：data-slide-to=”1″ 表示輪播將轉到第二張（第一張編號為 “0”）；用於下方 indicators 的操控，特別之處是可直接跳轉到指定頁面，不需按順序一一輪播
8. 選擇輪播相片上，記得選取「無版權 no copyright」的圖片，以免侵權～ 另外，找好適合的照片後需將檔案（這裡示範為 jpg 檔）放置於 src 的引號中
9. 若要將文字置入在輪播圖片上，記得在附加文字外層 <div> 加上 class=”carousel-caption” 
10. 如果想要炫砲的「漸淡」換頁效果，可以將 carousel-fade 加到最上層 <div> 的 <class> 中
11. 最後～ data-ride=”carousel”  不加是無法驅動輪播的唷！ 

那就來立馬來看看成品吧！

範例程式碼：

1. 建構輪轉頁面

 <div class="carousel-inner">

    <div class="carousel-item active">

      <img class="d-block w-100" src="https://i.pinimg.com/originals/01/4c/cf/014ccf7549554c496c6099c4f4f1a6fc.jpg" alt="First slide">

   <div class="carousel-caption">

   <h5>Spatial Place</h5>

   <p>Wooooooooooow!</p>

  </div>

    </div>

    <div class="carousel-item">

      <img class="d-block w-100" src="https://cdn.hipwallpaper.com/i/79/44/tnKklr.jpg" alt="Second slide">

   <div class="carousel-caption">

   <h5>Horizon Beyond Imagination</h5>

   <p>Guess what?</p>

   </div>

    </div>

    <div class="carousel-item">

      <img class="d-block w-100" src="https://i.ytimg.com/vi/_XV2JW_ULLA/maxresdefault.jpg" alt="Third slide">

   <div class="carousel-caption">

   <h5>Dot's Life.</h5>

   <p>Peace out, mate!</p>

   </div>

    </div>

  </div>

</div>

2. 以有序列表控制下方 indicators 

<ol class="carousel-indicators">

      <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>

      <li data-target="#carouselIndicators" data-slide-to="1"></li>

      <li data-target="#carouselIndicators" data-slide-to="2"></li>

  </ol>

3. 建構箭頭控制頁面輪轉

<a class="carousel-control-prev" href="#carouselIndicators" 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="#carouselIndicators" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

4. 如果還有其他特別設定的功能，可以使用 Javascript 另行附加唷

像是：定時器… 等等，更多功能可參見 Bootstrap 官方文件 

$('.carousel').carousel({

  interval: 3000

})

5. Codepen 實況 aka. 程式碼全貌

如果喜歡我的日記＆想接收到更多 Javascript 相關資源，歡迎加入「程式小白學習群」，定期收看我的 JS 學習文章，也會有許多志同道合正在學習 JS 的朋友在裡頭等和你一起成長交流唷～    Lastly, 敬請期待下一篇最終章歐！ 

References 參考資料（也可作為閱讀此日記後的參考）：

1. https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/553824/
2. https://medium.com/anna-hsaio-%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC%E8%A8%98/js%E5%B0%8F%E5%88%86%E4%BA%AB-slide%E8%BC%AA%E6%92%AD%E5%A5%97%E4%BB%B6-5a0b90d1632
3. https://getbootstrap.com/docs/4.0/getting-started/introduction/
4. https://www.youtube.com/watch?v=ku_97a6Bgkg&list=RDCMUCvM5YYWwfLwpcQgbRr68JLQ&index=1
5. https://www.astralweb.com.tw/tips-of-bootstrap-carousel/
6. https://www.w3schools.com/bootstrap/bootstrap_carousel.asp