網頁上動態效果的外掛(plugin),在15年前開始大多以 jQuery 製作,所以稱為 jQuery plugin。
近年來改良新製的外掛或許不以 jQuery 製作,而以 JavaScript 製作,也稱為 HTML5 plugin。
不論原設計者的解說如何,依循以下三大步驟5小步驟,應該皆能完成外掛的套用。
<!-- 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 -->
<!-- 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 -->
<!-- 需要 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 -->
<script>
$('.slider').slick();
</script>
<script>
$('.slider').slick({
autoplay: true,
autoplaySpeed: 4000
});
</script>