Tiny-Swiper —— 超轻量、基于插件、按需引入的强大轮播库距离 1.0 稳定版发布到现在快一年啦. 在波折的

距离 1.0 稳定版发布到现在快一年啦.

在波折的 2020 年里我彻底重构了 Tiny-Swiper 的核心模块，现在它完美地支持 loop/freeMode 配置项，同时提供更加丰富的 API 和插件，这使得我们可以实现其他复杂炫酷的效果。

查看示例请前往 tiny-swiper.joe223.com/docs/demo/

另外重新设计了 LOGO (看起来还不错吧🤪 )

目前发布的版本为 2.0.0-alpha.4，可能存在一些小毛病。期待大家的反馈！！

介绍

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

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

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

如何使用

完整文档

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

基本用法

来看一个示例：

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'
    }
})

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

欢迎提 issue 交流想法。BTW，预祝大家新年快乐！