简介

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

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

Owl Carousel 提供了众多的参数、回调函数及自定义事件(具体请往下浏览),所以它几乎可以满足你的所有要求。

兼容

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

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

使用方法

1、引入文件

<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" 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();
});

参数

参数 类型 默认值 说明
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 不使用动画跳到第几个

扩展网址:http://www.dowebok.com/demo/2014/93/index9.html

http://www.dowebok.com/93.html

owl.carousel的更多相关文章

  1. Owl Carousel – 支持触摸的 jQuery 响应式传送带插件

    Owl Carousel 是一个 jQuery 插件,使我们能够迅速地创建响应式传送带滑块.这个插件是触摸友好的,能与几乎任何的 HTML 内容兼容使用.另外,强大的选项设置支持分页/滑动速度,启用/ ...

  2. Owl Carousel幻灯片插件的使用

    Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 ...

  3. jquery幻灯片插件之owl.carousel.js

    官网地址:http://owlcarousel2.github.io/OwlCarousel2/ 这个插件兼容各种浏览器,以及移动端 使用方法: 1.下载文件,解压以后,把dist里面的文件放到项目中 ...

  4. 强大实用的jQuery幻灯片插件Owl Carousel

    演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...

  5. jQuery幻灯片插件Owl Carousel

    简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...

  6. Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器

    Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器 在项目中,需要做一个幻灯功能,领导说需要一个小清醒的啊,轻量级的.刚开始搜索到这个: CRAFTYSLIDE插件.但是用起 ...

  7. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  8. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

  9. 分享20款移动开发中很有用的 jQuery 插件

    今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

随机推荐

  1. [Sdoi2016]平凡的骰子

    描述 这是一枚平凡的骰子.它是一个均质凸多面体,表面有n个端点,有f个面,每一面是一个凸多边形,且任意两面不共面.将这枚骰子抛向空中,骰子落地的时候不会发生二次弹跳(这是一种非常理想的情况).你希望知 ...

  2. 禁用ngen版本的.NET Framework dll加载

    在调试时会发现出于性能考虑.NET Framework dll加载的都是ngen版本,比如:System.dll,实际加载System.ni.dll. 如果希望加载非ngen版本,可以设置系统环境变量 ...

  3. ubuntu 14.04 升级到 16.04 问题总结

    1. 需要的依赖关系未安装 The required dependency 'apt (>= 1.0.1ubuntu2.13)' is not installed. http://forum.u ...

  4. Android Meterial Design Support Library

    extends:http://inthecheesefactory.com/blog/android-design-support-library-codelab At the moment I be ...

  5. RabbitMQ安装详解(centos6.8)(转自:http://www.cnblogs.com/zhen-rh/p/6862350.html)

    1.下载rabbitmq安装包 2.安装erlang a.安装Erlang Solutions仓库到你的系统(目的在于让你可以使用yum安装到最新版本的erlang, 如果不设置, yum安装的erl ...

  6. vue--自定义指令进行验证(1)

    实例代码: <template> <div id="app" class="app"> <h3>{{msg}}</h3 ...

  7. 8.26 js

    2018-8-26 20:35:53 这两天周末,一直在看苏东坡传! 明天正常学python 用心学!

  8. baidu.com直接访问网站,不跳转www.baidu.com

    平常最多的需求是将baidu.com指向全域名www.badu.com,但是往往需求是各种各样,这两天就遇到一个反向需求.将baidu.com直接访问网站,而不做跳转. 最近两天在给域名证书续费,但是 ...

  9. 170810、spring+springmvc+Interceptor+jwt+redis实现sso单点登录

    在分布式环境中,如何支持PC.APP(ios.android)等多端的会话共享,这也是所有公司都需要的解决方案,用传统的session方式来解决,我想已经out了,我们是否可以找一个通用的方案,比如用 ...

  10. CONVERT(varchar(10), getdate(), 120 )中数字参数用法

    这是一个mssql数据库的函数,Convert函数的作用,是进行数据类型的转换.而您所问的这个convert(char(20),openDate,120)则是对日期字段,进行格式化转换成字符格式的函数 ...