介绍SwiperJS是一个功能丰富的轮播库,具有出色的交互效果。但其最小版本文件达到140kb,gzip压缩后为35kb。如果使用ES模块版本,我们还需要调整构建配置或Polyfill。当不使用构建工具时,我们不得不引入整个SwiperJS。并且,在大多数情况下,移动端的轮播效果可以通过其核心功能实现,无需引入额外的插件。当你像我一样有以上需求时,Tiny-Swiper或许是更好的选择。核心库压缩后只有2kb。与SwiperJSAPI兼容。良好的滑动体验。插件支持测试用例覆盖。在这里https://github.com/joe223/tiny-swiper??基本用法看一个例子:importSwiperfrom'tiny-swiper'constswiper=newSwiper('#swiper')就是这样,你甚至可以只是你可以通过更改导入语句将SwiperJS替换为Tiny-Swiper。介绍插件让我们尝试使用图像延迟加载插件:newSwiper('#swiper',{lazyload:{loadPrevNext:false,loadPrevNextAmount:1,loadOnTransitionStart:false,elementClass:'swiper-lazy',loadingClass:'swiper-lazy-loading',loadedClass:'swiper-lazy-loaded',preloaderClass:'swiper-lazy-preloader'}})您也可以使用它,仅用于单个实例:importSwiperfrom'tiny-swiper'importSwiperPluginLazyloadfrom'tiny-swiper/lib/modules/lazyload.min。js'constmySwiper=newSwiper('#swiper',{Plugins:[SwiperPluginLazyload],lazyload:{loadPrevNext:false,loadPrevNextAmount:1,loadOnTransitionStart:false,elementClass:'swiper-lazy',loadingClass:'swiper-lazy-加载',loadedClass:'swiper-lazy-loaded',preloaderClass:'swiper-lazy-preloader'}})下面是示例效果,更多示例请看这里https://joe223.com/tiny-swiper
