簡介

Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片插件，它具有一下特點：

兼容所有瀏覽器

Owl Carousel 提供了眾多的參數、回調函數及自定義事件（具體請往下瀏覽），所以它幾乎可以滿足你的所有要求。

兼容

瀏覽器兼容：兼容所有瀏覽器，包括 IE6、IE7。

jQuery 兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

1 <link href="css/owl.carousel.css"
 
 rel="stylesheet">
2 <link href="css/owl.theme.css" rel="stylesheet">
3 <script src="js/jquery.min.js"></script>
4 <script src="js/owl.carousel.js"></script>

2、HTML

 1 <div id="owl-demo" class="owl-carousel">
 2     <div>1</div>
 3     <div>2</div
 
>
 4     <div>3</div>
 5     <div>4</div>
 6     <div>5</div>
 7     <div>6</div>
 8     <div>7</div>
 9     <div>8</div>
10 </div>

3、JavaScript

1 $(function(){
2     $(‘#owl-example‘).owlCarousel();
3 });

參數

回調函數

變量 類型 默認值 說明

beforeUpdate 函數 false 響應之後的回調函數

afterUpdate 函數 false 響應之前的回調函數

beforeInit 函數 false 初始化之前的回調函數

afterInit 函數 false 初始化之後的回調函數

beforeMove 函數 false 移動之前的回調函數

afterMove 函數 false 移動之後的回調函數

afterAction 函數 false 初始化之後的回調函數

startDragging 函數 false 拖動的回調函數

afterLazyLoad 函數 false 延遲加載之後的回調函數

自定義事件

事件 說明

owl.prev 到上一個

owl.next 到下一個

owl.play 自動播放，可傳遞一個參數作為播放速度

owl.stop 停止自動播放

owl.goTo 跳到第幾個

owl.jumpTo 不使用動畫跳到第幾個

jQuery幻燈片插件OWL Carousel