插件描述：OwlCarousel2支持触摸屏的响应式jQuery旋转木马
使用方法Owl Carousel 2是上一版Owl Carousel的升级版本。Owl Carousel 2可以让你创建漂亮的响应式旋转木马的jQuery插件，它支持移动触摸屏，功能十分强大。Owl的新特性有：可以无限循环项目可以居中显示灵活的速度控制多级别的padding设置项目间可以设置Margin使几乎所有的选项都具有响应能力多种宽度设置丰富的回调事件RTL（从右向左移动）YouTube/Vimeo视频支持锚链接导航合并项还有更多...浏览器兼容Owl Carousel 2.x.x 版本和以前的1.x.x版本不兼容。Owl Carousel 2.x.x版本的大部分文件和1.x.x版本的基本相同，但是核心文件已经被从新编写。Owl Carousel 2已经在下列浏览器中进行了测试：ChromeFirefoxOperaIE7/8/10/11iPad SafariiPod4 SafariNexus 7 ChromeGalaxy S4Nokia 8s Windows8&文件结构Owl Carousel 2发行版的目录结构如下：owlcarousel/├── assets/│ & ├── owl.carousel.css│ & ├── owl.carousel.min.css│ & ├── owl.theme.default.css│ & ├── owl.theme.default.min.css│ & ├── owl.theme.green.css│ & ├── owl.theme.green.min.css│ & └── owl.video.play.png│├── owl.carousel.js├── owl.carousel.min.js├── LICENSE-MIT└── README.md & & & & & & & & &插件依赖Owl Carousel 2依赖于jQuery或Zepto。jQuery最低版本要求是1.8.3版本。CSS文件在html头部中引入必要的css文件：&link&rel=&stylesheet&&href=&owlcarousel/owl.carousel.min.css&&
&link&rel=&stylesheet&&href=&owlcarousel/owl.theme.default.min.css&&owl.theme.default.css文件时可选的。JS文件在页面的尾部添加owl.carousel.min.js文件：&script&src=&jquery.min.js&&&/script&
&script&src=&owlcarousel/owl.carousel.min.js&&&/script&HTML结构Owl Carousel不需要设置复杂的html结构，你只需要将你的内容&div&（当然，owl可以工作在其它元素中，如a/img/span）包裹在一个class为owl-carousel的&div&中即可。Class owl-carousel是在owl.carousel.css文件中定义的，改变它需要修改整个owl.carousel.css文件。调用插件现在，你可以调用Owl Carousel的初始化方法来使旋转木马工作：$(document).ready(function(){
&&$(&.owl-carousel&).owlCarousel();
});参数选项下表中是所有内置的Owl Carousel参数选项：参数名称参数类型默认值描述itemsNumber3在屏幕中可见的旋转木马项marginNumber0旋转木马项的margin-right值，单位像素loopBooleanfalse是否无限循环，会复制第一项和最后一项来制作无限循环的错觉centerBooleanfalse旋转木马项居中。在奇数和偶数项中都可以很好的工作mouseDragBooleantrue是否可以使用鼠标拖拽touchDragBooleantrue是否可以触摸拖拽pullDragBooleantrueStage pull to edge.freeDragBooleanfalseItem pull to edgestagePaddingNumber0Stage上的Padding left和Padding right(可以看到相邻的项)mergeBooleanfalse合并旋转木马项。Looking for data-merge='{number}' inside item.mergeFitBooleantrue如果屏幕比旋转木马项小，使旋转木马项适合屏幕大小autoWidthBooleanfalse设置非网格内容。尝试在div上使用width样式startPositionNumber/String0开始点或URL Hash字符串，如：'#id'URLhashListenerBooleanfalse监听url hash 的变化。必须在旋转木马项上设置data-hash属性navBooleanfalse显示ext/prev按钮navRewindBooleantrue跳转到前一项或后一项navTextArray['next','prev']HTML箭头导航slideByNumber/String1Navigation slide by x. 'page' string can be set to slide by page.dotsBooleantrue显示圆点导航按钮dotsEachNumber/BooleanfalseDefault: false 每多少个项显示一个圆点导航按钮dotDataBooleanfalse使用data-dot的内容lazyLoadBooleanfalse是否懒加载图片。data-src和data-src-retina为高分辨率。如果元素不是&img&会设置为元素的内联背景图像。lazyContentBooleanfalselazyContent选项只在测试版中有，发行版中已经被删除。autoplayBooleanfalse旋转木马是否自动播放autoplayTimeoutNumber5000旋转木马自动播放的时间间隔autoplayHoverPauseBooleanfalse是否在鼠标滑过时停止自动播放smartSpeedNumber250速度计算fluidSpeedBooleanNumber速度计算autoplaySpeedNumber/Booleanfalse是新密码自动播放的速度navSpeedNumber/Booleanfalse旋转木马导航的速度dotsSpeedBooleanNumber/Boolean分页的速度dragEndSpeedNumber/BooleanfalseDrag end speedcallbacksBooleantrue是否允许回调函数responsiveObjectempty object包含responsive选项的对象。设置为flase取消responsive能力。responsiveRefreshRateNumber200Responsive的刷新频率responsiveBaseElementDOM elementwindow可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器（如IE8），可以在包裹容器中使用该属性。responsiveClassBooleanfalse可选的辅助class。添加owl-reponsive-和breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。videoBooleanfalse是否允许添加YouTube/Vimeo视频。videoHeightNumber/Booleanfalse设置视频的高度。videoWidthNumber/Booleanfalse设置视频的宽度。animateOutString/BoleanfalseCSS3 animation out.animateInString/BoleanfalseCSS3 animation in.fallbackEasingStringswingEasing for CSS2 $.animate.info??Functionfalse获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。
相关插件-幻灯片和轮播图
幻灯片和轮播图
幻灯片和轮播图
幻灯片和轮播图
幻灯片和轮播图
讨论这个项目（6）回答他人问题或分享插件使用方法奖励jQ币
Pg_Channel 0
Mousewheel 为什么只能往右边滚，怎么解决
用户操作之后自动切换会停止，怎样重新启动autoplay
可否支持用鼠标上下切换呢
CraZyDoubLe 0
山丘的彼方 0
这个不是有了么???
PROMULGATOR
风骚萝莉控
四川省成都市
关注作者 (13)
收藏此插件 (83)
我当前jQ币余额：正在获取..
已下载次数：1101
所需jQ币：015:37 提问
owlCarousel轮播插件中如何调取自定义的函数
owlCarousel轮播插件中如何调取自定义的函数，就是点击分页按钮的时候，如何可以调取自定义的函数
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐请稍等 ...
采纳答案成功！
向帮助你的同学说点啥吧！感谢那些助人为乐的人
关于最新2.2.0版本的OwlCarousel的问题！
老师。请问OC最新版的css文件是scss文件格式，导入这个文件后sublime text编辑器报错不能识别，请问该怎么解决呢？
已采纳回答
源码里面是scss，可以直接使用编译好的发布版/OwlCarousel2/OwlCarousel2/tree/develop/dist/assets
时长10小时0分钟
用一套代码开发出不受设备型号、尺寸限制的互联网金融网站
Web前端工程师
资深UI 前端 架构，互联网行业折腾10余年，前后端开发、敏捷过程、项目管理经验丰富，负责过多个产品和技术团队，一直奋斗在Full Stack的道路上，爱技术，爱创业，爱一切新事物，玩过乐队，喜欢折腾！
Copyright (C)
All Rights Reserved | 京ICP备 号-2相关文章推荐
官网：/owlcarousel/
Github地址：/OwlCarousel2/OwlCarousel2
调用方法：
引入jQuery和owl.carousel相关组件
href="css/owl.carousel.css" rel="stylesheet">
href="css...
最近在用H5+CSS+jQuery开发IOS项目，新手零基础琢磨这东西真心蛋疼，偶尔同事发来一段Eclipse里的XML代码，那种一目了然的整齐的感觉，让人怀念地热泪盈眶……
废话不多说，进入正题 ...
今天看到一个插件OWL Carousel幻灯片。一、首先是说明一下OWL Carousel幻灯的主要功能。1、Jquery插件，品牌好，哈哈。基于Jquery开发，比较稳定
2、文件小。Css+js不...
Owl Carousel 2是上一版Owl Carousel 1.x的升级版本。Owl Carousel 2是可以让你创建漂亮的响应式旋转木马的jQuery插件，它支持移动触摸屏，有丰富的参数设置，甚...
更多 >推荐特效 /Recommed
03-04Thinkphp定时执行任务
01-17PHP支持手势的手机端图片裁剪上传
01-12jQuery仿win10桌面QQ聊天ui
01-09boo...
css判断不同分辨率显示不同宽度布局实现自适应宽度即 css3 @media样式的使用转自：脚本之家 【css判断不同分辨率显示不同宽度布局实现自适应宽度】
http://www.jb51.ne...
强大实用的jQuery幻灯片插件Owl Carousel
分类：代码 日期： 点击(62,925) 评论(0)
//链接地址：http://www.dowebo...
Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器 - 凤凰涅磐360yi
博客园精华区
http://www...
Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点：
兼容所有浏览器支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JS...
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)2被浏览1815分享邀请回答rewindNav : true,
02 条评论分享收藏感谢收起var $slider = $('.slider');
$slider.owlCarousel({
loop: true,
loop就是循环的参数
0添加评论分享收藏感谢收起写回答}