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

分类：代码

日期：2017-04-11

点击(199,155)

下载(1)

来源：未知

收藏

简介

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

兼容所有浏览器

支持响应式

支持 CSS3 过度

支持触摸事件

支持 JSON 及自定义 JSON 格式

支持进度条

支持自定义事件

支持延迟加载

支持自适应高度

……

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

兼容

浏览器兼容：兼容所有浏览器，包括 IE6、IE7。

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

使用方法

1、引入文件

2、HTML

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

不使用动画跳到第几个