WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-2. 運用外掛 Slick Slider

學習 jQuery plugin (新趨勢也稱為HTML5 plugin)外掛程式的基本運用

網頁上動態效果的外掛(plugin)，在15年前開始大多以 jQuery 製作，所以稱為 jQuery plugin。

近年來改良新製的外掛或許不以 jQuery 製作，而以 JavaScript 製作，也稱為 HTML5 plugin。

不論原設計者的解說如何，依循以下三大步驟5小步驟，應該皆能完成外掛的套用。

(一)瀏覽器搜尋外掛「jquery plugin slider」 => 檢視 Example => 試試 Slick Slider
(二)下載外掛程式 → 點選網站中 Get it now → 點選 Download => 解壓縮
(三)網頁內設計步驟 (How to use) -------------- 點選網站中 usage 按鈕可以查看說明
１、處理相關的 HTML 標籤語法
２、連結相關的 CSS 檔案到 </head> 的前面 (建議放在自己的CSS檔案前)
３、載入相關的 JS 檔案到 </body> 的前面 (有些外掛也可以放在 </head> 的前面)
４、在 <script> </script> 標籤之中，將網頁元素物件依作者指示交給外掛程式。
５、如有需要再加上 option 選項設定，如有需要再修改 CSS 樣式設定。

 

試試 Slick Slider：

STEP-1：先安排相關的 HTML 標籤 (元素物件)

<!-- slick slider start -->
<div class="slider">
  <div><img src="路徑/圖檔" alt=""></div>
  <div><img src="路徑/圖檔" alt=""></div>
  <div><img src="路徑/圖檔" alt=""></div>
</div>
<!-- slick slider end -->

STEP-2：在 head 區安排 CSS 的連結

<!--  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">
<!--  slick plugin end  -->

或是連結到CDN的檔案

<!--  slick plugin start  -->
<link rel="stylesheet" type="text/css" 
      href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<!--  slick plugin end  -->

STEP-3：在 </body>的上一行，或是在 head 區中安排 JS 的載入

<!--  需要 jquery 函式庫  -->
<script src="js/jquery-3.6.0.min.js"></script>

<!--  slick plugin start  -->
<script src="js/slick-1.8.1/slick/slick.min.js"></script>
<!--  slick plugin end  -->

或是連結到CDN的檔案

<!--  slick plugin start  -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--  slick plugin end  -->

STEP-4：增加 Script 程式，將準備好的HTML交給slick程式控制

<script>
  $('.slider').slick();
</script>

STEP-5：增加 Option 選項，設定自動播放 (其他選項參看網站中的 demos 或是 settings)

<script>
$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 4000
  });
</script>

 

 

go TOP