今天看到一個外掛OWL Carousel幻燈片。

一、首先是說明一下OWL Carousel幻燈的主要功能。

1、Jquery外掛，品牌好，哈哈。基於Jquery開發，比較穩定
2、檔案小。Css+js不到10k，壓縮之後。
3、支援觸屏。經過測試，在android手機的主流瀏覽器：QQ、百度、UC、微信內建瀏覽器等支援
4、響應式設計。支援不用螢幕、觸屏。支援div、圖片等。支援全部顯示、單個顯示
5、簡潔程式碼，使用方便

二、OWL Carousel幻燈支援的展示內容型別

1、支援div如下圖.div內容你自己定義就行

2、支援圖片

3、支援單個專案顯示

三、使用方法

1、引用js和css檔案

<!-- Basic stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!-- You can use latest version of jQuery  -->
<script src="jquery-1.9.1.min.js">
 
</script>

<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

2、html程式碼：

<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、js

$(document).ready(function() {

  $("#owl-example").owlCarousel();

});

四、OWL Carousel引數說明

五、 外部呼叫的api介面

//Initialize Plugin
$(".owl-carousel").owlCarousel()

//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel');

//Public methods
owl.next()   // Go to next slide
owl.prev()   // Go to previous slide
owl.goTo(x)  // Go to x slide

owl.update() // Update Slide

owl.buildControlls()    // Build Controlls
owl.destroyControlls()  // Remove Controlls

owl.play() // Autoplay
owl.stop() // Autoplay Stop