Swiper的簡單實用方法

最近項目中有用到一個非常強大的組件idangerous.swiper.js的組件，這個組件能夠實現幻燈片的播放效果，而且有各種3D效果，大家可以去試一下，效果很不錯的說！

這是這個項目的api文檔：http://www.idangero.us/sliders/swiper/api.php  

GitHub上的地址：https://github.com/nolimits4web/Swiper

 

具體使用方法（copy的Swiper官網的代碼）：

首先在頁面中引入css和js文件：

<link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
<script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script>

頁面中需要的頁面結構

<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide"> 
        <!-- 這中間可以加入任意的頁面代碼 -->
      </div>
      
      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- 這中間可以加入任意的頁面代碼 --> 
　　　 </div>
 
　　　 <!--Third Slide--> 
　　　 <div class="swiper-slide"> 
      <!-- 這中間可以加入任意的頁面代碼 --> 
      </div>
   </div> 
</div>
這是JS調用的示例：

<script type="text/javascript">

/*====== Use document ready or window load events For example: With jQuery: $(function() { ...code here... }) Or window.onload = function() { ...code here ...} Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
=======*/

window.onload = function() {
  var mySwiper = new Swiper('.swiper-container',{
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });  
}

/* Or with jQuery/Zepto */
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

</script>

再者，這個組件的api的方法很多，可以設置的選項也有很多，我目前使用的比較少，然后對他的文檔的閱讀也不怎么深入，希望以后能夠有時間仔細研究下這個組件的api。