简介
Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点：
兼容所有浏览器
支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JSON 格式支持进度条支持自定义事件支持延迟加载支持自适应高度……Owl Carousel 提供了众多的参数、回调函数及自定义事件（具体请往下浏览），所以它几乎可以满足你的所有要求。
兼容
浏览器兼容：兼容所有浏览器，包括 IE6、IE7。
jQuery 兼容：兼容 1.7 及以上版本。
使用方法
1、引入文件
1 <link href="css/owl.carousel.css" rel="stylesheet"> 2 <link href="css/owl.theme.css" rel="stylesheet"> 3 <script src="js/jquery.min.js"></script> 4 <script src="js/owl.carousel.js"></script>
2、HTML
1 <div id="owl-demo" class="owl-carousel"> 2 <div>1</div> 3 <div>2</div> 4 <div>3</div> 5 <div>4</div> 6 <div>5</div> 7 <div>6</div> 8 <div>7</div> 9 <div>8</div> 10 </div>
3、JavaScript
1 $(function(){ 2 $('#owl-example').owlCarousel(); 3 });
参数
参数 类型 默认值 说明items 整数5幻灯片每页可见个数itemsDesktop 数组[1199,4]设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 falseitemsDesktopSmall 数组[979,3]同上itemsTablet 数组[768,2]同上itemsTabletSmall 数组false同上，默认为 falseitemsMobile 数组[479,1]同上itemsCustom 数组falsesingleItem 布尔值false是否只显示一张itemsScaleUp 布尔值falseslideSpeed 整数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 布尔值trueresponsiveRefreshRate 整数200每 200 毫秒检测窗口宽度并做相应的调整，主要用于响应式responsiveBaseWidthjQuery 选择器windowbaseClass 字符串owl-carousel添加 CSS，如果不需要，最好不要使用theme 字符串owl-theme主题样式，可以自行添加以符合你的要求lazyLoad 布尔值false延迟加载lazyFollow 布尔值true当使用分页时，如果跨页浏览，将不加载跳过页面的图片，只加载所要显示页面的图片，如果设置为 false，则会加载跳过页面的图片。这是 lazyLoad 的子选项lazyEffect 布尔值/字符串fade延迟加载图片的显示效果，默认以 400 毫秒淡入，若为 false 则不使用效果autoHeight 布尔值false自动使用高度jsonPath 字符串falseJSON 文件路径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 不使用动画跳到第几个