Tiny-Swiper —— 2kb 兼容 SwiperJS 的移动端轮播库

介绍

SwiperJS 是一个功能丰富的轮播库，且有着优秀的交互效果。但是它的 minimum 版本文件达到了 140kb，采用gzip压缩后也有 35kb，如果使用 ES module 版本，我们也需要调整构建配置或者 Polyfill。当未使用构建工具时，我们不得不引入整个 SwiperJS。并且，在大多数情况下，mobile 端的轮播效果都可以用其核心功能实现且不需要引入额外插件。

当你也和我一样有上述需求时，Tiny-Swiper 或许是更好的选择

• 核心库压缩后仅2kb
• 兼容SwiperJS API
• 良好的滑动体验
• 插件支持
• 测试用例覆盖

如何使用

完整文档

查看详细文档及插件列表请点击这里 https://github.com/joe223/tiny-swiper ✨✨

基本用法

来看一个示例：

import Swiper from 'tiny-swiper'

const swiper = new Swiper('#swiper')

就这样，你甚至可以只需更改 import 语句就能将 SwiperJS 替换为 Tiny-Swiper。

引入插件

我们再试试使用图片懒加载插件：

import Swiper from 'tiny-swiper'
import SwiperPluginLazyload from 'tiny-swiper/lib/modules/lazyload.min.js'

Swiper.use([ SwiperPluginLazyload ])

const mySwiper = new Swiper('#swiper', {
    lazyload: {
        loadPrevNext: false,
        loadPrevNextAmount: 1,
        loadOnTransitionStart: false,
        elementClass: 'swiper-lazy',
        loadingClass: 'swiper-lazy-loading',
        loadedClass: 'swiper-lazy-loaded',
        preloaderClass: 'swiper-lazy-preloader'
    }
})

你也可以这么使用，只对单个实例生效：

import Swiper from 'tiny-swiper'
import SwiperPluginLazyload from 'tiny-swiper/lib/modules/lazyload.min.js'

const mySwiper = new Swiper('#swiper', {
    Plugins: [ SwiperPluginLazyload ],
    lazyload: {
        loadPrevNext: false,
        loadPrevNextAmount: 1,
        loadOnTransitionStart: false,
        elementClass: 'swiper-lazy',
        loadingClass: 'swiper-lazy-loading',
        loadedClass: 'swiper-lazy-loaded',
        preloaderClass: 'swiper-lazy-preloader'
    }
})

以下是示例效果，更多示例请前往此处 https://joe223.com/tiny-swiper。