網頁上動態效果的外掛(plugin),在15年前開始大多以 jQuery 製作,所以稱為 jQuery plugin。
近年來改良新製的外掛或許不以 jQuery 製作,而以 JavaScript 製作,也稱為 HTML5 plugin。
不論原設計者的解說如何,依循以下三大步驟5小步驟,應該皆能完成外掛的套用。
<!-- Slider main container --> <div class="swiper-container mySwiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><img src="路徑/圖檔" alt=""></div> <div class="swiper-slide"><img src="路徑/圖檔" alt=""></div> <div class="swiper-slide"><img src="路徑/圖檔" alt=""></div> </div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need pagination --> <div class="swiper-pagination"></div> </div> <!-- slick slider end -->
<!-- swiper plugin start --> <link rel="stylesheet" href="js/swiper/swiper-bundle.min.css"> <script src="js/swiper/swiper-bundle.min.js"></script> <!-- swiper plugin end -->
或是直接使用CDN
<!-- swiper plugin start --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <!-- swiper plugin end -->
<script> var swiper = new Swiper(".mySwiper" , { //其他選項option,例如:自動播放 autoplay: { delay: 2500 }, //左右方向鍵(不需要則刪除) navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, //下方指引器(不需要則刪除) pagination: { el: ".swiper-pagination", } } ); </script>