OwlCarousel使用以及参数

使用方法
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文件：

1

2

<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参数选项：

参数名称 参数类型 默认值 描述