1. 程式人生 > >Jquery輕量級幻燈外掛-OWL Carousel--支援觸屏的移動瀏覽器

Jquery輕量級幻燈外掛-OWL Carousel--支援觸屏的移動瀏覽器

今天看到一個外掛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引數說明

引數 預設值 說明
slideSpeed 200 滑動間隔時間,毫秒
paginationSpeed false 是否支援分頁
autoPlay false 是否自動播放。
goToFirst true 回到首頁
goToFirstSpeed 1000 回到首頁時間
stopOnHover false 設定成true不支援觸控
navigation false 是否顯示上一個和下一個按鈕。
navigationText [“prev”,”next”] 顯示上下頁的文字。不需要的話設定成false: “navigationText : false”
pagination true 顯示分頁
paginationNumbers false 是否顯示分頁數字
responsive true 是否開啟響應式設計
items 5 一次展示專案個數
itemsDesktop [1199,4] 在桌面寬度受限的情況,顯示專案數
itemsDesktopSmall [979,3] 同上
itemsTablet [768,2] 同上
itemsMobile [479,1] 同上
baseClass “owl-carousel” 樣式
theme “owl-theme” 使用的主題

五、 外部呼叫的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