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

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

兼容所有浏览器

支持响应式

支持 CSS3 过度

支持触摸事件

支持 JSON 及自定义 JSON 格式

支持进度条

支持自定义事件

支持延迟加载

支持自适应高度

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

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

Owl Carousel 使用方法：

新建一个HTML文件

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

<link href="https://www.jb51.net/css/owl.carousel.css"> <link href="https://www.jb51.net/css/owl.theme.css"> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/owl.carousel.js"></script>

2、HTML代码

<div> <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回调函数