文档章节

OwlCarousel.js 帮助API

heartless01
 heartless01
发布于 2017/09/01 11:08
字数 1069
阅读 129
收藏 0

兼容

浏览器兼容:兼容所有浏览器,包括 IE6、IE7。

jQuery 兼容:兼容 1.7 及以上版本。

使用方法

1、引入文件(依赖jq)

<link href="css/owl.carousel.css" rel="stylesheet">

<script src="js/owl.carousel.js"></script>

2、HTML

<div id="owl-demo" class="owl-carousel">
    <a class="item"><img src="img/1.jpg" alt=""></a>
    <a class="item"><img src="img/2.jpg" alt=""></a>
    <a class="item"><img src="img/3.jpg" alt=""></a>
    <a class="item"><img src="img/4.jpg" alt=""></a>
    <a class="item"><img src="img/5.jpg" alt=""></a>
</div>

3、CSS

#owl-demo .item {
    display: block;
}
#owl-demo img {
    display: block;
    width: 100%;
}

4、JavaScript

$(function(){
    $('#owl-demo').owlCarousel();
});

 

配置

1、选项(常用 橘色标注,用于响应蓝色标注)

参数 类型 默认值 说明
items 整数 5 幻灯片每页可见个数
itemsDesktop 数组 [1199,4] 设置浏览器宽度和幻灯片可见个数,格式为[X,Y],X 为浏览器宽度,Y 为可见个数,如[1199,4]就是如果浏览器宽度小于1199,每页显示 4 张,此参数主要用于响应式设计。也可以使用 false
itemsDesktopSmall 数组 [979,3] 同上
itemsTablet 数组 [768,2] 同上
itemsTabletSmall 数组 false 同上,默认为 false
itemsMobile 数组 [479,1] 同上
itemsCustom 数组 false  
singleItem 布尔值 false 是否只显示一张
itemsScaleUp 布尔值 false  
slideSpeed 整数 200 幻灯片切换速度,以毫秒为单位
paginationSpeed 整数 800 分页切换速度,以毫秒为单位
rewindSpeed 整数 1000 重回速度,以毫秒为单位
autoPlay 布尔值/整数 false 自动播放,可选布尔值或整数,若使用整数,如 3000,表示 3 秒切换一次;若设置为 true,默认 5 秒切换一次
stopOnHover 布尔值 false 鼠标悬停停止自动播放
navigation 布尔值 false 显示“上一个”、“下一个”
navigationText 数组 [“prev”,”next”] 设置“上一个”、“下一个”文字,默认是[“prev”,”next”]
rewindNav 布尔值 true 滑动到第一个
scrollPerPage 布尔值 false 每页滚动而不是每个项目滚动(按组滚动)
pagination 布尔值 true 显示分页(默认圆圈)
paginationNumbers 布尔值 false 分页按钮显示数字
responsive 布尔值 true  
responsiveRefreshRate 整数 200 每 200 毫秒检测窗口宽度并做相应的调整,主要用于响应式
responsiveBaseWidth jQuery 选择器 window  
baseClass 字符串 owl-carousel 添加 CSS,如果不需要,最好不要使用
theme 字符串 owl-theme 主题样式,可以自行添加以符合你的要求
lazyLoad 布尔值 false 延迟加载
lazyFollow 布尔值 true 当使用分页时,如果跨页浏览,将不加载跳过页面的图片,只加载所要显示页面的图片,如果设置为 false,则会加载跳过页面的图片。这是 lazyLoad 的子选项
lazyEffect 布尔值/字符串 fade 延迟加载图片的显示效果,默认以 400 毫秒淡入,若为 false 则不使用效果
autoHeight 布尔值 false 自动使用高度
jsonPath 字符串 false JSON 文件路径
jsonSuccess 函数 false 处理自定义 JSON 格式的函数
dragBeforeAnimFinish 布尔值 true 忽略过度是否完成(只限拖动)
mouseDrag 布尔值 true 关闭/开启鼠标事件
touchDrag 布尔值 true 关闭/开启触摸事件
addClassActive 布尔值 false 给可见的项目加入 “active” 类
transitionStyle 字符串 false 添加 CSS3 过度效果

回调函数

变量 类型 默认值 说明
beforeUpdate 函数 false 响应之后的回调函数
afterUpdate 函数 false 响应之前的回调函数
beforeInit 函数 false 初始化之前的回调函数
afterInit 函数 false 初始化之后的回调函数
beforeMove 函数 false 移动之前的回调函数
afterMove 函数 false 移动之后的回调函数
afterAction 函数 false 初始化之后的回调函数
startDragging 函数 false 拖动的回调函数
afterLazyLoad 函数 false 延迟加载之后的回调函数

自定义事件

事件 说明
owl.prev 到上一个
owl.next 到下一个
owl.play 自动播放,可传递一个参数作为播放速度
owl.stop 停止自动播放
owl.goTo 跳到第几个
owl.jumpTo 不使用动画跳到第几个

 


tip:报错

部分人滑动的时候会有报错如图

这个报错是因为缺少”grabbing.png“图片,这个图片的作用是拖动时鼠标的样式

解决:在”owl.carousel.css"内找到“.grabbing”,并注释掉,如图

 

 

© 著作权归作者所有

共有 人打赏支持
heartless01
粉丝 0
博文 56
码字总数 14843
作品 0
浦东
前端工程师
General APIs mapping (通用 API mapping)

1、Android到Windows的API mappings 对于Android开发者,同样可以在API mapping 索引中找到映射,与使用iOS映射的方式一样。 我们提供了一个 API 映射索引来帮助你找到与 Windows 运行时 AP...

失足处男的倒霉孩子
2013/12/25
136
0
微软推出新工具 将iPhone应用程序转至WP7

新浪科技讯 北京时间4月30日消息,微软今天通过Windows Phone开发者官方博客宣布,公司已经发布了一套新的工具,该工具将能够帮助开发者将iPhone应用程序转换至Windows Phone 7平台上来。 开...

老枪
2011/04/30
993
12
JEPLUS平台JS事件的DB操作——JEPLUS软件快速开发平台

JEPLUS平台JS事件的DB操作 JEPLUS平台JS事件中有一个关于DB的API,这个API是平台自己封装的,这是比较常见常用的一个API,今天这篇笔记就说一下关于DB这个API得一些用法和操作技巧。 一、打开...

JEPLUS
06/27
0
0
Start Developing iOS Apps Today系列(十三)

Start Developing iOS Apps Today系列之后续 十三、查找信息 开发应用程序时,您会希望先前了解或不了解的信息都随手可查。其实无需离开 Xcode,您便能获得所需的一切信息。 Xcode附带了大量...

Lambda8421
2015/01/29
0
0
GroovyHelp 3.2.5 GA 发布

GroovyHelp简介 GroovyHelp是一款Javadoc及Groovydoc搜索查阅软件,它能够帮助Java开发人员以及Groovy开发人员方便快速地查找API文档并对其进行高效管理,从此无需苦苦寻觅chm格式的帮助文档...

鉴客
2012/04/09
501
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部