{"_id":"@champkeh/slide-page","_rev":"1-8aca5032682b18f8b417a3744f49b2e3","name":"@champkeh/slide-page","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@champkeh/slide-page","version":"0.0.1","description":"SlidePage.js is a simple and universal to use library to create fullscreen scrolling websites","main":"dist/slidePage.umd.js","module":"dist/slidePage.esm.js","directories":{"example":"examples"},"scripts":{"build":"rollup --config","server":"node scripts/server.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/champkeh/slidePage.git"},"bugs":{"url":"https://github.com/champkeh/slidePage/issues"},"keywords":["fullscreen","slide","h5","fullpage"],"author":{"name":"champkeh","email":"champion.ge@gmail.com"},"license":"MIT","homepage":"https://github.com/champkeh/slidePage","devDependencies":{"@babel/core":"^7.4.5","@babel/preset-env":"^7.1.6","@babel/runtime":"^7.1.5","eslint":"^6.7.2","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.0","express":"^4.16.3","rollup":"^2.41.0","rollup-plugin-babel":"^4.0.3"},"gitHead":"6b2cf02707b8e2bd7ebe9d3b0a2c3cc4b415f754","_id":"@champkeh/slide-page@0.0.1","_nodeVersion":"12.16.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-2AX/jObD0PY4g6BQOJjo+AY6R9wiEUy3k3D5yLeH/QfaugQX2yJl6uNxT0z5oVNM/EteHvNhKrhjnHf+a+xZfA==","shasum":"88f2e75c0f5709ba36131101cbfd72d3991b2cdc","tarball":"https://registry.npmjs.org/@champkeh/slide-page/-/slide-page-0.0.1.tgz","fileCount":8,"unpackedSize":85940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR0c8CRA9TVsSAnZWagAAXrMP/RxPHECXR33WNAUDe+ik\nLyZNF//7Xb3NGE17x35DlEviu1MhJtbJ/uEXvoOi4Hg7VdyvTxMf18kcxd1O\npHBDP8AMXJ3xz3TYfoWv7/ACHc/R+S6mYfhY14zZ9DNpaPdVWlMsjqrKJiMN\noH6SV4rjgfVv8MVaJZjOnQBeovVi+hXZjODAUv1/PNufj5DIH1wUghkdF88P\nbRp4k3BlOX3Q5pbrl+kU0CXLrHgCIbq+Brj7vSy+GHijfnVb7wTFXesHPjOy\nnUe8vyiS5fJZTL9KpMbQGxXvsZj5r2MlY6mywjT2Osh4UxN9bK7/B4TuPhe5\nqoR4Teht3k9tuRJEXpnrO/4FO7pGz1KYeJhD5+RGZWbc27zLRuTe4CKBwPYK\nw573mtKqgG1R6h2s7ojMasD8UPhAqFapEra/OEGYJ/YjnDV55NCUMdJKu2N/\nnK4lg463Zf2wbJLIliB8cyb0AlsVGibdLCodd1X4NJqWGOyXgW7xCaBUadaB\nWX4Jq7kMDz5lMev1DrFafS/5Bd1XOM0rRxNFMRp8dw9D/xs4bG4dBdN628tv\nU9lLDSN3aeSVciESdMaQ59zOQ/W+et3GD5m9M5HKaRQF6NH6JslR344tO7XW\nvLBlcpzlSJyFs81HZtl9LrVIqaU/YW5IBZk5ZxTglIi8eZ7OVZlY832IpUWb\nkmE1\r\n=//by\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcxzH/B/PIfFvQJFa16Vz88QYfxBuDn8ooU6g4XZMgXAiBbA0KfCg+OqAaL89qFdtyJ3oV4d8O9AjaFtYtBtZ3+/w=="}]},"_npmUser":{"name":"champkeh","email":"champion.ge@gmail.com"},"maintainers":[{"name":"champkeh","email":"champion.ge@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slide-page_0.0.1_1615284027618_0.2883541702158583"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-09T10:00:27.577Z","0.0.1":"2021-03-09T10:00:27.969Z","modified":"2022-04-04T22:30:00.615Z"},"maintainers":[{"name":"champkeh","email":"champion.ge@gmail.com"}],"description":"SlidePage.js is a simple and universal to use library to create fullscreen scrolling websites","homepage":"https://github.com/champkeh/slidePage","keywords":["fullscreen","slide","h5","fullpage"],"repository":{"type":"git","url":"git+ssh://git@github.com/champkeh/slidePage.git"},"author":{"name":"champkeh","email":"champion.ge@gmail.com"},"bugs":{"url":"https://github.com/champkeh/slidePage/issues"},"license":"MIT","readme":"# SlidePage\n\n> 说明：\n> 该仓库是fork自 https://github.com/lipten/slidePage, 为了适合自己的项目fork了一份进行魔改\n\n### 魔改的内容\n- 采用现代js库(npm包)的封装方法\n- 非标准的`mousewheel`事件替换为标准的`wheel`事件\n- 采用`rollup`代替`glup`作为构建工具\n\n### Demo:\n* [simple](http://lipten.link/projects/slidePage3/examples/simple.html)\n* [animated](http://lipten.link/projects/slidePage3/examples/animated.html)\n* [scroll](http://lipten.link/projects/slidePage3/examples/scroll.html) \n* [custom](http://lipten.link/projects/slidePage3/examples/custom.html) \n* [dragMode](http://lipten.link/projects/slidePage3/examples/drag.html) \n* [fullFeatured](http://lipten.link/projects/slidePage3/examples/fullFeatured.html)\n\n### Featured\nSlidePage 特别适合主流前端框架开发，无任何依赖库，Gzip压缩后仅有2.4k, 接口符合插件具有的初始化、销毁、重载的方法，适配PC和移动端，可实现内容超出屏幕滚动、手动播放动画、动态更新等特色功能，具体查看完整示例: [fullFeatured](http://lipten.link/projects/slidePage3/examples/fullFeatured.html)\n\n### Documentation:\n* [Usage](#usage)\n  * [Install slidePage](#install-slidepage)\n  * [Including files](#including-files)\n  * [Required HTML structure](#required-html-structure)\n  * [Initialization](#initialization)\n* [Configuration](#configuration)\n* [Options](#options)\n* [Using Animation](#using-animation)\n* [Methods](#methods)\n  * [slidepage.slideNext()](#slidepageslidenext)\n  * [slidepage.slidePrev()](#slidepageslideprev)\n  * [slidepage.slideTo(page)](#slidepageslidetopage)\n  * [slidepage.slideFile(page)](#slidepageslidefilepage)\n  * [slidepage.destroy()](#slidepagedestroy)\n  * [slidepage.update()](#slidepageupdate)\n* [Troubleshooting(常见问题汇总)](https://github.com/lipten/slidePage/wiki/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB)\n\n\n## Usage\n\n### Including files\n```\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/gh/lipten/slidePage/dist/slidePage.min.css\">\n\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/lipten/slidePage/dist/slidePage.min.js\"></script>\n```\n\n### Required HTML structure\n```\n<div class=\"slide-container\" id=\"slide-container\">\n    <div class=\"slide-page page1\">\n      <div class=\"container\">\n        <h2>page1</h2>\n        <p>page1 content</p>\n      </div>\n    </div>\n    <div class=\"slide-page page2\">\n      <div class=\"container\">\n        <h2>page2</h2>\n        <p>page2 content</p>\n      </div>\n    </div>\n</div>\n```\n您可以查看完整examples里的html文件结构 [fullFeatured.html](https://github.com/lipten/slidePage/blob/master/examples/fullFeatured.html)\n\n### Initialization\n```\nnew slidePage()\n```\n\n## Configuration\n```\nvar slidepage = new slidePage({\n    slideContainer: '#slide-container',\n    slidePages: '.slide-item',\n    page: 1,\n    refresh: true,\n    dragMode: false,\n    useWheel: true,\n    useSwipe: true,\n    useAnimation : true,\n\n    // Events\n    before: function(origin,direction,target){},\n    after: function(origin,direction,target){},\n });\n```\n## Options\n> 在slidePage中，page指的是每一次全屏滚动的一屏，也可以理解为每一屏对应的页码，必须是1以上的整数\n\n<table>\n  <thead>\n  <tr>\n    <th>name</th>\n    <th>type</th>\n    <th>default</th>\n    <th>description</th>\n  </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>slideContainer</td>\n      <td>String|Element</td>\n      <td>'.slide-container'</td>\n      <td>指定slidePage要运行的容器选择器或元素</td>\n    </tr>\n    <tr>\n      <td>slidePages</td>\n      <td>String|NodeList|HTMLCollection</td>\n      <td>'.slide-page'</td>\n      <td>指定`slideContainer`容器里每个page的选择器或元素</td>\n    </tr>\n    <tr>\n      <td>page</td>\n      <td>Number</td>\n      <td>1</td>\n      <td>首次进入的page页码</td>\n    </tr>\n    <tr>\n      <td>dragMode</td>\n      <td>Boolean</td>\n      <td>false</td>\n      <td>💡移动端开启触控拖动滑屏模式(此功能还在测试阶段)，默认为false，前提是`useSwipe: true`</td>\n    </tr>\n    <tr>\n      <td>useAnimation</td>\n      <td>Boolean</td>\n      <td>true</td>\n      <td>是否开启动画</td>\n    </tr>\n    <tr>\n      <td>refresh</td>\n      <td>Boolean</td>\n      <td>true</td>\n      <td>每次滚动进入是否重新执行动画</td>\n    </tr>\n    <tr>\n      <td>useWheel</td>\n      <td>Boolean</td>\n      <td>true</td>\n      <td>是否开启鼠标滚轮滑动</td>\n    </tr>\n    <tr>\n      <td>useSwipe</td>\n      <td>Boolean</td>\n      <td>true</td>\n      <td>是否开启移动端触控滑动</td>\n    </tr>\n  </tbody>\n</table>\n\n## Events\n\n<table>\n  <thead>\n  <tr>\n    <th>name</th>\n    <th>description</th>\n  </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>before</td>\n      <td>每次全屏滚动前触发事件，回调三个参数(origin, direction, target)，分别是滚动前的page序号、方向('next'|'prev')、滚动后的page序号</td>\n    </tr>\n    <tr>\n      <td>after</td>\n      <td>每次全屏滚动后触发事件，回调三个参数(origin, direction, target)，参数释义同上</td>\n    </tr>\n  </tbody>\n</table>\n\n## Using Animation\n\n> 为了方便示例用animate.css，动画效果可以自己实现\n\n### Include animate.css\n```\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css\">\n```\n\n### HTML structure\n```\n<div class=\"step animated fadeIn\" data-delay=\"1300\"></div>;\n```\n在想要动画控制的元素上加上step类，并加上css动画类名即可使用动画，data-delay属性控制动画延时播放(默认为100毫秒);\n\n#### 手动触发动画\n\n```\n<div class=\"lazy animated fadeIn\"></div>\n```\n1. 在想要手动播放动画的元素上加上lazy类，并加上css动画类名即可使用动画，可以加上data-delay使触发时再延时播放;\n2. 通过slidepage.slideFire(page)指定某一页的lazy动画触发播放。\n\n## Drag Mode\n> 最新加入的拖动滑屏模式，在实例化时传入配置`dragMode: true`，即可开启，此功能目前为测试阶段，请酌情使用。\n\n现已加入Demo系列豪华套餐：\n* [dragMode](http://lipten.link/projects/slidePage3/examples/drag.html) \n\n需要注意的是，为了滑动松手后的动画体验更好，记得在你的项目里设置过渡动画类`.slide-container .slide-page.transition`，调整过渡函数和时长。具体查看示例代码：https://github.com/lipten/slidePage/blob/master/examples/drag.html#L13\n\n## Methods\n\n### slidepage.slideNext()\n滑动定位到下一屏\n\n### slidepage.slidePrev()\n滑动定位到上一屏\n\n### slidepage.slideTo(page)\n传入page页码，滑动定位到对应的page\n\n### slidepage.slideFire(page)\n触发对应 page 的lazy手动动画\n\n### slidepage.destroy()\n销毁当前实例，移除所有事件恢复class属性值。\n\n### slidepage.update(newSlidePages)\n当html里的page发生变化时需要执行动态更新。\n\n`newSlidePages`参数非必填，仅应对于初始化的时候`slidePages`参数传入的是`NodeList`或`HTMLCollection`时才需要在更新的时候再传一次变化后的DOM结构通知更新。\n\n> 此方法非常适合现在流行的数据驱动型框架，当模型数据驱动改变pege的排列时，执行update可以起到更新的作用，可以先看示例源码了解：[custom.html](https://github.com/lipten/slidePage/blob/master/examples/custom.html)\n\n\n## Contributing\n\n### development\n本地运行\n```\nnpm install\nnpm run server\n```\n构建\n```\nnpm run build\n```\n","readmeFilename":"README.md"}