線上書籍

Home

網頁設計好好玩(下)

一、官網：

觸摸功能的jQuery插件，可以讓你創建一個美麗的旋轉木馬響應滑塊。

http://www.owlcarousel.owlgraphic.com/

二、安裝

  1. 引入CSS <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css"> <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

     

  2. 引入JS <script src="jquery.min.js"></script> <script src="owlcarousel/owl.carousel.min.js"></script>

     

  3. 設定HTML <!-- Set up your HTML --> <div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div>

     

  4. 調用插件 $(document).ready(function(){ $(".owl-carousel").owlCarousel(); });


    ​

三、實做