Skip to content

JohnsenZhou/mSwiper.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

62 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mSwiper.js · downloads license

View README in English

移动端微型 swiper 插件,小而美,无依赖.

前言

mSwiper 相对于其他的swiper插件而言,最大的优势就是 ,压缩后仅 1.2k ,能满足部分开发需求。插件通过 Gulp 构建,感兴趣的可以阅读源码🦄。

若有问题,请提issue

效果演示

在线浏览Demo请戳这里

PC端浏览请打开移动端调试页面

手机浏览请扫描下方二维码

在线浏览

开发

# 克隆本仓库
git clone https://github.com/JohnsenZhou/mSwiper.js.git

# 进入仓库目录
cd mSwiper.js

# 安装依赖
npm install

# 启动项目,本地浏览地址 => localhost:8080
gulp

# 打包压缩
gulp build

安装

前往 release 下载所需版本。

使用

<ul id="selector">
  <li>
    <img src="./img/1.jpg">
  </li>
  <li>
    <img src="./img/2.jpg">
  </li>
  <li>
    <img src="./img/3.jpg">
  </li>
  <li>
    <img src="./img/4.jpg">
  </li>
  <li>
    <img src="./img/5.jpg">
  </li>
</ul>
<script src="../src/mSwiper.js"></script>
<script>
  var options = {
    selector: "#selector",  // 节点选择
    isAutoPlay: true,       // 是否自动播放
    autoPlayTime: 3000,     // 设置自动播放时间
  }
  var mSwiper = new mSwiper(options);
</script>

mSwiper 同时也支持 AMDCommonJS 规范,你可以通过 require.js 进行加载使用:

require(['mSwiper'], function(mSwiper) {
  var options = {
    selector: "#selector",  // 节点选择
    isAutoPlay: true,       // 是否自动播放
    autoPlayTime: 3000,     // 设置自动播放时间
  }
  var mSwiper = new mSwiper(options);
})

Api

new mSwiper(options)

options 具体参数:

参数 类型 默认值 功能描述
selector string #selector 容器选择器
isAutoPlay bool false 是否自动播放
isManual bool false 是否支持手指滑动
autoPlayTime number 5000 自动播放间隔时间
goDirection string left 自动播放方向(left&right)

License

MIT License