輕量級滑塊Swiper外掛釋出（原生js，僅3kb）
摘要：
專注於移動端、輕量級Swiper原生外掛（3kb gziped）。觸控事件基於element，不影響頁面的觸控事件（如右滑返回上一頁）
重構於Swipe，實現自定義swipe寬度、偏移量、無限輪播、事件複製等功能，體驗更加流暢
Git倉庫
如果覺得有用的話，歡迎star~
...
專注於移動端、輕量級Swiper原生外掛（3kb gziped）。觸控事件基於element，不影響頁面的觸控事件（如右滑返回上一頁）
重構於Swipe，實現自定義swipe寬度、偏移量、無限輪播、事件複製等功能，體驗更加流暢
如果覺得有用的話，歡迎star~
預覽
安裝
npm install light-swiper // or yarn add light-swiper 複製程式碼
用法
light-swiper只需要遵循簡單的佈局模式，如：
<div class="light-swiper"> <div class="swiper-wrap"> <div class="swipe-item"></div> <div class="swipe-item"></div> <div class="swipe-item"></div> <div class="swipe-item"></div> </div> </div> 複製程式碼
以上是最初需要的結構：一系列元素包裹在兩個容器中。 在每個swipe-item可以自定義你想要的內容。初始化Swiper只需簡單一行程式碼，傳入swiper的最外層DOM即可，如下所示：
import Swiper from 'light-swiper'
const mySwiper = new Swiper(document.querySelector('.light-swiper'));
複製程式碼
除此之外，還需要一些簡單的CSS樣式：
.light-swiper {
overflow: hidden;
position: relative;
}
.swiper-wrap {
overflow: hidden;
position: relative;
}
.swipe-item {
float: left;
width: 100%;
position: relative;
}
複製程式碼
自定義配置選項
滑動可以選擇第二個引數: [options]
| 引數 | 說明 | 型別 | 預設值 |
|---|---|---|---|
| startSlide | 預設的索引位置 | int | 0 |
| speed | 動畫執行時間 | int | 300 |
| auto | 是否自動播放, 傳入切換時間 | int | - |
| continuous | 是否迴圈播放 | boolean | false |
| width | 單個swipe的寬度，一般在需要預覽多個swipe時使用 | int | - |
| offset | 距離左邊的偏移量，一般在需要預覽多個swipe時使用 | int | - |
| disableScroll | 禁用Swiper的所有觸控事件 | boolean | false |
| stopPropagation | 阻止事件冒泡 | boolean | false |
| callback | 事件回撥 | Function | (index, currentEl) |
| transitionEnd | 動畫完成事件 | Function | (index, currentEl) |
| swiping | 使用已刷過的全寬度的百分比（0-1）進行滑動時呼叫 | Function | (percent) |
例子
const mySwiper = new Swiper(document.querySelector('.light-swiper'), {
width: 310,
offset: 30,
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
複製程式碼
API
light-swiper暴露了以下可以控制滑動的API：
prev() 滑動到上一頁
next() 滑動到下一頁
getPos() 返回當前位置的索引
getNumSlides() 返回滑塊總數量
kill() 銷燬當前Swiper例項