學習 jQuery plugin 外掛程式的基本運用
(一)瀏覽器搜尋外掛「jquery plugin slider」或直接連結這裡
試試 Slick Slider => 檢視 Example
(二)下載外掛程式 →點選 get it now →點選 Download Now => 解壓縮
(三)網頁內設計步驟 (How to use) --------- 點選網站中右上角【Install】按鈕
１、處理相關的 HTML 標籤語法
２、連結相關的 CSS 檔案到 </head> 的前面 (建議放在自己的CSS檔案前)
３、載入相關的 JS 檔案到 </body> 的前面 (有些外掛也可以放在 </head> 的前面)
４、在 <script> </script> 標籤之中，將網頁元素物件依作者指示交給外掛程式。
５、如有需要再加上 option 選項設定，如有需要再修改 CSS 樣式設定。
在 head 區增加以下連結及載入：
<!-- jquery 函式庫 -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- slick plugin start -->
<link rel="stylesheet" href="js/slick-1.8.1/slick/slick.css">
<link rel="stylesheet" href="js/slick-1.8.1/slick/slick-theme.css">
<script src="js/slick-1.8.1/slick/slick.min.js"></script>
<!-- slick plugin end -->
在 #main 區域內增加以下HTML：
<!-- slick slider start -->
<div class="slider">
<div><img src="images/index/slider_bg1.jpg" alt="" width="100%"></div>
<div><img src="images/index/slider_bg2.jpg" alt="" width="100%"></div>
<div><img src="images/index/slider_bg3.jpg" alt="" width="100%"></div>
</div>
<!-- slick slider end -->
增加 Script 程式，將準備好的HTML交給slick程式控制
<script>
$('.slider').slick();
</script>
增加 Option 選項，設定自動播放
<script>
$('.slider').slick({
autoplay: true,
autoplaySpeed: 4000
});
</script>
參考 Slick Slider 的各種 Demos 及 Settings 設定各種需要的Option選項
WEB