轮播

图片轮播组件。

可实现图片等轮播,基于 OWL Carousel,查看详细文档

用法

为需要添加轮播效果的元素添加 data-carousel 属性

代码

<div data-carousel>
	<div>...</div>
	...
</div>

参数

可自定义函数参数

参数 默认 类型 说明
items 5 int 设置最宽浏览器宽度下显示条目的最大数量。
itemsDesktop [1199,4] array 预先设定一个特定的浏览器宽度可见的幻灯片的数量。
格式为 [x,y], x 为浏览器宽度,y 为可见幻灯片数量。
例如 [1199,4] 表示窗口宽度大于 1199 px 每页显示 4 个幻灯片。
另外可使用 itemsDesktop: false 重置参数。
itemsDesktopSmall [979,3] array 同上
itemsTablet [768,2] array 同上
itemsTabletSmall false array 同上
itemsMobile [479,1] array 同上
itemsCustom false array 添加自定义宽度显示幻灯片数量。
设置了此参数后,itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile 等将无效。
为了更好的预览,建议将数组按屏幕尺寸排序。
应包含最低可用屏幕尺寸,否则将默认使用最低的可用值。
例如: [[0, 2], [400, 4], [700, 6], [1000, 8], [1200, 10], [1600, 16]]
singleItem false boolean 仅显示一个项目。
itemsScaleUp false boolean 在条目数量不足设置的数量时是否拉伸条目。
slideSpeed 200 int 滑动速度,单位为毫秒。
paginationSpeed 800 int 分页速度,单位为毫秒。
rewindSpeed 1000 int 倒带速度,单位为毫秒。
autoPlay false int/boolean 设置自动播放速度或开关,速度单位为毫秒。
例如 autoPlay : 3000 表示每个 3 秒显示一次。
如果设置 autoPlay: true 默认速度将为 5 秒。
stopOnHover false boolean 鼠标悬停时是否停止播放。
navigation false boolean 显示 "下一条" 和 "上一条" 按钮。
navigationText ["prev","next"] array 自定义导航文本。
使用空按钮可设置 navigationText : false,这里也支持 HTML。
rewindNav true boolean 是否滑动到第一个条目。
使用 rewindSpeed 修改倒带速度。
scrollPerPage false boolean 按页滚动而不是按条目,这将影响上下条按钮及鼠标等拖动。
pagination true boolean 显示分页。
paginationNumbers false boolean 是否在分页按钮中显示数字。
responsive true boolean 设置为 "false" 来禁用响应布局,只在桌面网站上使用轮播。
responsiveRefreshRate 200 int 检查窗口宽度变化的间隔时间,单位为毫秒。
responsiveBaseWidth window jQuery 选择器 轮播检查宽度变化的基础,也可以是任意 jQuery 元素。
例如 ".demo",这样只有 ".demo" 宽度变化时,轮播才会响应裱花。
baseClass "carousel" string 自动添加的基础 CSS 样式,尽量不要更改。
theme "carousel-theme" string 默认轮播的导航及按钮等样式。
lazyLoad false boolean 延迟加载图片,图片在视口之外时不会加载。
可以用于加快移动设备的页面加载速度。
IMG 标签需要特殊标记 class="lazyCarousel"data-src="图片地址"
lazyFollow true boolean 如果使用了分页,将不加载页面中已跳过的条目,仅加载视口中的图片。
如果设置为 "false",使用分页时将加载所有图片,它是延迟加载功能的子设置。
lazyEffect "fade" boolean / string 延迟加载效果。默认是 400 毫秒的淡入效果,设为 "" 可删除效果。
autoHeight false boolean 为 carousel-wrapper-outer 设置一个高度,这样可以使用不同的幻灯片高度。
仅用于每页只有一个条目。
jsonPath false string 允许直接从 JSON 文件中加载。
JSON 数据结构需匹配轮播的 JSON 结构。
若要使用自定义的 JSON 结构,请参阅 jsonSuccess 选项。
jsonSuccess false function 创建轮播的 $.getJSON 成功回调函数。
dragBeforeAnimFinish true boolean 忽略过场动画是否已完成(拖动)
mouseDrag true boolean 开启或关闭鼠标事件。
touchDrag true boolean 开启或关闭触摸事件。
addClassActive false boolean 给可见条目添加 "active" 样式,屏幕上有任何数量的条目都有效。
transitionStyle false string 添加 CSS3 过渡样式,仅屏幕上只有一个条目时有效。

代码

<div data-carousel="{autoPlay: 3000, items: 4, itemsDesktop: [1199,3], itemsDesktopSmall: [979,3]}">
	<div class="placeholder">
		...
	</div>
	...
</div>

示例

1
2
3
4
5
6
7
8