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。

巴特西

Swiper的简单实用方法

最新文章

热门文章