幻灯片/轮播

OwlCarousel2 触摸屏 jQuery旋转木马插件

也想出现在这里?联系我们
创客云

Owl Carousel 2 是上一版 Owl Carousel 1.x 的升级版本。Owl Carousel 2 是可以让你创建漂亮的响应式旋转木马的 jQuery 插件,它支持移动触摸屏,有丰富的参数设置,甚至可以嵌入视频,功能十分强大。

CSS 文件:

HTML 头部中引入必要的 css 文件:

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
  2. <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

owl.theme.default.css 文件时可选的。

JS 文件:

在页面的尾部添加 owl.carousel.min.js 文件:

  1. <script src="jquery.min.js"></script>
  2. <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 的初始化方法来使旋转木马工作:

  1. $(document).ready(function(){
  2.   $(".owl-carousel").owlCarousel();
  3. });

CSS 文件:

在 html 头部中引入必要的 css 文件:

  1. <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
  2. <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

owl.theme.default.css 文件时可选的。

JS 文件:

在页面的尾部添加 owl.carousel.min.js 文件:

  1. <script src="jquery.min.js"></script>
  2. <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 的初始化方法来使旋转木马工作:

  1. $(document).ready(function(){
  2.   $(".owl-carousel").owlCarousel();
  3. });

参数选项:

下表中是所有内置的 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-srcdata-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

Classes:

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

  1. <div class="owl-carousel owl-theme owl-loaded">
  2.     <div class="owl-stage-outer">
  3.         <div class="owl-stage">
  4.             <div class="owl-item">...</div>
  5.             <div class="owl-item">...</div>
  6.             <div class="owl-item">...</div>
  7.         </div>
  8.     </div>
  9.     <div class="owl-controls">
  10.         <div class="owl-nav">
  11.             <div class="owl-prev">prev</div>
  12.             <div class="owl-next">next</div>
  13.         </div>
  14.         <div class="owl-dots">
  15.             <div class="owl-dot active"><span></span></div>
  16.             <div class="owl-dot"><span></span></div>
  17.             <div class="owl-dot"><span></span></div>
  18.         </div>
  19.     </div>
  20. </div>
参数名称 参数类型 默认值 描述
themeClass Type: Class/String Default: owl-theme Theme Class.
baseClass Type: Class/String Default: owl-carousel Base element Class
itemClass Type: Class/String Default: owl-item Item Class
centerClass Type: Class/String Default: center Center Class.
activeClass Type: Class/String Default: active Active Class
navContainerClass Type: Class/String Default: owl-nav Nav container Class.
navClass Type: Array/Class/String Default: ['owl-prev','owl-next'] Nav buttons Classes
controlsClass Type: Class/String Default: owl-controls Controls Class - wrapper for navs and dots
dotClass Type: Class/String Default: owl-dot Dot Class
dotsClass Type: Class/String Default: owl-dots Dots Class - Container for dots..
autoHeightClass Type: Class/String Default: owl-height Auto height Class.

事件:

所有的事件都有 Owl Carousel 的核心代码提供。这使得你可以监听任何元素的变化和给出回调函数。

  1. var owl = $('.owl-carousel');
  2. owl.owlCarousel();
  3. // Listen to owl events:
  4. owl.on('changed.owl.carousel', function(event) {
  5.     ...
  6. })

你也可以自行触发 Owl Carousel 事件:

  1. var owl = $('.owl-carousel');
  2. owl.owlCarousel();
  3. // Go to the next item
  4. $('.customNextBtn').click(function() {
  5.     owl.trigger('next.owl.carousel');
  6. })
  7. // Go to the previous item
  8. $('.customPrevBtn').click(function() {
  9.     // With optional speed parameter
  10.     // Parameters has to be in square bracket '[]'
  11.     owl.trigger('prev.owl.carousel', [300]);
  12. })                  
  13. Callbacks
  14. $('.owl-carousel').owlCarousel({
  15.     onDragged: callback
  16. });
  17. function callback(event) {
  18.     ...
  19. }

Data:

每一个事件都通过 event object 提供非常有用的信息。

  1. function callback(event) {
  2.     // Provided by the core
  3.     var element   = event.target;         // DOM element, in this example .owl-carousel
  4.     var name      = event.type;           // Name of the event, in this example dragged
  5.     var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
  6.     var items     = event.item.count;     // Number of items
  7.     var item      = event.item.index;     // Position of the current item
  8.     // Provided by the navigation plugin
  9.     var pages     = event.page.count;     // Number of pages
  10.     var page      = event.page.index;     // Position of the current page
  11.     var size      = event.page.size;      // Number of items per page
  12. }

Carousel:

名称 类型 回调函数 触发时机
initialize.owl.carousel Type: attachable Callback: onInitialize 插件初始化时触发
initialized.owl.carousel Type: attachable Callback: onInitialized 插件初始化后触发
resize.owl.carousel Type: attachable Callback: onResize 旋转木马尺寸改变时触发
resized.owl.carousel Type: attachable Callback: onResized 旋转木马尺寸改变后触发
refresh.owl.carousel Type: attachable, cancelable, triggerable Callback: onRefresh,Parameter: [event, speed] When the internal state of the plugin needs update.
refreshed.owl.carousel Type: attachable Callback: onRefreshed When the internal state of the plugin has updated.
drag.owl.carousel Type: attachable Callback: onDrag 当拖动旋转木马项时触发
dragged.owl.carousel Type: attachable Callback: onDragged 当拖动旋转木马项结束后触发
translate.owl.carousel Type: attachable Callback: onTranslate When the translation of the stage starts.
translated.owl.carousel Type: attachable Callback: onTranslated When the translation of the stage has finished.
change.owl.carousel Type: attachable Callback: onChange,Parameter: property When a property is going to change its value
changed.owl.carousel Type: attachable Callback: onChanged,Parameter: property When a property has changed its value.
next.owl.carousel Type: triggerable Parameter: [speed] Goes to next item.
prev.owl.carousel Type: triggerable Parameter: [speed] Goes to previous item.
to.owl.carousel Type: triggerable Parameter: [position, speed] Goes to postion
destroy.owl.carousel Type: triggerable Destroys carousel
replace.owl.carousel Type: triggerable Parameter: data Removes current content and add a new one passed in the parameter.
add.owl.carousel Type: triggerable Parameter: [data, position] Adds a new item on a given position.
remove.owl.carousel Type: triggerable Parameter: position Removes an item from a given position

Lazy:

名称 类型 回调函数 触发时机
load.owl.lazy Type: attachable Callback: onLoadLazy When lazy image loads.
loaded.owl.lazy Type: attachable Callback: onLoadedLazy

Video:

名称 类型 回调函数 触发时机
stop.owl.video Type: attachable Callback: onStopVideo When video has unloaded.
play.owl.video Type: attachable Callback: onPlayVideo When video has loaded.

Autoplay:

名称 类型 参数 描述
play.owl.autoplay Type: triggerable Parameter: [timeout, speed] Runs autoplay
stop.owl.autoplay Type: triggerable Stops autoplay

Github 地址:https://github.com/OwlCarousel2/OwlCarousel2

资源下载此资源下载价格为1立即购买,VIP 免费

演示地址 下载地址
收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!