Zepto 中 swiper 简单用法

Posted 2020-12-25 dalun101

Zepto

　　一个轻量级的针对现代高级浏览器的javascript库，多用于开发移动端
　　　　zepto官网：http://zeptojs.com/
　　　　zepto中文api：http://www.css88.com/doc/zeptojs_api/
　　　　zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/

swiper使用方法：

　　#幻灯片效果实例，固定用法
　　<script type="text/javascript" src="js/zepto.min.js"></script>
　　<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
　　......

　　<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
　　......

　　<div class="swiper-container">
　　　　<div class="swiper-wrapper">
　　　　　　<div class="swiper-slide">slider1</div>
　　　　　　<div class="swiper-slide">slider2</div>
　　　　　　<div class="swiper-slide">slider3</div>
　　　　</div>
　　　　<div class="swiper-pagination"></div>
　　　　<div class="swiper-button-prev"></div>
　　　　<div class="swiper-button-next"></div>
　　</div>

　　<script>
　　　　var swiper = new Swiper(‘.swiper-container‘, {
　　　　　　pagination: ‘.swiper-pagination‘,
　　　　　　prevButton: ‘.swiper-button-prev‘,
　　　　　　nextButton: ‘.swiper-button-next‘,
　　　　　　initialSlide :1,
　　　　　　paginationClickable: true,
　　　　　　loop: true,
　　　　　　autoplay:3000,
　　　　　　autoplayDisableOnInteraction:false
　　　　});
　　</script>

　　#swiper使用参数：
　　　　1、initialSlide：初始索引值，从0开始
　　　　2、direction：滑动方向 horizontal | vertical
　　　　3、speed：滑动速度，单位ms
　　　　4、autoplay：设置自动播放及播放时间
　　　　5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
　　　　6、pagination：分页圆点
　　　　7、paginationClickable：分页圆点是否点击
　　　　8、prevButton：上一页箭头
　　　　9、nextButton：下一页箭头
　　　　10、loop：是否首尾衔接
　　　　11、onSlideChangeEnd：回调函数，滑动结束时执行