githu
https://github.com/OwlCarousel2/OwlCarousel2
OwlCarousel2 官方网址
http://owlcarousel2.github.io/OwlCarousel2/
兼容性
下载适合你需要的版本:
- Owl Carousel - 2.3.4 -分布式版本-编译和缩小。包括JavaScript、图像和CSS。
- Owl Carousel Source - 2.3.4 -源文件,包括此文档。全部包裹在咕噜工程中。
-
依附
Include CSS
首先,将两个CSS文件包含到HTML头中:
<link rel="stylesheet" href="js/OwlCarousel/dist/assets/owl.carousel.min.css"/>
<link rel="stylesheet" href="js/OwlCarousel/dist/assets/owl.theme.default.min.css"/>
owl.carousel.css
文件是必需的,并且应该包含在任何*.js文件之前。
第二owl.theme.default.css
文件是可选的,可以自由编辑。但是,如果您喜欢默认的导航控件,如点或下一个按钮,则需要。在源程序包中,您也可以找到SCSS容易生成你自己的主题的文件。
Include JS
是的,包括jQuery和owl.carousel.min.js
进入页脚
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script src="js/OwlCarousel/dist/owl.carousel.min.js"/></script>
Set HTML
你不需要任何特殊的标记。您只需要在容器元素内封装div(OWL与任何类型元素A/IMG/SPAN…)<div class="owl-carousel">
. “OWL转盘”类必须适用于来自OWLCARUSEL.CSS文件的适当样式。如果您想要默认的Nav控件,如点或按钮,则必须在同一div上包含“OWL主题”类。
<div class="owl-carousel owl-theme"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div>
调用插件
现在调用OWL初始化器函数,您的旋转木马就准备好了。
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
例如
$(document).ready(function(){ $('.owl-carousel').owlCarousel({ items:1, loop:true, autoplay:true, autoplaytime:3000 }); });
参数选项
下表中是所有内置的Owl Carousel参数选项:
参数名称 | 参数类型 | 默认值 | 描述 |
items | Number | 3 | 在屏幕中可见的旋转木马项 |
margin | Number | 0 | 旋转木马项的margin-right值,单位像素 |
loop | Boolean | false | 是否无限循环,会复制第一项和最后一项来制作无限循环的错觉 |
center | Boolean | false | 旋转木马项居中。在奇数和偶数项中都可以很好的工作 |
mouseDrag | Boolean | true | 是否可以使用鼠标拖拽 |
touchDrag | Boolean | true | 是否可以触摸拖拽 |
pullDrag | Boolean | true | Stage pull to edge. |
freeDrag | Boolean | false | Item pull to edge |
stagePadding | Number | 0 | Stage上的Padding left和Padding right(可以看到相邻的项) |
merge | Boolean | false | 合并旋转木马项。Looking for data-merge='{number}' inside item. |
mergeFit | Boolean | true | 如果屏幕比旋转木马项小,使旋转木马项适合屏幕大小 |
autoWidth | Boolean | false | 设置非网格内容。尝试在div上使用width样式 |
startPosition | Number/String | 0 | 开始点或URL Hash字符串,如:'#id' |
URLhashListener | Boolean | false | 监听url hash 的变化。必须在旋转木马项上设置data-hash属性 |
nav | Boolean | false | 显示ext/prev按钮 |
navRewind | Boolean | true | 跳转到前一项或后一项 |
navText | Array | ['next','prev'] | HTML箭头导航 |
slideBy | Number/String | 1 | Navigation slide by x. 'page' string can be set to slide by page. |
dots | Boolean | true | 显示圆点导航按钮 |
dotsEach | Number/Boolean | false | Default: false 每多少个项显示一个圆点导航按钮 |
dotData | Boolean | false | 使用data-dot的内容 |
lazyLoad | Boolean | false | 是否懒加载图片。data-src和data-src-retina为高分辨率。如果元素不是<img>会设置为元素的内联背景图像。 |
lazyContent | Boolean | false | lazyContent选项只在测试版中有,发行版中已经被删除。 |
autoplay | Boolean | false | 旋转木马是否自动播放 |
autoplayTimeout | Number | 5000 | 旋转木马自动播放的时间间隔 |
autoplayHoverPause | Boolean | false | 是否在鼠标滑过时停止自动播放 |
smartSpeed | Number | 250 | 速度计算 |
fluidSpeed | Boolean | Number | 速度计算 |
autoplaySpeed | Number/Boolean | false | 是新密码自动播放的速度 |
navSpeed | Number/Boolean | false | 旋转木马导航的速度 |
dotsSpeed | Boolean | Number/Boolean | 分页的速度 |
dragEndSpeed | Number/Boolean | false | Drag end speed |
callbacks | Boolean | true | 是否允许回调函数 |
responsive | Object | empty object | 包含responsive选项的对象。设置为flase取消responsive能力。 |
responsiveRefreshRate | Number | 200 | Responsive的刷新频率 |
responsiveBaseElement | DOM element | window | 可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器(如IE8),可以在包裹容器中使用该属性。 |
responsiveClass | Boolean | false | 可选的辅助class。添加owl-reponsive-和breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。 |
video | Boolean | false | 是否允许添加YouTube/Vimeo视频。 |
videoHeight | Number/Boolean | false | 设置视频的高度。 |
videoWidth | Number/Boolean | false | 设置视频的宽度。 |
animateOut | String/Bolean | false | CSS3 animation out. |
animateIn | String/Bolean | false | CSS3 animation in. |
fallbackEasing | String | swing | Easing for CSS2 $.animate. |
info | Function | false | 获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。 |
实现响应式图片的方法:
1.js或服务器端
$(document).ready(function(){ function makeImageResponsive(){ var width=$(window).width(); var img=$('.content img'); if(width<=480){ img.attr('src','img/480.png'); }else if(width<=800){ img.attr('src','img/800.png'); }else{ img.attr('src','img/1600.png'); } } $(window).on('resize load',makeImageResponsive); })
判断浏览器宽度的值,判断使用哪张图片。后台服务器用cookie处理也可以。
srcset为新标记,srcset是img标签中的属性,
<div class="content" style="100%;"> <img src="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w"/> </div>
480w:480width
其实,使用srcset有个坑,当你把content的width值改成50%的时候,图片宽度大于240时就已经用800的图片展示了,就是说,图片变小,但是窗口还是按照100%来进行设置,那么,就需要配合sizes来进行设置了。
3.srcset配合sizes
sizes默认值为100vw,100vw:100% viewport width
不管img宽度是多少,content宽度设多少,都以100%视口宽度来显示,
<div class="content" style="50%;"> <img src="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w" sizes="50vw"/> </div>
下面代码媒体查询实现:
在最小宽度为800px下,图片预估宽度为800px,其他情况下100%的视口宽度。
<div class="content" style="100%;"> <img src="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w" sizes="(min-800px) 800px,100vw"/> </div>
这种情况下,1600的图片便不会加载出来。
如果在有边距的情况下,sizes值也可以通过算式来设置,如
sizes="(min-800px) calc(100vw - 30em),100vw"