Owl Carousel

直接到官方網站下載範例程式做練習吧!


舉例來說，官方網站範例下載後，在 docs\demos\ 的 autoplay.html，先帶大家找出來那些多餘的語法將之去除後，再改成以陣列方式產生捲動內容的版本(jsfiddle , jsbin )，並且注意裡面也改成引用CDN版的OwlCarousel2及CDN版的jQuery。

1. Load jQuery and include Owl Carousel plugin files

To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

 <!-- Important Owl stylesheet -->  
 <link rel="stylesheet" href="owl-carousel/owl.carousel.css">  
 <!-- Default Theme -->  
 <link rel="stylesheet" href="owl-carousel/owl.theme.css">  
 <!-- jQuery 1.7+ -->  
 <script src="jquery-1.9.1.min.js"></script>  
 <!-- Include js plugin -->  
 <script src="assets/owl-carousel/owl.carousel.js"></script>  

2. Set up your HTML

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

   <div id="owl-example" 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>  

3. Call the plugin

Now call the Owl initializer function and your carousel is ready.

   $(document).ready(function() {  
    $("#owl-example").owlCarousel();  
   });