輕量級滑塊Swiper插件發佈（僅3kb）

Light-Swiper

專一於移動端、輕量級Swiper原生插件（3kb gziped）。觸摸事件基於element，不影響頁面的觸摸事件（如右滑返回上一頁）

重構於Swipe，實現自定義swipe寬度、偏移量、無限輪播、事件複製等功能，體驗更加流暢

Git倉庫

若是以爲有用的話，歡迎star~

預覽

預覽

安裝

npm install light-swiper
// or
yarn add light-swiper
複製代碼

或者經過script標籤的形式引入

<script src="./swiper.min.js"></script>
複製代碼

如今，你能夠使用全局變量lightSwiper

用法

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實例

兼容性

Swipe如今兼容全部瀏覽器，包括IE7 +。 Swipe最適合支持CSS變換和觸摸的設備，但也能夠在沒有這些設備的狀況下使用。 一些輔助方法肯定觸摸和CSS轉換支持並相應地選擇適當的動畫方法。

誰在用Swipe

• CNN
• Craigslist
• Airbnb
• NHL
• …