一款移動端微型 swiper 插件，小而美，無依賴.

mSwiper.js

View README in English

項目地址

移動端微型 swiper 插件，小而美，無依賴.

前言

mSwiper 相對於其餘的swiper插件而言，最大的優點就是 小，壓縮後僅 1.2k ,能知足部分開發需求。插件的開發採用 組合使用構造函數模式和原型模式，經過 Gulp 構建，感興趣的能夠閱讀源碼?。歡迎 star ?

如有問題，請提issue

效果演示

在線瀏覽Demo請戳這裏

手機瀏覽請掃描下方二維碼

開發

# 克隆本倉庫
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 同時也支持 AMD 規範，你能夠經過 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