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 });
时间： 2024-12-25 12:34:52