10. 第十週 owl.carousel.js (上)

一、官網：

觸摸功能的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();
   });

   
   ​

三、實做