- 兼容所有浏览器
- 支持响应式
- 支持 CSS3 过度
- 支持触摸事件
- 支持 JSON 及自定义 JSON 格式
- 支持进度条
- 支持自定义事件
- 支持延迟加载
- 支持自适应高度
引入jQuery和owl.carousel相关组件
<link href="css/owl.carousel.css" rel="stylesheet"> <link href="css/owl.theme.css" rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/owl.carousel.js"></script>
HTML
<div id="owl-demo" class="owl-carousel"> <a class="item"><img src="img/owl1.jpg" alt=""></a> <a class="item"><img src="img/owl2.jpg" alt=""></a> <a class="item"><img src="img/owl3.jpg" alt=""></a> ...... </div>
jQuery
owl.carousel默认调用方法：
$(function(){ $('#owl-example').owlCarousel(); });
其他9种请看压缩包html代码，配对下面的API
参数描述默认值items幻灯片每页可见个数5itemsDesktop设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false[1199,4]itemsDesktopSmall同上[979,3]itemsTablet同上[768,2]itemsTabletSmall同上，默认为 falsefalseitemsMobile同上[479,1]itemsCustom
singleItem是否只显示一张falseitemsScaleUp
slideSpeed幻灯片切换速度，以毫秒为单位200paginationSpeed分页切换速度，以毫秒为单位800rewindSpeed重回速度，以毫秒为单位1000autoPlay自动播放，可选布尔值或整数，若使用整数，如 3000，表示 3 秒切换一次；若设置为 true，默认 5 秒切换一次falsestopOnHover鼠标悬停停止自动播放falsenavigation显示“上一个”、“下一个”falsenavigationText设置“上一个”、“下一个”文字，默认是[“prev”,”next”][“prev”,”next”]rewindNav滑动到第一个truescrollPerPage每页滚动而不是每个项目滚动falsepagination显示分页truepaginationNumbers分页按钮显示数字falseresponsive
responsiveRefreshRate每 200 毫秒检测窗口宽度并做相应的调整，主要用于响应式200responsiveBaseWidth
baseClass添加 CSS，如果不需要，最好不要使用owl-carouseltheme主题样式，可以自行添加以符合你的要求owl-themelazyLoad延迟加载falselazyFollow当使用分页时，如果跨页浏览，将不加载跳过页面的图片，只加载所要显示页面的图片，如果设置为 false，则会加载跳过页面的图片。这是 lazyLoad 的子选项truelazyEffect延迟加载图片的显示效果，默认以 400 毫秒淡入，若为 false 则不使用效果fadeautoHeight自动使用高度falsejsonPathJSON 文件路径falsejsonSuccess处理自定义 JSON 格式的函数falsedragBeforeAnimFinish忽略过度是否完成（只限拖动）truemouseDrag关闭/开启鼠标事件truetouchDrag关闭/开启触摸事件trueaddClassActive给可见的项目加入 “active” 类falsetransitionStyle添加 CSS3 过度效果falsebeforeUpdate响应之后的回调函数falseafterUpdate响应之前的回调函数falsebeforeInit初始化之前的回调函数falseafterInit初始化之后的回调函数falsebeforeMove移动之前的回调函数falseafterMove移动之后的回调函数falseafterAction初始化之后的回调函数falsestartDragging拖动的回调函数falseafterLazyLoad延迟加载之后的回调函数falseowl.prev到下一个owl.nextowl.play停止自动播放owl.stopowl.goTo不使用动画跳到第几个owl.jumpTo
