插件描述：OwlCarousel2支持触摸屏的响应式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文件：
|
1
2
|
<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的初始化方法来使旋转木马工作：
|
1
2
3
|
$(document).ready(function(){ $(".owl-carousel").owlCarousel();}); |
参数选项
下表中是所有内置的Owl Carousel参数选项：
| 参数名称 | 参数类型 | 默认值 | 描述 |
| items | Number | 3 | 在屏幕中可见的旋转木马项 |
| margin | Number | 0 | 旋转木马项的margin-right值，单位像素 |
| loop | Boolean | false | 是否无限循环，会复制第一项和最后一项来制作无限循环的错觉 |
| center | Boolean | false | 旋转木马项居中。在奇数和偶数项中都可以很好的工作 |
| mouseDrag | Boolean | true | 是否可以使用鼠标拖拽 |
| touchDrag | Boolean | true | 是否可以触摸拖拽 |
| pullDrag | Boolean | true | Stage pull to edge. |
| freeDrag | Boolean | false | Item pull to edge |
| stagePadding | Number | 0 | Stage上的Padding left和Padding right(可以看到相邻的项) |
| merge | Boolean | false | 合并旋转木马项。Looking for data-merge='{number}’ inside item. |
| mergeFit | Boolean | true | 如果屏幕比旋转木马项小，使旋转木马项适合屏幕大小 |
| autoWidth | Boolean | false | 设置非网格内容。尝试在div上使用width样式 |
| startPosition | Number/String | 0 | 开始点或URL Hash字符串，如：’#id’ |
| URLhashListener | Boolean | false | 监听url hash 的变化。必须在旋转木马项上设置data-hash属性 |
| nav | Boolean | false | 显示ext/prev按钮 |
| navRewind | Boolean | true | 跳转到前一项或后一项 |
| navText | Array | [‘next’,’prev’] | HTML箭头导航 |
| slideBy | Number/String | 1 | Navigation slide by x. ‘page’ string can be set to slide by page. |
| dots | Boolean | true | 显示圆点导航按钮 |
| dotsEach | Number/Boolean | false | Default: false 每多少个项显示一个圆点导航按钮 |
| dotData | Boolean | false | 使用data-dot的内容 |
| lazyLoad | Boolean | false | 是否懒加载图片。data-src和data-src-retina为高分辨率。如果元素不是<img>会设置为元素的内联背景图像。 |
| lazyContent | Boolean | false | lazyContent选项只在测试版中有，发行版中已经被删除。 |
| autoplay | Boolean | false | 旋转木马是否自动播放 |
| autoplayTimeout | Number | 5000 | 旋转木马自动播放的时间间隔 |
| autoplayHoverPause | Boolean | false | 是否在鼠标滑过时停止自动播放 |
| smartSpeed | Number | 250 | 速度计算 |
| fluidSpeed | Boolean | Number | 速度计算 |
| autoplaySpeed | Number/Boolean | false | 是新密码自动播放的速度 |
| navSpeed | Number/Boolean | false | 旋转木马导航的速度 |
| dotsSpeed | Boolean | Number/Boolean | 分页的速度 |
| dragEndSpeed | Number/Boolean | false | Drag end speed |
| callbacks | Boolean | true | 是否允许回调函数 |
| responsive | Object | empty object | 包含responsive选项的对象。设置为flase取消responsive能力。 |
| responsiveRefreshRate | Number | 200 | Responsive的刷新频率 |
| responsiveBaseElement | DOM element | window | 可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器（如IE8），可以在包裹容器中使用该属性。 |
| responsiveClass | Boolean | false | 可选的辅助class。添加owl-reponsive-和breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。 |
| video | Boolean | false | 是否允许添加YouTube/Vimeo视频。 |
| videoHeight | Number/Boolean | false | 设置视频的高度。 |
| videoWidth | Number/Boolean | false | 设置视频的宽度。 |
| animateOut | String/Bolean | false | CSS3 animation out. |
| animateIn | String/Bolean | false | CSS3 animation in. |
| fallbackEasing | String | swing | Easing for CSS2 $.animate. |
| info | Function | false | 获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。 |
demo链接：
https://www.jq22.com/yanshi6010