Jquery輕量級幻燈外掛-OWL Carousel--支援觸屏的移動瀏覽器
阿新 • • 發佈:2019-02-02
今天看到一個外掛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