jquery幻灯片插件之owl.carousel.js

官网地址：http://owlcarousel2.github.io/OwlCarousel2/

这个插件兼容各种浏览器，以及移动端

使用方法：

1、下载文件，解压以后，把dist里面的文件放到项目中

2、引入jquery文件，必须是1.8以上的

3、页面引入的文件：

<link rel="stylesheet" href="./js/vendor/OwlCarousel2-2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="js/vendor/OwlCarousel2-2.2.1/assets/owl.theme.default.min.css">

<script src="js/vendor/jquery-3.1.1.js"></script>
<script src="js/vendor/OwlCarousel2-2.2.1/owl.carousel.min.js"></script>

4、页面代码：

<div class="owl-carousel owl-theme">
            <div class="item">
                <picture>
                    <source srcset="img/ad001-l.png" media="(min-50em)">
                    <source srcset="img/ad001-m.png" media="(min-30em)">
                    <img src="img/ad001.png" alt="2015年度报告">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/ad002-l.png" media="(min- 50em)">
                    <source srcset="img/ad002-m.png" media="(min- 30em)">
                    <img srcset="img/ad002.png" alt="新年红包">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/ad003-l.png" media="(min- 50em)">
                    <source srcset="img/ad003-m.png" media="(min- 30em)">
                    <img srcset="img/ad003.png" alt="新手秘籍">
                </picture>
            </div>
        </div>