OwlCarousel使用

参考:http://www.jq22.com/jquery-info6010

使用方法

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

参数名称参数类型默认值描述
itemsNumber3在屏幕中可见的旋转木马项
marginNumber0旋转木马项的margin-right值,单位像素
loopBooleanfalse是否无限循环,会复制第一项和最后一项来制作无限循环的错觉
centerBooleanfalse旋转木马项居中。在奇数和偶数项中都可以很好的工作
mouseDragBooleantrue是否可以使用鼠标拖拽
touchDragBooleantrue是否可以触摸拖拽
pullDragBooleantrueStage pull to edge.
freeDragBooleanfalseItem pull to edge
stagePaddingNumber0Stage上的Padding left和Padding right(可以看到相邻的项)
mergeBooleanfalse合并旋转木马项。Looking for data-merge='{number}' inside item.
mergeFitBooleantrue如果屏幕比旋转木马项小,使旋转木马项适合屏幕大小
autoWidthBooleanfalse设置非网格内容。尝试在div上使用width样式
startPositionNumber/String0开始点或URL Hash字符串,如:'#id'
URLhashListenerBooleanfalse监听url hash 的变化。必须在旋转木马项上设置data-hash属性
navBooleanfalse显示ext/prev按钮
navRewindBooleantrue跳转到前一项或后一项
navTextArray['next','prev']HTML箭头导航
slideByNumber/String1Navigation slide by x. 'page' string can be set to slide by page.
dotsBooleantrue显示圆点导航按钮
dotsEachNumber/BooleanfalseDefault: false 每多少个项显示一个圆点导航按钮
dotDataBooleanfalse使用data-dot的内容
lazyLoadBooleanfalse是否懒加载图片。data-src和data-src-retina为高分辨率。如果元素不是<img>会设置为元素的内联背景图像。
lazyContentBooleanfalselazyContent选项只在测试版中有,发行版中已经被删除。
autoplayBooleanfalse旋转木马是否自动播放
autoplayTimeoutNumber5000旋转木马自动播放的时间间隔
autoplayHoverPauseBooleanfalse是否在鼠标滑过时停止自动播放
smartSpeedNumber250速度计算
fluidSpeedBooleanNumber速度计算
autoplaySpeedNumber/Booleanfalse是新密码自动播放的速度
navSpeedNumber/Booleanfalse旋转木马导航的速度
dotsSpeedBooleanNumber/Boolean分页的速度
dragEndSpeedNumber/BooleanfalseDrag end speed
callbacksBooleantrue是否允许回调函数
responsiveObjectempty object包含responsive选项的对象。设置为flase取消responsive能力。
responsiveRefreshRateNumber200Responsive的刷新频率
responsiveBaseElementDOM elementwindow可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器(如IE8),可以在包裹容器中使用该属性。
responsiveClassBooleanfalse可选的辅助class。添加owl-reponsive-和breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。
videoBooleanfalse是否允许添加YouTube/Vimeo视频。
videoHeightNumber/Booleanfalse设置视频的高度。
videoWidthNumber/Booleanfalse设置视频的宽度。
animateOutString/BoleanfalseCSS3 animation out.
animateInString/BoleanfalseCSS3 animation in.
fallbackEasingStringswingEasing for CSS2 $.animate.
infoFunctionfalse获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。
  • 6
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值