如何实现广告响应式滚动 OwlCarousel2

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 -源文件，包括此文档。全部包裹在咕噜工程中。
依附

获得最新消息jQuery或 Zepto jQuery最低版本要求是1.8.3版本。

Include CSS

首先，将两个CSS文件包含到HTML头中：

owl.carousel.css文件是必需的，并且应该包含在任何*.js文件之前。

第二owl.theme.default.css文件是可选的，可以自由编辑。但是，如果您喜欢默认的导航控件，如点或下一个按钮，则需要。在源程序包中，您也可以找到SCSS容易生成你自己的主题的文件。

Include JS

是的，包括jQuery和owl.carousel.min.js进入页脚

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="width: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="width: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="width:100%;">

    <img src="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w" sizes="(min-width:800px) 800px,100vw"/>

</div>

这种情况下，1600的图片便不会加载出来。

如果在有边距的情况下，sizes值也可以通过算式来设置，如

sizes="(min-width:800px) calc(100vw - 30em),100vw"