Zepto 中 swiper 简单用法

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:回调函数,滑动结束时执行

原文地址:https://www.cnblogs.com/dalun101/p/9378336.html

时间: 2024-10-18 16:19:53

Zepto 中 swiper 简单用法的相关文章

Quartz2.2.1在JAVA中的简单用法

由于项目中需要用到定时执行任务,后来查资料发现有Quartz这么一个任务调度框架,但是网上的大部分资料几乎都是之前的版本,Quartz-2.2.1好像经过了改版,与先前的版本在用法上有那么一些出入,2.2.1里面好多方法都被弃用了,然后经过一番折腾,算是会简单的使用了.下面简单的介绍一下: 官网:http://www.quartz-scheduler.org/ 下载完进行解压会得到这六个jar包文件: 这里只介绍一下简单的用法: 1.Job接口:这个接口里面只定义了一个方法,excute voi

Android中Xfermode简单用法

首先在写这篇博客的时候,需要说明我是参考了那篇博文给我的灵感: 详解Paint的setXfermode(Xfermode xfermode) 其次呢,在写这篇博文的时候呢也避免不了抱怨啊.网上其他的关于Xfermode介绍的大部分都是google官方文档中属性的含义,都很雷同估计都是翻译过来的 我想说的是就不能有点原创吗? so,我决定写这篇文章: 一是抒发我心中的纠结: 二是抒发这么多天下文章一大抄就是没有自己出的文章: 三是抄就抄吧,也要加入自己的感悟把: 四是记录一下,以免以后忘记: 另外

AngularJS中ng-options简单用法及预选项失败的原因

刚刚接触AngularJs,记录一下ng-options的使用. 1.构造key-value数据 $scope.types = [ {id:"1",type:"AA"}, {id:"2",type:"BB"}, {id:"3",type:"CC"} ]; 2.绑定 <select ng-model="selectType" ng-options="t.

php中echo简单用法

初学者,被echo语法困扰,查看,求各位大神指点!!! 手册上写echo - 输出一个或多个字符串,而字符串有单引号,双引号以及定界符. 单引号只会输出字符本身,双引号会输出变量,手册上写的已经很详细了. <?phpecho "Hello World"; echo "This spansmultiple lines. The newlines will beoutput as well";//echo "This spans\nmultiple li

Android中资源文件中的字符串数组string-array简单用法

在Android中,用string-array是一种简单的提取XML资源文件数据的方法. 例子如下: 把相应的数据放到values文件夹的strings.xml文件里,或是其他自定义的xml中都可以,以下操作方法相同. <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="sports"> <item>足球<

java中Object.equals()简单用法

/* equals()方法默认的比较两个对象的引用! */ class Child { int num; public Child(int x){ num = x; } //人文的抛出运行时异常的好处是:可以自定义错误信息! /*public boolean equals(Object o) throws ClassCastException{ if(!(o instanceof Child)) throw new ClassCastException("中文提示:类型错误"); Ch

Android中AsyncTask的简单用法【转】

在开发Android移动客户端的时候往往要使用多线程来进行操作,我们通常会将耗时的操作放在单独的线程执行,避免其占用主线程而给用户带来不好的用户体验.但是在子线程中无法去操作主线程(UI 线程),在子线程中操作UI线程会出现错误.因此android提供了一个类Handler来在子线程中来更新UI线程,用发消息的机制更新UI界面,呈现给用户.这样就解决了子线程更新UI的问题.但是费时的任务操作总会启动一些匿名的子线程,太多的子线程给系统带来巨大的负担,随之带来一些性能问题.因此android提供了

IOS 中block结构的简单用法

自从block出现之后,很多API都开始采用这样的结构,由此可见,block确实有许多优势存在,这里将一些简单用法总结如下: 一.如何声明一个block变量 我们通过^符号来声明block类型,形式如下: void (^myBlock)(); 其中第一个void是返回值,可以是任意类型,中间括号中^后面的是这个block变量的名字,我把它命名为myBlock,最后一个括号中是参数,如果多参数,可以写成如下样式: int (^myBlock)(int,int); 同样,你也可以给参数起名字: in

swift中collectionView的简单用法

之前写过OC中collectionView的用法,现在再看看swift中collectionView的用法,有兴趣的朋友,可以两者前后比较下区别,swift现在没有稳定下来,语法更新的比较快,但是它核心的一些东西,已经定型了.这些还是靠读者们自己去挖掘吧. //这里签署数据源和代理,此时不需要引入layout的代理,也可以.class AmonViewController: UIViewController ,UICollectionViewDataSource,UICollectionView