首页 > 代码库 > Swiper 3.4.1

Swiper 3.4.1

2024-09-07 11:08:10   219人阅读

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: false10             });
View Code

 

Swiper 3.4.1


联系
我们