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。

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