OwlCarousel演示10种不同的调用方法

owlcarousel是一款猫头鹰旋转木马插件。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：图片代码 > 图片轮播难易：初级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

OwlCarousel优势

兼容所有浏览器
支持响应式
支持 CSS3 过度
支持触摸事件
支持 JSON 及自定义 JSON 格式
支持进度条
支持自定义事件
支持延迟加载
支持自适应高度

引入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>

jQuery

owl.carousel默认调用方法：

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

其他9种请看压缩包html代码，配对下面的API

参数	描述	默认值
items	幻灯片每页可见个数	5
itemsDesktop	设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false	[1199,4]
itemsDesktopSmall	同上	[979,3]
itemsTablet	同上	[768,2]
itemsTabletSmall	同上，默认为 false	false
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
jsonPath	JSON 文件路径	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

OwlCarousel演示10种不同的调用方法 收藏

OwlCarousel优势

引入jQuery和owl.carousel相关组件

HTML

owl.carousel默认调用方法：

itemsCustom

itemsScaleUp

responsive

responsiveBaseWidth

OwlCarousel演示10种不同的调用方法
收藏