浙江 杭州

Owl Carousel 2支持移动触摸屏响应式旋转木马的jQuery插件

系统分类: 网页特效 - jquery插件 - jQuery高级页面组件 2016-04-18

人气29608

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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已经在下列浏览器中进行了测试:

  • Chrome

  • Firefox

  • Opera

  • IE7/8/10/11

  • iPad Safari

  • iPod4 Safari

  • Nexus 7 Chrome

  • Galaxy S4

  • Nokia 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依赖于jQueryZepto。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参数选项:

参数名称参数类型默认值描述
itemsType: NumberDefault: 3在屏幕中可见的旋转木马项
marginType: NumberDefault: 0旋转木马项的margin-right值,单位像素
loopType: BooleanDefault: false是否无限循环,会复制第一项和最后一项来制作无限循环的错觉
centerType: BooleanDefault: false旋转木马项居中。在奇数和偶数项中都可以很好的工作
mouseDragType: BooleanDefault: true是否可以使用鼠标拖拽
touchDragType: BooleanDefault: true是否可以触摸拖拽
pullDragType: BooleanDefault: trueStage pull to edge.
freeDragType: BooleanDefault: falseItem pull to edge
stagePaddingType: NumberDefault: 0Stage上的Padding left和Padding right(可以看到相邻的项)
mergeType: BooleanDefault: false合并旋转木马项。Looking for data-merge='{number}' inside item..
mergeFitType: BooleanDefault: true如果屏幕比旋转木马项小,使旋转木马项适合屏幕大小
autoWidthType: BooleanDefault: false设置非网格内容。尝试在div上使用width样式
startPositionType: Number/StringDefault: 0开始点或URL Hash字符串,如:'#id'
URLhashListenerType: BooleanDefault: false监听url hash 的变化。必须在旋转木马项上设置data-hash属性
navType: BooleanDefault: false显示ext/prev按钮
navRewindType: BooleanDefault: true跳转到前一项或后一项
navTextType: ArrayDefault: [&#x27;next&#x27;,&#x27;prev&#x27;]HTML箭头导航
slideByType: Number/StringDefault: 1Navigation slide by x. 'page' string can be set to slide by page.
dotsType: BooleanDefault: true显示圆点导航按钮
dotsEachType: Number/BooleanDefault: false每多少个项显示一个圆点导航按钮
dotDataType: BooleanDefault: false使用data-dot的内容
lazyLoadType: BooleanDefault: false是否懒加载图片。data-srcdata-src-retina为高分辨率。如果元素不是<img>会设置为元素的内联背景图像。
lazyContentType: BooleanDefault: falselazyContent选项只在测试版中有,发行版中已经被删除。
autoplayType: BooleanDefault: false旋转木马是否自动播放
autoplayTimeoutType: NumberDefault: 5000旋转木马自动播放的时间间隔
autoplayHoverPauseType: BooleanDefault: false是否在鼠标滑过时停止自动播放
smartSpeedType: NumberDefault: 250速度计算
fluidSpeedType: BooleanDefault: Number速度计算
autoplaySpeedType: Number/BooleanDefault: false是新密码自动播放的速度
navSpeedType: Number/BooleanDefault: false旋转木马导航的速度
dotsSpeedType: BooleanDefault: Number/Boolean分页的速度
dragEndSpeedType: Number/BooleanDefault: falseDrag end speed
callbacksType: BooleanDefault: true是否允许回调函数
responsiveType: ObjectDefault: empty object包含responsive选项的对象。设置为flase取消responsive能力。
responsiveRefreshRateType: NumberDefault: 200Responsive的刷新频率
responsiveBaseElementType: DOM elementDefault: window可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器(如IE8),可以在包裹容器中使用该属性。
responsiveClassType: BooleanDefault: false可选的辅助class。添加owl-reponsive-breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。
videoType: BooleanDefault: false是否允许添加YouTube/Vimeo视频。
videoHeightType: Number/BooleanDefault: false设置视频的高度。
videoWidthType: Number/BooleanDefault: false设置视频的宽度。
animateOutType: String/BoleanDefault: falseCSS3 animation out.
animateInType: String/BoleanDefault: falseCSS3 animation in.
fallbackEasingType: StringDefault: swingEasing for CSS2 $.animate.
infoType: FunctionDefault: false获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。
nestedItemSelectorType: String/ClassDefault: false当owl元素嵌套在某些很深的DOM结构中时使用该参数。在class名字前面不要使用.号。
itemElementType: StringDefault: divowl-item的DOM元素类型。
stageElementType: StringDefault: divowl-stage.的DOM元素类型。
navContainerType: String/Class/ID/BoleanDefault: false设置自定义的导航容器class
dotsContainerType: String/Class/ID/BoleanDefault: false设置自定义的导航容器class

Classes

下面的例子说明了Owl Carousel在HTML中是如何被渲染的。通过后面表格中列出的参数,你可以改变的class样式:

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
        </div>
    </div>
    <div class="owl-controls">
        <div class="owl-nav">
            <div class="owl-prev">prev</div>
            <div class="owl-next">next</div>
        </div>
        <div class="owl-dots">
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>
    </div>
</div>
参数名称参数类型默认值描述
themeClassType: Class/StringDefault: owl-themeTheme Class.
baseClassType: Class/StringDefault: owl-carouselBase element Class
itemClassType: Class/StringDefault: owl-itemItem Class
centerClassType: Class/StringDefault: centerCenter Class.
activeClassType: Class/StringDefault: activeActive Class
navContainerClassType: Class/StringDefault: owl-navNav container Class.
navClassType: Array/Class/StringDefault: [&#x27;owl-prev&#x27;,&#x27;owl-next&#x27;]Nav buttons Classes
controlsClassType: Class/StringDefault: owl-controlsControls Class - wrapper for navs and dots
dotClassType: Class/StringDefault: owl-dotDot Class
dotsClassType: Class/StringDefault: owl-dotsDots Class - Container for dots..
autoHeightClassType: Class/StringDefault: owl-heightAuto height Class.

事件

所有的事件都有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
}
Carousel
名称类型回调函数触发时机
initialize.owl.carouselType: attachableCallback: onInitialize插件初始化时触发
initialized.owl.carouselType: attachableCallback: onInitialized插件初始化后触发
resize.owl.carouselType: attachableCallback: onResize旋转木马尺寸改变时触发
resized.owl.carouselType: attachableCallback: onResized旋转木马尺寸改变后触发
refresh.owl.carouselType: attachable, cancelable, triggerableCallback: onRefresh,Parameter: [event, speed]When the internal state of the plugin needs update.
refreshed.owl.carouselType: attachableCallback: onRefreshedWhen the internal state of the plugin has updated.
drag.owl.carouselType: attachableCallback: onDrag当拖动旋转木马项时触发
dragged.owl.carouselType: attachableCallback: onDragged当拖动旋转木马项结束后触发
translate.owl.carouselType: attachableCallback: onTranslateWhen the translation of the stage starts.
translated.owl.carouselType: attachableCallback: onTranslatedWhen the translation of the stage has finished.
change.owl.carouselType: attachableCallback: onChange,Parameter: propertyWhen a property is going to change its value
changed.owl.carouselType: attachableCallback: onChanged,Parameter: propertyWhen a property has changed its value.
next.owl.carouselType: triggerableParameter: [speed]Goes to next item.
prev.owl.carouselType: triggerableParameter: [speed]Goes to previous item.
to.owl.carouselType: triggerableParameter: [position, speed]Goes to postion
destroy.owl.carouselType: triggerable
Destroys carousel
replace.owl.carouselType: triggerableParameter: dataRemoves current content and add a new one passed in the parameter.
add.owl.carouselType: triggerableParameter: [data, position]Adds a new item on a given position.
remove.owl.carouselType: triggerableParameter: positionRemoves an item from a given position
Lazy
名称类型回调函数触发时机
load.owl.lazyType: attachableCallback: onLoadLazyWhen lazy image loads.
loaded.owl.lazyType: attachable
Callback: onLoadedLazy
Video
名称类型回调函数触发时机
stop.owl.videoType: attachableCallback: onStopVideoWhen video has unloaded.
play.owl.videoType: attachableCallback: onPlayVideoWhen video has loaded.
Autoplay
名称类型参数描述
play.owl.autoplayType: triggerableParameter: [timeout, speed]Runs autoplay
stop.owl.autoplayType: triggerable
Stops autoplay

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:458.79KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1990.html 非特殊说明,本文版权归原作者所有,转载请注明出处
Owl Carousel 2支持移动触摸屏响应式旋转木马的jQuery插件

我当前G币余额:0 已下载次数:2

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有3 评论)