Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点:
兼容所有浏览器
支持响应式
支持 CSS3 过度
支持触摸事件
支持 JSON 及自定义 JSON 格式
支持进度条
支持自定义事件
支持延迟加载
支持自适应高度
浏览器兼容:兼容所有浏览器,包括 IE6、IE7。
jQuery 兼容:兼容 1.7 及以上版本。
Owl Carousel 使用方法:
新建一个HTML文件
1、在HTML文件中引入Owl Carousel必须文件
<link href="https://www.jb51.net/css/owl.carousel.css"> <link href="https://www.jb51.net/css/owl.theme.css"> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/owl.carousel.js"></script>
2、HTML代码
<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>
3、JavaScript
$(function(){ $('#owl-example').owlCarousel(); });
下面是Owl Carousel的中文参数与api说明:
参数
类型
默认值
说明
items
整数
5
幻灯片每页可见个数
itemsDesktop
数组
[1199,4]
设置浏览器宽度和幻灯片可见个数,格式为[X,Y],X 为浏览器宽度,Y 为可见个数,如[1199,4]就是如果浏览器宽度小于1199,每页显示 4 张,此参数主要用于响应式设计。也可以使用 false
itemsDesktopSmall
数组
[979,3]
同上
itemsTablet
数组
[768,2]
同上
itemsTabletSmall
数组
false
同上,默认为 false
itemsMobile
数组
[479,1]
同上
itemsCustom
数组
false
singleItem
布尔值
false
是否只显示一张
itemsScaleUp
布尔值
false
slideSpeed
整数
200
幻灯片切换速度,以毫秒为单位
paginationSpeed
整数
800
分页切换速度,以毫秒为单位
rewindSpeed
整数
1000
重回速度,以毫秒为单位
autoPlay
布尔值/整数
false
自动播放,可选布尔值或整数,若使用整数,如 3000,表示 3 秒切换一次;若设置为 true,默认 5 秒切换一次
stopOnHover
布尔值
false
鼠标悬停停止自动播放
navigation
布尔值
false
显示“上一个”、“下一个”
navigationText
数组
[“prev”,”next”]
设置“上一个”、“下一个”文字,默认是[“prev”,”next”]
rewindNav
布尔值
true
滑动到第一个
scrollPerPage
布尔值
false
每页滚动而不是每个项目滚动
pagination
布尔值
true
显示分页
paginationNumbers
布尔值
false
分页按钮显示数字
responsive
布尔值
true
responsiveRefreshRate
整数
200
每 200 毫秒检测窗口宽度并做相应的调整,主要用于响应式
responsiveBaseWidth
jQuery 选择器
window
baseClass
字符串
owl-carousel
添加 CSS,如果不需要,最好不要使用
theme
字符串
owl-theme
主题样式,可以自行添加以符合你的要求
lazyLoad
布尔值
false
延迟加载
lazyFollow
布尔值
true
当使用分页时,如果跨页浏览,将不加载跳过页面的图片,只加载所要显示页面的图片,如果设置为 false,则会加载跳过页面的图片。这是 lazyLoad 的子选项
lazyEffect
布尔值/字符串
fade
延迟加载图片的显示效果,默认以 400 毫秒淡入,若为 false 则不使用效果
loop
布尔值
false
无限循环
autoHeight
布尔值
false
自动使用高度
jsonPath
字符串
false
JSON 文件路径
jsonSuccess
函数
false
处理自定义 JSON 格式的函数
dragBeforeAnimFinish
布尔值
true
忽略过度是否完成(只限拖动)
mouseDrag
布尔值
true
关闭/开启鼠标事件
margin
整数
0
幻灯片间距
touchDrag
布尔值
true
关闭/开启触摸事件
addClassActive
布尔值
false
给可见的项目加入 “active” 类
transitionStyle
字符串
false
添加 CSS3 过度效果
owlcarousel回调函数