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、頁面代碼:

 1 <div class="owl-carousel owl-theme">
 2             <div class="item">
 3                 <picture>
 4                     <source srcset="img/ad001-l.png" media="(min-width:50em)">
 5                     <source srcset="img/ad001-m.png" media="(min-width:30em)">
 6                     <img src="img/ad001.png" alt="2015年度報告">
 7                 </picture>
 8             </div>
 9             <div class="item">
10                 <picture>
11                     <source srcset="img/ad002-l.png" media="(min-width: 50em)">
12                     <source srcset="img/ad002-m.png" media="(min-width: 30em)">
13                     <img srcset="img/ad002.png" alt="新年紅包">
14                 </picture>
15             </div>
16             <div class="item">
17                 <picture>
18                     <source srcset="img/ad003-l.png" media="(min-width: 50em)">
19                     <source srcset="img/ad003-m.png" media="(min-width: 30em)">
20                     <img srcset="img/ad003.png" alt="新手秘籍">
21                 </picture>
22             </div>
23         </div>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM