OwlCarousel调用方法及参数说明

本文介绍了如何在网页中配置并使用Owl Carousel插件实现幻灯片效果,包括引入必要的CSS和JavaScript文件,设置HTML结构及调用方法。同时详细列举了Owl Carousel的各种配置参数及其默认值。

调用方法:

引入jQuery和owl.carousel相关组件

<link href="css/owl.carousel.css" rel="stylesheet"> 
<link href="css/owl.theme.css" rel="stylesheet"> 
<script src="js/jquery.js"></script> 
<script src="js/owl.carousel.js"></script>

HTML

<div id="owl-demo" class="owl-carousel"> 
    <a class="item"><img src="img/owl1.jpg" alt=""></a> 
    <a class="item"><img src="img/owl2.jpg" alt=""></a> 
    <a class="item"><img src="img/owl3.jpg" alt=""></a> 
    ...... 
</div>

JS调用

$(function(){ 
    $('#owl-example').owlCarousel(); 
});

参数说明:

参数描述默认值
items幻灯片每页可见个数5
itemsDesktop设置浏览器宽度和幻灯片可见个数,格式为[X,Y],X 为浏览器宽度,Y 为可见个数,如[1199,4]就是如果浏览器宽度小于1199,每页显示 4 张,此参数主要用于响应式设计。也可以使用 false[1199,4]
itemsDesktopSmall同上[979,3]
itemsTablet同上[768,2]
itemsTabletSmall同上,默认为 falsefalse
itemsMobile同上[479,1]
itemsCustom
singleItem是否只显示一张false
itemsScaleUp
slideSpeed幻灯片切换速度,以毫秒为单位200
paginationSpeed分页切换速度,以毫秒为单位800
rewindSpeed重回速度,以毫秒为单位1000
autoPlay自动播放,可选布尔值或整数,若使用整数,如 3000,表示 3 秒切换一次;若设置为 true,默认 5 秒切换一次false
stopOnHover鼠标悬停停止自动播放false
navigation显示“上一个”、“下一个”false
navigationText设置“上一个”、“下一个”文字,默认是[“prev”,”next”][“prev”,”next”]
rewindNav滑动到第一个true
scrollPerPage每页滚动而不是每个项目滚动false
pagination显示分页true
paginationNumbers分页按钮显示数字false
responsive
responsiveRefreshRate每 200 毫秒检测窗口宽度并做相应的调整,主要用于响应式200
responsiveBaseWidth
baseClass添加 CSS,如果不需要,最好不要使用owl-carousel
theme主题样式,可以自行添加以符合你的要求owl-theme
lazyLoad延迟加载false
lazyFollow当使用分页时,如果跨页浏览,将不加载跳过页面的图片,只加载所要显示页面的图片,如果设置为 false,则会加载跳过页面的图片。这是 lazyLoad 的子选项true
lazyEffect延迟加载图片的显示效果,默认以 400 毫秒淡入,若为 false 则不使用效果fade
autoHeight自动使用高度false
jsonPathJSON 文件路径false
jsonSuccess处理自定义 JSON 格式的函数false
dragBeforeAnimFinish忽略过度是否完成(只限拖动)true
mouseDrag关闭/开启鼠标事件true
touchDrag关闭/开启触摸事件true
addClassActive给可见的项目加入 “active” 类false
transitionStyle添加 CSS3 过度效果false
beforeUpdate响应之后的回调函数false
afterUpdate响应之前的回调函数false
beforeInit初始化之前的回调函数false
afterInit初始化之后的回调函数false
beforeMove移动之前的回调函数false
afterMove移动之后的回调函数false
afterAction初始化之后的回调函数false
startDragging拖动的回调函数false
afterLazyLoad延迟加载之后的回调函数false
owl.prev到下一个owl.next
owl.play停止自动播放owl.stop
owl.goTo不使用动画跳到第几个owl.jumpTo
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值