swiper的使用 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <link type="text/css" rel="stylesheet" href="swiper-dist/css/swiper.css" />
  7         <!-- 如果引入swiper.jquery.js，那么在这之前需要引入jquery  -->
  8         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  9         <script src="swiper-dist/js/swiper.jquery.js"></script>
 10         
 11         
 12         <!--<script src="swiper-dist/js/swiper.js"></script>-->
 13         <style>
 14             .swiper-container {
 15                 width: 600px;
 16                 height: 300px;
 17             }  
 18         </style>
 19     </head>
 20     <body>
 21         
 22         <div class="swiper-container contaianer">
 23             <!-- 内容部分 -->
 24             <div class="swiper-wrapper">
 25                 <!-- 每一页 -->
 26                 <div class="swiper-slide">Slide 1</div>
 27                 <div class="swiper-slide">Slide 2</div>
 28                 <div class="swiper-slide">Slide 3</div>
 29                 <div class="swiper-slide">Slide 4</div>
 30                 <div class="swiper-slide">Slide 5</div>
 31                 <div class="swiper-slide">Slide 6</div>
 32             </div>
 33             <!-- 如果需要分页器 -->
 34             <div class="swiper-pagination"></div>
 35             
 36             <!-- 如果需要导航按钮 -->
 37             <div class="swiper-button-prev"></div>
 38             <div class="swiper-button-next"></div>
 39             
 40             <!-- 如果需要滚动条 -->
 41             <div class="swiper-scrollbar"></div>
 42         </div>
 43         <!--导航等组件可以放在container之外-->
 44         
 45         <button class="btn">按钮</button>
 46         <button class="btn1">滚到第3页</button>
 47         <button class="btn2">插入一页</button>
 48         
 49         <script>     
 50         //常见swiper对象
 51         //参数1：swiper容器选择器，或者dom对象
 52         //参数2：swiper配置项
 53         var con = document.querySelector('.swiper-container');
 54           var mySwiper = new Swiper(con, {
 55               //水平horizontal   垂直vertical
 56             direction: 'horizontal',
 57             //循环
 58             loop: true,
 59             //初始页面
 60             initialSlide: 1,
 61             speed: 500,
 62             mousewheelControl: true,
 63 //            autoplay: 1000,
 64             // 如果需要分页器
 65             pagination: '.swiper-pagination',
 66 //            
 67 //            // 如果需要前进后退按钮
 68             nextButton: '.swiper-button-next',
 69             prevButton: '.swiper-button-prev',
 70 //            
 71 //            // 如果需要滚动条
 72 //            scrollbar: '.swiper-scrollbar',
 73             
 74             onInit: function(swiper){
 75                 //swiper对象就是创建出来的mySwiper
 76                 alert(1)
 77                 console.log('swiper');
 78                 console.log(swiper);
 79                 
 80             },
 81             onTouchStart: function(swiper){
 82                 console.log('碰到了swiper');
 83             },
 84             onTouchMove: function(swiper){
 85                 console.log('正在移动....');
 86             },
 87             
 88             onSlideChangeStart: function(){
 89                 console.log('Start');
 90             }
 91 
 92             
 93           })   
 94           
 95           
 96 //          mySwiper
 97           
 98         console.log('mySwiper');
 99         console.log(mySwiper);
100           
101           $('.btn').on('click', function(){
102               
103               console.log(mySwiper.realIndex);
104               
105               mySwiper.disableMousewheelControl();
106               
107           })
108           
109           $('.btn1').on('click', function(){
110               
111               mySwiper.slideTo(3, 200, true);
112               
113           })
114           
115           $('.btn2').on('click', function(){
116               
117               document.querySelector('.swiper-wrapper').innerHTML += '<div class="swiper-slide">Slide '+7+'</div>';
118               
119               mySwiper.update();
120               
121               
122           })
123           
124           
125           
126           </script>
127         
128         
129         
130         
131     </body>
132 </html>

 

posted @ 2017-09-14 16:39  铜镜123  阅读(200)  评论(0)    收藏  举报