Owl Carousel 2-支持触摸屏的响应式jQuery旋转木马插件

Owl Carousel 2是上一版Owl Carousel的升级版本。Owl Carousel 2可以让你创建漂亮的响应式旋转木马的jQuery插件，它支持移动触摸屏，功能十分强大。Owl的新特性有：

• 可以无限循环
• 项目可以居中显示
• 灵活的速度控制
• 多级别的padding设置
• 项目间可以设置Margin
• 使几乎所有的选项都具有响应能力
• 多种宽度设置
• 丰富的回调事件
• RTL（从右向左移动）
• YouTube/Vimeo视频支持
• 锚链接导航
• 合并项
• 还有更多...

浏览器兼容

Owl Carousel 2.x.x 版本和以前的1.x.x版本不兼容。Owl Carousel 2.x.x版本的大部分文件和1.x.x版本的基本相同，但是核心文件已经被从新编写。

Owl Carousel 2已经在下列浏览器中进行了测试：

• Chrome
• Firefox
• Opera
• IE7/8/10/11
• iPad Safari
• iPod4 Safari
• Nexus 7 Chrome
• Galaxy S4
• Nokia 8s Windows8

文件结构

Owl Carousel 2发行版的目录结构如下：

owlcarousel/
├── assets/
│   ├── owl.carousel.css
│   ├── owl.carousel.min.css
│   ├── owl.theme.default.css
│   ├── owl.theme.default.min.css
│   ├── owl.theme.green.css
│   ├── owl.theme.green.min.css
│   └── owl.video.play.png
│
├── owl.carousel.js
├── owl.carousel.min.js
├── LICENSE-MIT
└── README.md                  
                

插件依赖

Owl Carousel 2依赖于jQuery或Zepto。jQuery最低版本要求是1.8.3版本。

使用方法

CSS文件

在html头部中引入必要的css文件：

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">                  
                

owl.theme.default.css文件时可选的。

JS文件

在页面的尾部添加owl.carousel.min.js文件：

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>                  
                

HTML结构

Owl Carousel不需要设置复杂的html结构，你只需要将你的内容<div>（当然，owl可以工作在其它元素中，如a/img/span）包裹在一个class为owl-carousel的<div>中即可。Class owl-carousel是在owl.carousel.css文件中定义的，改变它需要修改整个owl.carousel.css文件。

调用插件

现在，你可以调用Owl Carousel的初始化方法来使旋转木马工作：

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

参数选项

下表中是所有内置的Owl Carousel参数选项：

Classes

下面的例子说明了Owl Carousel在HTML中是如何被渲染的。通过后面表格中列出的参数，你可以改变的class样式：

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
        </div>
    </div>
    <div class="owl-controls">
        <div class="owl-nav">
            <div class="owl-prev">prev</div>
            <div class="owl-next">next</div>
        </div>
        <div class="owl-dots">
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>
    </div>
</div>                  
                

事件

所有的事件都有Owl Carousel的核心代码提供。这使得你可以监听任何元素的变化和给出回调函数。

var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
    ...
})                  
                

你也可以自行触发Owl Carousel事件：

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})                  
                

Callbacks

$('.owl-carousel').owlCarousel({
    onDragged: callback
});
function callback(event) {
    ...
}                  
                

Data

每一个事件都通过event object提供非常有用的信息。

function callback(event) {
    // Provided by the core
    var element   = event.target;         // DOM element, in this example .owl-carousel
    var name      = event.type;           // Name of the event, in this example dragged
    var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index;     // Position of the current item
    // Provided by the navigation plugin
    var pages     = event.page.count;     // Number of pages
    var page      = event.page.index;     // Position of the current page
    var size      = event.page.size;      // Number of items per page
}                  
                

Carousel

Lazy

Video

Autoplay