Swiper 3.4.1

1.Swiper3.x的全部配置选项、方法、函数（http://www.swiper.com.cn/api/basic/2014/1215/19.html）

2.引入

 1 //如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5     ...
 6     <link rel="stylesheet" href="path/to/swiper.min.css">
 7 </head>
 8 <body>
 9     ...
10     <script src="path/to/jquery.js"></script>
11     <script src="path/to/swiper.jquery.min.js"></script>
12 </body>
13 </html>
View Code

3.HTML

 1 <div class="login_banner" style="width:100%;">
 2                 <div id="loginBanner" class="swiper-container">
 3                     <div class="swiper-wrapper">
 4                       <div class="swiper-slide">
 5                         <img src="../../themes/default/Images/login/banner01_bg.jpg?v=0116" alt="" />
 6                       </div>
 7                       <div class="swiper-slide">
 8                         <img src="../../themes/default/Images/login/banner02_bg.jpg?v=0116" alt="" />
 9                       </div>
10                       <div class="swiper-slide">
11                         <img src="../../themes/default/Images/login/banner03_bg.jpg?v=0116" alt="" />
12                       </div>
13                       <div class="swiper-slide">
14                         <img src="../../themes/default/Images/login/banner04_bg.jpg?v=0116" alt="" />
15                       </div>
16                     </div>
17                 </div>
18  
19             </div>
View Code

4.设置参数

 1 /*******************滚动Banner图片的显示***********************************/
 2             var swiper = new Swiper('#loginBanner', {
 3                 pagination: '.swiper-pagination',
 4                 loop: true,
 5                 paginationClickable: true,
 6                 spaceBetween: 30,
 7                 centeredSlides: true,
 8                 autoplay: 2500,
 9                 autoplayDisableOnInteraction: false
10             });
View Code

 

posted @ 2017-03-08 10:35  AAABONE  阅读(305)  评论(0)  编辑  收藏  举报