Swiper 3.4.1
Posted 吃回头草的马
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
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>
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 });
以上是关于Swiper 3.4.1的主要内容，如果未能解决你的问题，请参考以下文章