2019独角兽企业重金招聘Python工程师标准>>>

兼容

浏览器兼容：兼容所有浏览器，包括 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”,并注释掉，如图

转载于:https://my.oschina.net/u/1428820/blog/1527397

OwlCarousel.js 帮助API相关推荐

  1. 十个书写Node.js REST API的最佳实践（上）

    收录待用,修改转载已取得腾讯云授权 原文:10 Best Practices for Writing Node.js REST APIs 我们会通过本文介绍下书写Node.js REST API的最佳 ...

  2. 解答网友提问 | 使用VS2022快速生成React/Angular/Vue.js + Web API前后端集成项目

    前言 上次发表了<一键生成Vue.js + Web API前后端集成项目>后,有多位网友来问,有不有其他的前后端集成模板: 实际上,VS2022没有提供前后端集成项目模板. 但是,使用VS ...

  3. 一键生成Vue.js + Web API前后端集成项目

    前言 默认情况下,Visual Studio提供了"基于Vue.js Web 应用程序"项目模板,可以生成Vue.js前端项目. 你需要另外创建Web API项目,调试时需要同时启 ...

  4. api怎么写_使用Node.js原生API写一个web服务器

    Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...

  5. [js] 一个api接口从请求数据到请求结束共与服务器进行了几次交互？

    [js] 一个api接口从请求数据到请求结束共与服务器进行了几次交互? API是一些预先定义的函数,或指软件系统不同组成部分衔接的约定.如果已经建立了连接,那么单次请求数据到请求结束应该是一次交互:如 ...

  6. 用于 Keras 用户使用的 TensorFlow.js layers API

    用于 Keras 用户使用的 TensorFlow.js layers API TensorFlow.js 的Layers API以Keras为模型.考虑到 JavaScript 和 Python 之 ...

  7. Java实现HMacMD5加密，用于淘宝客JS 组件 API 调用时生成 sign 的签名

    原文:Java实现HMacMD5加密,用于淘宝客JS 组件 API 调用时生成 sign 的签名 源代码下载地址:http://www.zuidaima.com/share/1550463397874 ...

  8. Vanilla Node.js REST API示例

    A Vanilla Node.js REST API without Frameworks such us Express | Engineering Education (EngEd) Progra ...

  9. 【node.js后台api项目】（二）实现注册功能

    [node.js后台api项目](二)实现注册功能 一.实现思路 二.项目目录 三.代码编写 1.基本代码 2.数据合法性校验 3.注册路由处理函数 4.密码加密 一.实现思路 注册功能简单来说就是提 ...

最新文章

  1. 如何救队友_第五人格中高端局如何救队友，这些技巧很实用，不卡血量是关键...
  2. Oracle 10g RAC RMAN备份异机单实例恢复
  3. Spring.NET学习笔记9——打造简易的依赖注入框架(练习篇) Level 100
  4. iOS - UITableViewCell Custom Selection Style Color
  5. 野火 stm32f429 pcb_PCB板价格是如何核算的
  6. layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法
  7. 作业二：个人博客作业内容：需求分析
  8. 利用Android Studio快速搭建App
  9. python回车换行怎么不行_使用Python编写换行符时避免写入回车'\r'
  10. 单例模式与线程安全问题浅析
  11. Java基础篇：什么是递归？如何用递归？
  12. 监督学习的分类：判别/生成模型，概率/非概率模型、参数/非参数模型
  13. 获取全年所有非工作日和工作日的脚本（Python篇）
  14. 计算几何——点到直线的距离、投影点
  15. 编码器/译码器（Verilog HDL）|计算机组成
  16. java 批量下载小说天堂的小说
  17. Android NDK不得不说的秘密
  18. 2020年HS芯片说明海思论坛
  19. php 签名 验签 pkcs8,PHP和Java的RSA签名和验签
  20. C语言---14文件操作---01文件内容的顺序读写

热门文章

  1. css样式有行内式还有什么,在行内式CSS样式中,属性和值的书写规范与CSS样式规则不相同...
  2. 常见的通配符_8、数据库常见操作
  3. ssd目标检测训练自己的数据_目标检测Tensorflow object detection API之训练自己的数据集...
  4. linux 多核线程 调度,通过轻型线程提高多核设备中的Linux实时性能
  5. 智伴机器人广西团队_畅想科技 智绘未来——2020年全区乡村学校少年宫科技体验日活动在广西科技馆举办...
  6. 报错，null [org.springframework.web.method.annotation.MethodArgumentTypeMismatchException,Failed to con
  7. 代码中log一直报错
  8. Java项目课程05：系统设计
  9. 【BZOJ1923】外星千足虫，高斯消元解xor方程组
  10. 16.对极几何——介绍，立体视觉约束，条件_1