• 移动端开发(四):swiper.js


    swiper.js中文网:http://www.swiper.com.cn/

    文档结构

    swiper.jquery.js    是需要引用jquery.js 或者 zepto.js 时,只需直接引用该文件即可,减少加载。

    swiper.animate.js  使用animate.js的动画效果,使用方法:http://www.swiper.com.cn/usage/animate/index.html

    基本使用方法

    具体操作:http://www.swiper.com.cn/usage/index.html

    1. 写基本html标签结构,结构中使用swiper.js的className;

    2.书写js时,可直接调用某功能,但是前提必须是具有该功能的html标签存在在页面中;

    3.使用swiper.js的样式,需应用swiper.css

    API swiper.js版本3.0+  

    具体API:http://www.swiper.com.cn/api/start/2014/1218/140.html

     1.初始化

    var mySwiper = new Swiper('.swiper-contain',{
       autoplay: 3000, // 自动滑动 
    })

    2. Basic (swiper一般选项)

    主要包含:初始设置,滑动方向,速度,自动播放,视差效果,隐藏显示时的尺寸应用等。

    3. Progress (进度)

    标识silde的索引

    4. Free Mode(free模式/抵抗反弹)

    是否实现自动贴合,贴合期间的各个效果

    5. Slide grid(网格分布)

    properties 属性

  • 相关阅读:
    前端生成pdf文件之pdfmake.js
    vim 安装
    linux基础学习
    python 编码处理
    Ubuntu 下配置 SSH服务全过程及问题解决
    yum 安装
    Ubuntu安装MySQL
    Linux各发行版本及其软件包管理方法
    轻松学习LINUX系列教程推出
    常用命令
  • 原文地址:https://www.cnblogs.com/dongcheck/p/5062808.html
Copyright © 2020-2023  润新知