輕量級滑塊Swiper外掛釋出（僅3kb）

SimonZhang發表於2019-02-21

Light-Swiper

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

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

Git倉庫

如果覺得有用的話，歡迎star~

預覽

輕量級滑塊Swiper外掛釋出（僅3kb）

預覽

安裝

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
  • …

相關文章