jQuery幻灯片插件owlcarousel参数说明中文文档


Posted in jQuery onFebruary 27, 2018

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点:

  • 兼容所有浏览器
  • 支持响应式
  • 支持 CSS3 过度
  • 支持触摸事件
  • 支持 JSON 及自定义 JSON 格式
  • 支持进度条
  • 支持自定义事件
  • 支持延迟加载
  • 支持自适应高度

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

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

Owl Carousel 使用方法

新建一个HTML文件

1、在HTML文件中引入Owl Carousel必须文件

<link href="css/owl.carousel.css" rel="external nofollow" rel="stylesheet">
<link href="css/owl.theme.css" rel="external nofollow" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>

2、HTML代码

<div id="owl-demo" class="owl-carousel">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
</div>

3、JavaScript

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

下面是Owl Carousel的中文参数与api说明:

参数 类型 默认值 说明
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 则不使用效果
loop 布尔值 false 无限循环
autoHeight 布尔值 false 自动使用高度
jsonPath 字符串 false JSON 文件路径
jsonSuccess 函数 false 处理自定义 JSON 格式的函数
dragBeforeAnimFinish 布尔值 true 忽略过度是否完成(只限拖动)
mouseDrag 布尔值 true 关闭/开启鼠标事件
margin 整数 0 幻灯片间距
touchDrag 布尔值 true 关闭/开启触摸事件
addClassActive 布尔值 false 给可见的项目加入 “active” 类
transitionStyle 字符串 false 添加 CSS3 过度效果

owlcarousel回调函数

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

owlcarousel自定义事件

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

以上既是jQuery幻灯片插件owlcarousel的中文参数说明与API,如果想修改owlcarousel的样式可以查找owl.carousel.css文件中的对应CSS代码

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 #jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 #jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 #jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
You might like
discuz7 phpMysql操作类
2009/06/21 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
python sleep和wait对比总结
2021/02/03 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
法律专业自我鉴定
2013/10/03 职场文书
班组长岗位职责范本
2014/01/05 职场文书
篝火晚会策划方案
2014/05/16 职场文书
电子专业求职信
2014/06/19 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
钱学森电影观后感
2015/06/04 职场文书
结婚典礼主持词
2015/06/29 职场文书
七年级数学教学反思
2016/02/17 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
python如何读取.mtx文件
2021/04/22 Python