文档章节

OwlCarousel.js 帮助API

heartless01
 heartless01
发布于 2017/09/01 11:08
字数 1069
阅读 108
收藏 0
点赞 0
评论 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
博文 37
码字总数 14843
作品 0
浦东
前端工程师
General APIs mapping (通用 API mapping)

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

失足处男的倒霉孩子 ⋅ 2013/12/25 ⋅ 0

微软推出新工具 将iPhone应用程序转至WP7

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

老枪 ⋅ 2011/04/30 ⋅ 12

Start Developing iOS Apps Today系列(十三)

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

Lambda8421 ⋅ 2015/01/29 ⋅ 0

GroovyHelp 3.2.5 GA 发布

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

鉴客 ⋅ 2012/04/09 ⋅ 0

JDK API从下载到使用

经常有人问我一些java常用类的使用方法,还有一些问某个常用类是干啥的。这些问题都是不会查询jdk api,对常用类的方法不熟悉等情况。于是,经过再三思考决定编写jdk api查询使用手册。   ...

凯哥学堂 ⋅ 2016/12/06 ⋅ 0

GroovyHelp 3.2.1 RC发布

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

红薯 ⋅ 2011/11/28 ⋅ 0

分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

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

gbin1 ⋅ 2012/02/07 ⋅ 0

微软提供移植iPhone应用到Windows Phone 7上的工具

windows phone 7 iphone5 微软发布了一个API映射工具、指导手册和一组分享经验的视频,帮助简化移植iPhone/iOS应用程序到Windows Phone 7(WP 7)上的工作。 微软Windows Phone互操作组创建了...

junwong ⋅ 2012/03/09 ⋅ 0

JeeWx-api 1.0.5 版本发布,微信SDK接口封装

JeeWx-api 1.0.5 版本发布,微信SDK接口封装 1、jeewx-api为何诞生 现在微信越来越火,基于微信的公众号和服务号越来越丰富,虽然微信帮助文档已经提供了相关的接口,但是接口比较多,通过代...

Jeecg ⋅ 2015/09/08 ⋅ 0

CA Technologies发布最新API管理方案协助创建并部署微服务

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

it168网站 ⋅ 2017/07/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CENTOS7防火墙命令记录

安装Firewall命令: yum install firewalld firewalld-config Firewall开启常见端口命令: firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-po......

cavion ⋅ 57分钟前 ⋅ 0

【C++】【STL】利用chromo来测量程序运行时间与日志时间打印精确到微秒

直接上代码吧,没啥好说的。头疼。 #include <iostream>#include <string>#include <ctime>#include <sstream>#include <iomanip>#include <thread>#include <chrono>using ......

muqiusangyang ⋅ 今天 ⋅ 0

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简...

故久呵呵 ⋅ 今天 ⋅ 0

破解公司回应苹果“USB限制模式”:已攻破

本周四,苹果发表声明称 iOS 中加入了一项名为“USB 限制模式”的功能,可以防止 iPhone 在连接其他设备的时候被破解,并且强调这一功能并不是针对 FBI 等执法部门,为的是保护用户数据安全。...

六库科技 ⋅ 今天 ⋅ 0

MyBtais整合Spring Boot整合,TypeHandler对枚举类(enum)处理

概要 问题描述 我想用枚举类来表示用户当前状态,枚举类由 code 和 msg 组成,但我只想把 code 保存到数据库,查询处理,能知道用户当前状态,这应该怎么做呢?在 Spring 整合MyBatis 的时候...

Wenyi_Feng ⋅ 今天 ⋅ 0

synchronized与Lock的区别

# <center>王梦龙的读书笔记第一篇</center> ## <center>-synchronized与Lock的区别</centre> ###一、从使用场景来说 + synchronized 是能够注释代码块、类、方法但是它的加锁是和解锁使用一......

我不想加班 ⋅ 今天 ⋅ 0

VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址...

大美琴 ⋅ 今天 ⋅ 0

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 今天 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 今天 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部