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。



原文地址:https://www.cnblogs.com/xyhy/p/3818931.html