文档章节

OwlCarousel.js 帮助API

heartless01
 heartless01
发布于 2017/09/01 11:08
字数 1069
阅读 136
收藏 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
178
0
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
分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

日期:2012/02/06 来源:GBin1.com 在线演示 在线下载 今天介绍一款帮助网站提高用户体验的jQuery插件 - jQuery fullscreen,它能够帮助网站实现针对阅读内容的全屏显示功能。 这个插件基于F...

gbin1
2012/02/07
0
0
CA Technologies发布最新API管理方案协助创建并部署微服务

  【IT168 资讯】2017年7月7日,CA Technologies发布API管理组合中全新的解决方案及增强的功能,帮助开发者、企业架构师和数字化领导者创建并部署微服务,同时管理那些连接、协调微服务的A...

it168网站
2017/07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
4
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
6
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
9
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
昨天
7
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
昨天
22
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部