1.Swiper3.x的全部配置选项、方法、函数(http://www.swiper.com.cn/api/basic/2014/1215/19.html)
2.引入
![](https://i-blog.csdnimg.cn/blog_migrate/5f94c2fecb4ccb2f76f50c965d122407.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/50828477840f9be8f01bb82af691c7d1.gif)
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>
3.HTML
![](https://i-blog.csdnimg.cn/blog_migrate/5f94c2fecb4ccb2f76f50c965d122407.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/50828477840f9be8f01bb82af691c7d1.gif)
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>
4.设置参数
![](https://i-blog.csdnimg.cn/blog_migrate/5f94c2fecb4ccb2f76f50c965d122407.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/50828477840f9be8f01bb82af691c7d1.gif)
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 });