OwlCarousel2-2.3.4 开发使用文档
引入必要的文件:
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css"> <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"> <script src="jquery.min.js"></script> <script src="owlcarousel/owl.carousel.min.js"></script>
owl.theme.default.css文件时可选的
快速使用:http://www.51zuso.com/admin/p/857.html
下表中是所有内置的Owl Carousel参数选项:
参数名称 | 参数类型 | 默认值 | 描述 |
items | Type: Number | Default: 3 | 在屏幕中可见的旋转木马项 |
margin | Type: Number | Default: 0 | 旋转木马项的margin-right值,单位像素 |
loop | Type: Boolean | Default: false | 是否无限循环,会复制第一项和最后一项来制作无限循环的错觉 |
center | Type: Boolean | Default: false | 旋转木马项居中。在奇数和偶数项中都可以很好的工作 |
mouseDrag | Type: Boolean | Default: true | 是否可以使用鼠标拖拽 |
touchDrag | Type: Boolean | Default: true | 是否可以触摸拖拽 |
pullDrag | Type: Boolean | Default: true | Stage pull to edge. |
freeDrag | Type: Boolean | Default: false | Item pull to edge |
stagePadding | Type: Number | Default: 0 | Stage上的Padding left和Padding right(可以看到相邻的项) |
merge | Type: Boolean | Default: false | 合并旋转木马项。Looking for data-merge='{number}' inside item.. |
mergeFit | Type: Boolean | Default: true | 如果屏幕比旋转木马项小,使旋转木马项适合屏幕大小 |
autoWidth | Type: Boolean | Default: false | 设置非网格内容。尝试在div上使用width 样式 |
startPosition | Type: Number/String | Default: 0 | 开始点或URL Hash字符串,如:'#id' |
URLhashListener | Type: Boolean | Default: false | 监听url hash 的变化。必须在旋转木马项上设置data-hash 属性 |
nav | Type: Boolean | Default: false | 显示ext/prev按钮 |
navRewind | Type: Boolean | Default: true | 跳转到前一项或后一项 |
navText | Type: Array | Default: ['next','prev'] | HTML箭头导航 |
slideBy | Type: Number/String | Default: 1 | Navigation slide by x. 'page' string can be set to slide by page. |
dots | Type: Boolean | Default: true | 显示圆点导航按钮 |
dotsEach | Type: Number/Boolean | Default: false | 每多少个项显示一个圆点导航按钮 |
dotData | Type: Boolean | Default: false | 使用data-dot 的内容 |
lazyLoad | Type: Boolean | Default: false | 是否懒加载图片。data-src 和data-src-retina 为高分辨率。如果元素不是<img> 会设置为元素的内联背景图像。 |
lazyContent | Type: Boolean | Default: false | lazyContent选项只在测试版中有,发行版中已经被删除。 |
autoplay | Type: Boolean | Default: false | 旋转木马是否自动播放 |
autoplayTimeout | Type: Number | Default: 5000 | 旋转木马自动播放的时间间隔 |
autoplayHoverPause | Type: Boolean | Default: false | 是否在鼠标滑过时停止自动播放 |
smartSpeed | Type: Number | Default: 250 | 速度计算 |
fluidSpeed | Type: Boolean | Default: Number | 速度计算 |
autoplaySpeed | Type: Number/Boolean | Default: false | 是新密码自动播放的速度 |
navSpeed | Type: Number/Boolean | Default: false | 旋转木马导航的速度 |
dotsSpeed | Type: Boolean | Default: Number/Boolean | 分页的速度 |
dragEndSpeed | Type: Number/Boolean | Default: false | Drag end speed |
callbacks | Type: Boolean | Default: true | 是否允许回调函数 |
responsive | Type: Object | Default: empty object | 包含responsive选项的对象。设置为flase取消responsive能力。 |
responsiveRefreshRate | Type: Number | Default: 200 | Responsive的刷新频率 |
responsiveBaseElement | Type: DOM element | Default: window | 可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器(如IE8),可以在包裹容器中使用该属性。 |
responsiveClass | Type: Boolean | Default: false | 可选的辅助class。添加owl-reponsive- 和breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。 |
video | Type: Boolean | Default: false | 是否允许添加YouTube/Vimeo视频。 |
videoHeight | Type: Number/Boolean | Default: false | 设置视频的高度。 |
videoWidth | Type: Number/Boolean | Default: false | 设置视频的宽度。 |
animateOut | Type: String/Bolean | Default: false | CSS3 animation out. |
animateIn | Type: String/Bolean | Default: false | CSS3 animation in. |
fallbackEasing | Type: String | Default: swing | Easing for CSS2 $.animate. |
info | Type: Function | Default: false | 获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。 |
nestedItemSelector | Type: String/Class | Default: false | 当owl元素嵌套在某些很深的DOM结构中时使用该参数。在class名字前面不要使用. 号。 |
itemElement | Type: String | Default: div | owl-item的DOM元素类型。 |
stageElement | Type: String | Default: div | owl-stage.的DOM元素类型。 |
navContainer | Type: String/Class/ID/Bolean | Default: false | 设置自定义的导航容器class |
dotsContainer | Type: String/Class/ID/Bolean | Default: false | 设置自定义的导航容器class |
margin:10, //轮播项目之间的边距
事件
所有的事件都有Owl Carousel的核心代码提供。这使得你可以监听任何元素的变化和给出回调函数。
var owl = $('.owl-carousel'); owl.owlCarousel(); // Listen to owl events: owl.on('changed.owl.carousel', function(event) { ... })
你也可以自行触发Owl Carousel事件:
var owl = $('.owl-carousel'); owl.owlCarousel(); // Go to the next item $('.customNextBtn').click(function() { owl.trigger('next.owl.carousel'); }) // Go to the previous item $('.customPrevBtn').click(function() { // With optional speed parameter // Parameters has to be in square bracket '[]' owl.trigger('prev.owl.carousel', [300]); })
Callbacks
$('.owl-carousel').owlCarousel({ onDragged: callback }); function callback(event) { ... }
Data
每一个事件都通过event object提供非常有用的信息。
function callback(event) { // Provided by the core var element = event.target; // DOM element, in this example .owl-carousel var name = event.type; // Name of the event, in this example dragged var namespace = event.namespace; // Namespace of the event, in this example owl.carousel var items = event.item.count; // Number of items var item = event.item.index; // Position of the current item // Provided by the navigation plugin var pages = event.page.count; // Number of pages var page = event.page.index; // Position of the current page var size = event.page.size; // Number of items per page }
查看列多祥情:
http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502161387.html