哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
激活码开源项目地址:https://gitee.com/yudu233/java-active
功能在我们日常开发中常见。秉持着“有轮子,就不用造”的原则,我们大概率会使用轮子,而且找的都是非常优秀的轮子。其中,大名鼎鼎的就是其中之一。
必须承认:SwiperJS 是一个功能丰富的轮播库,且有着优秀的交互效果。当今天的主角不是它。
我们在开发实践中,只用到了SwiperJS的几个功能。大家知道SwiperJS包有多大吗?SwiperJS 的 minimum 版本文件达到了 140kb,采用gzip压缩后也有 35kb。如果只是简单的几个功能,使用 SwiperJS 就显得大材小用了。
如果使用 SwiperJS 的 ES module 版本,我们还需要调整构建配置或者 Polyfill。当未使用构建工具时,我们不得不引入整个 SwiperJS。试想一下,在大多数情况下,简单的页面或者 mobile 端的轮播效果都只用其核心功能实现且不需要引入额外插件。
如果你也和我一样有上述需求时,那么或许是更好的选择。
Tiny-Swiper简介和优势
是一个轻量,兼容IE7、IE8,3D、支持移动端的轮播图插件库。它支持丰富的插件,能按需导入,提供原生般的用户体验。
最大的优势就在上,核心库压缩后仅4kb。同时,它兼容SwiperJS API。你会用SwiperJS,就会用,上手难度几乎为零。
此外,还有个比较方便的特点,就是。你可以先到官网看下它提供的Demos。只要符合你的要求,就可以直接用。
安装和使用
我们可以从 CDN 引入 js 文件。
<script src="https://unpkg.com/tiny-swiper@latest"></script>
或者可以使用 npm 或 yarn 来进行安装。
npm install tiny-swiper --save// oryarn add tiny-swiper
在使用上,几乎和SwiperJS没啥差别!先是页面HTML标签素。
<!-- 轮播容器 --><div class="swiper-container"> <!-- 定义一个 wrapper --> <div class="swiper-wrapper"> <!-- 需要切换的幻灯片 --> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> <div class="swiper-slide">4</div> </div> <!-- 如果需要分页 --> <div class="swiper-pagination"></div></div>
接着是初始化使用。只需更改 import 语句就能将 SwiperJS 替换为即可。
import Swiper from 'tiny-swiper'const swiper = new Swiper('#swiper');
WebStorm激活2023.2.2 WebStorm激活2023.2.2
2024最新激活全家桶教程,稳定运行到2099年,请移步至置顶文章:https://sigusoft.com/99576.html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处:https://sigusoft.com/118213.html