OwlCarousel2支持触摸屏的响应式jQuery旋转木马插件

所属分类:媒体-幻灯片和轮播图

 54220  386  查看评论 (10)
分享到微信朋友圈
X
OwlCarousel2支持触摸屏的响应式jQuery旋转木马插件 ie兼容10

使用方法

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

  • 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依赖于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 edge
stagePaddingNumber0Stage上的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/String1
Navigation 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 speed
callbacksBooleantrue是否允许回调函数
responsiveObjectempty object包含responsive选项的对象。设置为flase取消responsive能力。
responsiveRefreshRateNumber200
Responsive的刷新频率
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.
infoFunctionfalse获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。



相关插件-幻灯片和轮播图

jquery仿QQ音乐精彩推荐的数组方式轮播

这个是通过数组的原理实现的改变数组的排序元素的class也随之更改产生轮播的效果(代码注释很全,修改方便)
  幻灯片和轮播图
 36026  460

jQuery跨浏览器幻灯片插件jquery.iosslider

iosSlider iosSlider是一个可定制的、跨浏览器幻灯片jQuery插件。设计用于作为内容滑块、旋转木马、滚动网站旗帜或者图片库。其效果类似于ios的横向滚屏效果
  幻灯片和轮播图
 27790  308

仿UC轮播插件imgSlider.js

js图片轮播幻灯片制作UC浏览器官网焦点图片切换,通过鼠标点击缩略图切换banner大图,带左右按钮控制缩略图片滚动切换,进行图片自动轮播
  幻灯片和轮播图
 27733  335

jQuery焦点图插件slideshow-jq.js

jQuery自动化图片比例焦点图slider效果
  幻灯片和轮播图
 24418  292

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Dragon?Shen 0
    2019/8/14 16:24:40
    少了旧版的 不同设备显示的item数量设置 回复
    ご冬冬变坏了 0
    2018/11/21 15:09:43
    使用 lazyload 属性,在IE浏览器会有多余的空间出来,这是怎么回事 回复
    0
    2018/9/10 16:29:30
    有个问题请教,这个插件怎么绑定切换的缩略图呀,版本升级了,但是没做demo,菜鸟完全不懂怎么做 回复
    Alien 0
    2018/6/20 17:15:01
    一个页面两个就不行了? 回复
    Pg_Channel 0
    2017/9/21 15:23:44
    Mousewheel 为什么只能往右边滚,怎么解决 回复
    流年 0
    2017/9/19 10:44:09

    用户操作之后自动切换会停止,怎样重新启动autoplay

    回复
    Archer 0
    2017/6/9 11:41:17

    可否支持用鼠标上下切换呢

    回复
    CraZyDoubLe 0
    2016/9/5 16:09:56
    夜黑?高 0
    2016/6/28 18:06:48
    山丘的彼方 0
    2016/2/24 11:02:02
    这个不是有了么・・・ 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复