OwlCarousel2支持触摸屏的响应式jQuery旋转木马插件

所属分类：媒体-幻灯片和轮播图

63655 412 查看评论 (10)

分享到微信朋友圈

查看演示立即下载

插件描述：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文件：

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

参数名称	参数类型	默认值	描述
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元素的对象引用。