Tiny-Swiper 稳定版发布啦—— 2kb 兼容 SwiperJS 的移动端轮播库

WeRDyin 7月前 81

介绍

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。

哈哈,稳定版的公告先发到 V 站,欢迎提 issue 交流想法。BTW,预祝 V2EX 社区的各位新年快乐!

最新回复 (0)
  • 游客
    2
返回