## 幻燈片 更多個性化定制請參考組件依賴庫 [http://www.swiper.com.cn/api/basic/2014/1213/16.html](http://www.swiper.com.cn/api/basic/2014/1213/16.html) [TOC]  [查看演示效果](http://hdjstest.hdphp.com/test/swiper.html) ## 使用 ``` <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://oss.hdcms.com/1502963276236c0417.jpg"> </div> <div class="swiper-slide"> <img src="http://oss.hdcms.com/150183869614d9919.jpg"> </div> <div class="swiper-slide"> <img src="http://www.houdunwang.com/attachment/69661487768411.jpg"> </div> </div> <!-- 如果需要分頁器 --> <div class="swiper-pagination"></div> <!-- 如果需要導航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <style> .swiper-container { width: 600px; height: 300px; } </style> <script> require(['hdjs'], function (hdjs) { hdjs.swiper('.swiper-container', { loop: true, //自動輪換 autoplay: { delay: 1000, }, //如果需要分頁器 pagination: { el: '.swiper-pagination', clickable: true }, //如果需要前進后退按鈕 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) }) </script> ```