OwlCarousel2使用

1、官网

http://owlcarousel2.github.io/OwlCarousel2/index.html

2、常用参数

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

猜你喜欢

转载自www.cnblogs.com/congfeicong/p/11804271.html