{"_id":"before-after-slider","_rev":"2-9385ce194bbd0c666790200d1e86cdc5","name":"before-after-slider","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"before-after-slider","version":"1.0.0","description":"BeforeAfterSlider is a lightweight Javascript library without any dependencies, to compare images in before/after view.轻量级JS库，轻松简单实现图片Before/After效果。","main":"./dist/slider.bundle.js","directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","dev":"NODE_ENV=development webpack --config webpack.config.js --mode=development -w","build":"NODE_ENV=production webpack --config webpack.config.js --mode=production","lint":"eslint ."},"repository":{"type":"git","url":"git+https://github.com/VincentTV/before-after-slider.git"},"keywords":["javascript","before","after","slider","before","after","imgages","simple","no","dependencies"],"author":{"name":"vincentfong"},"license":"MIT","bugs":{"url":"https://github.com/VincentTV/before-after-slider/issues"},"homepage":"https://github.com/VincentTV/before-after-slider#readme","devDependencies":{"@babel/core":"^7.5.5","@babel/plugin-transform-runtime":"^7.5.5","@babel/polyfill":"^7.4.4","@babel/preset-env":"^7.5.5","babel-loader":"^8.0.6","css-loader":"^3.2.0","eslint":"^6.2.2","eslint-friendly-formatter":"^4.0.1","eslint-loader":"^3.0.0","eslint-plugin-import":"^2.18.2","node-sass":"^4.12.0","sass-loader":"^8.0.0","style-loader":"^1.0.0","uglifyjs-webpack-plugin":"^2.2.0","webpack":"^4.39.3","webpack-cli":"^3.3.7"},"gitHead":"e8650b063f9c22547b0ded15da13bba8f19f2861","_id":"before-after-slider@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"vincentfong","email":"vincefong1018@gmail.com"},"dist":{"integrity":"sha512-36x9fA/LEHQzEMV3ZtjRdcbz1K6l7y90BMWkdLJI8zW3+zjfxDd37lKxrNiSPBxwpXUPwul3/61dKu+btHVO/A==","shasum":"a3ad78a8ff78e24b69ee00d7843685bd30fcdb06","tarball":"https://registry.npmjs.org/before-after-slider/-/before-after-slider-1.0.0.tgz","fileCount":15,"unpackedSize":553223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaUlpCRA9TVsSAnZWagAACQkQAI3lzOf19chEmHwTolB0\nb7e8QgGeI/pMaf4GfKAIZy/9u88RvMY+OQhrjqDZRvCgGURy6DQIISGAN/bn\nX3ijMEvseuVUCe4kUE4O8tKO4ayv6Gf6NZKfbPJmstMhRlDy7qsI6uah6R3i\ny8rcNPfjLA5f/XxtkbPKmjqYugX4sbpG/7EatjUFR/KaJPECTSP8t1riJK2M\ngzZwiru8y6hkX6DdqfEM/165Abuxr5CP8zbOPi2w2T3q17/EexevZffkzcGy\nZDS/IdFAua2CF4pkRLMBJ/19ZbSlb/AZ/NY7QhFeMHrqBvolFJmNbxR2NEPa\n6dkvii5zpivPHrROSWuFGssfhhINkIrHV/YxiWHnJ5k2nD1h2ZhNf4nQR6q5\n70Tn9JcNpJXJvqL+z4tfYSk0K0KoFId2E2U08wTzN23iVZnRSeFcRLBUrsQq\nbDXNdxatQbJ/ejJDPhP/O6KRNEn5nPn+DpWQrqBlBplJ1b4HFNVZ/7OQJ8Ug\nNoUN4dw9PdSZPQOX/drQeXcFVVGe9WTgVRdL4POigur46ag2JHzM8Mcfex3I\nKm2bFHHRbGzfm/3DFr9jG45qWb8J+VkIWTpyCeRYZiCRAucdbrNTV2782mSh\nUbTed/WRjO13Vy6VfAIwtZHFXqtQwyNLOsv+t5qJ/j5z8lvMwmxDc+63P6ce\n0qtI\r\n=7aD+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoneQyw4oJn3qJc5Au4a6qANHP4FgTfrIZArL4za8mSAIhAKFz6eXtGhgiwQV4+1LrKr9SsoXyGdts5t/cgmSL56ZD"}]},"maintainers":[{"name":"vincentfong","email":"vincefong1018@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/before-after-slider_1.0.0_1567181160872_0.7288775319836382"},"_hasShrinkwrap":false},"1.0.1":{"name":"before-after-slider","version":"1.0.1","description":"BeforeAfterSlider is a lightweight Javascript library without any dependencies, to compare images in before/after view.轻量级JS库，轻松简单实现图片Before/After效果。","main":"./dist/slider.bundle.js","directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","dev":"NODE_ENV=development webpack --config webpack.config.js --mode=development -w","build":"NODE_ENV=production webpack --config webpack.config.js --mode=production","lint":"eslint ."},"repository":{"type":"git","url":"git+https://github.com/VincentTV/before-after-slider.git"},"keywords":["javascript","before","after","slider","before","after","imgages","simple","no","dependencies"],"author":{"name":"vincentfong"},"license":"MIT","bugs":{"url":"https://github.com/VincentTV/before-after-slider/issues"},"homepage":"https://github.com/VincentTV/before-after-slider#readme","devDependencies":{"@babel/core":"^7.5.5","@babel/plugin-transform-runtime":"^7.5.5","@babel/polyfill":"^7.4.4","@babel/preset-env":"^7.5.5","babel-loader":"^8.0.6","css-loader":"^3.2.0","eslint":"^6.2.2","eslint-friendly-formatter":"^4.0.1","eslint-loader":"^3.0.0","eslint-plugin-import":"^2.18.2","node-sass":"^4.12.0","sass-loader":"^8.0.0","style-loader":"^1.0.0","uglifyjs-webpack-plugin":"^2.2.0","webpack":"^4.39.3","webpack-cli":"^3.3.7"},"gitHead":"c19f5ac62d195fded7194d41ad5cedc06c4f6ae1","_id":"before-after-slider@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"vincentfong","email":"vincefong1018@gmail.com"},"dist":{"integrity":"sha512-vaLklfdV6hcRZCCnDkmVR8RSiAN/Eam2GU/CPN9xRtU7Al4EyjyxFiuecyM/mzZnY4LneQVnBabWmkrAdt0s4Q==","shasum":"3e515d7b42dffe23b9ecc8d8b32fef2f0da19a72","tarball":"https://registry.npmjs.org/before-after-slider/-/before-after-slider-1.0.1.tgz","fileCount":14,"unpackedSize":57646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaYSZCRA9TVsSAnZWagAAjQEQAI3dmk7y6p5aG7Iv/nlY\nHIQIUzU13tehIUUiOIhkUR6r5gvBZiBvkKia/l6IYhENDIs9z0pqYEbStcB4\nkXwPxogp7/vwV35AaeJHqctRgr3PI7dL07mQ4gxQbESK8J8vofPpFO0eCu5l\nEe3i2HlikNHS0ntcPZnP09Pp+SMgTbAmOAnlUecAOM+rhkTLIsl03cMFmXbr\nKtXkiH3Vm/HPxtctzgvaugUafA2ZyxQzjb8WePr825nFBNX6vuv82LgBQGHs\nmjN2mXsUDfPAS8+Dk27JgG7YH8ndOgYmW/fvdQAePaqwMrQLQG3DZCLZ4F34\nbKOS0RzJ9FP4r+G7EX8v8wmVey2TJtVG8IeCwrsGWfHQVC0L/JTZl5iei1M0\nGQdNSOPJljIms88aqVRoZwNCK9l0kBhPlqbDOvGVoM7mBLbQBQ1j7mmbHVMO\nI8fviFjHGY4JLjevEK0Kfs9caG4PBB0zCmjsf5nLhYEzwcnHxmKViVUDHZPL\n030B40swHNgQwk5jqWhAQIRBJifzKEmMVdJuOt5nqc9IkkWP8xoxPuggJspZ\n7ymC9Aafbkrkjc9ENYcCinYkkVTQ42Gv3azlG9uUrPDWdC0zGMpj6IHAOxHL\n1yZ7c4TqMoosZQ6Xs1I57vmWpLnPurnaKmtT9fvz8m4ATja+JtcsVZL8Nd2W\nFAhJ\r\n=jEyH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqyBhVxLM4xFAODOPhH8jRozZNYxyXHsiOWMNqmjP7tAIgeRKs3IfHwiB/GGfo5QHSfsHiCywRp+k4rmZ7RRY3nR8="}]},"maintainers":[{"name":"vincentfong","email":"vincefong1018@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/before-after-slider_1.0.1_1567196312505_0.48419998429655986"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-30T16:06:00.675Z","1.0.0":"2019-08-30T16:06:01.186Z","modified":"2022-04-11T17:25:19.160Z","1.0.1":"2019-08-30T20:18:32.623Z"},"maintainers":[{"name":"vincentfong","email":"vincefong1018@gmail.com"}],"description":"BeforeAfterSlider is a lightweight Javascript library without any dependencies, to compare images in before/after view.轻量级JS库，轻松简单实现图片Before/After效果。","homepage":"https://github.com/VincentTV/before-after-slider#readme","keywords":["javascript","before","after","slider","before","after","imgages","simple","no","dependencies"],"repository":{"type":"git","url":"git+https://github.com/VincentTV/before-after-slider.git"},"author":{"name":"vincentfong"},"bugs":{"url":"https://github.com/VincentTV/before-after-slider/issues"},"license":"MIT","readme":"# BeforeAfterSlider\n\n![](https://img.shields.io/badge/language-ES6-yellow.svg) [![NPM Version](https://img.shields.io/npm/v/before-after-slider.svg)](https://www.npmjs.com/package/before-after-slider) [![LICENSE](https://img.shields.io/npm/l/@eteplus/typeof.svg)](https://github.com/VincentTV/before-after-slider/blob/master/LICENSE) [![](https://img.shields.io/badge/Blog-vincef0ng.cn-brightgreen.svg)](https://vincef0ng.cn)\n\n###### [中文 README](README-zh_CN.md)\n\nBeforeAfterSlider is a lightweight Javascript library without any dependencies, to compare images in before/after view.\n\n- Support mousemove & touchmove.\n- Lightweight, only 9KB.\n- Adaptive width.\n- Custom image, size & slider etc.\n- Adaptive centering without any CSS.\n- API simple and easy to use.\n\n![](https://cdn.jsdelivr.net/gh/VincentTV/CDN@master/post/before-after-slider/slider.gif)\n\n## Demo\nOnline demo is available on the [Github page](https://vincenttv.github.io/before-after-slider/example).\n\n***\n\n## Getting Started\n\n* Support:\n    * Direct `<script>` include.\n    * NPM install.\n    * Compatible ES6(ES2015) ,CommonJS & AMD modules.\n\n### Direct `<script>` include\n\nCDN:\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/before-after-slider@1.0.0/dist/slider.bundle.js\"></script>\n```\n\nIf you use ES Modules, you can include by this：\n```html\n<script type=\"module\">\n  import SliderBar from \"https://cdn.jsdelivr.net/npm/before-after-slider@1.0.0/dist/slider.bundle.js\";\n</script>\n```\n\nUsing:\n```html\n<div id=\"mySlider\"></div>\n\n<script>\n  new SliderBar({\n    el: '#mySlider',            // The container, required\n    beforeImg: './before.jpg',  // before image, required\n    afterImg: './after.jpg',    // after image, required\n    width: \"90%\",               // slide-wrap width, default 100%\n    height: \"400px\",            // slide-wrap height, default image-height\n    line: false,                 // Dividing line, default true\n    lineColor: \"rgba(0,0,0,0.5)\" // Dividing line color, default rgba(0,0,0,0.5)\n  });\n</script>\n```\n\n\n### NPM install\n\n```shell\nnpm install before-after-slider --save\n```\n\n**Vue for example**\n\n```html\n<template>\n  <div id=\"app\">\n    <!-- container -->\n    <div id=\"mySlider\"></div>\n  </div>\n</template>\n\n<script>\nimport SliderBar from 'before-after-slider'; // import\nexport default {\n  name: 'app',\n  mounted() {\n    // new SliderBar({options});\n    new SliderBar({\n      el: '#mySlider',\n      beforeImg: './before.jpg',\n      afterImg: './after.jpg'\n    });\n  }\n}\n</script>\n```\n\n## Options\n\n| Option        | Type     | defalut             | Description                     |\n| :------------ | :------- | :------------------ | :------------------------------ |\n| el            | String   | required            | The container, \"#sliderId\"      |\n| beforeImg     | String   | required            | before-image URL                |\n| afterImg      | String   | required            | after-image URL                 |\n| width         | String   | '100%'              | slide-wrap width,(%,px,em,rem)  |\n| height        | String   | none                | slide-wrap height               |\n| line          | Boolean  | true                | Dividing line                   |\n| lineColor     | String   | 'rgba(0, 0, 0, .5)' | Dividing line color             |\n\n## By the way\n\n**Make sure the two images are the same size.**\n\n**🤪AND Welcome to visit my blog.🤪 [https://vincef0ng.cn](https://vincef0ng.cn/)**\n\n## How to Contribute\n\nAnyone and everyone is welcome to contribute to this project. The best way to start is by checking our [open issues](https://github.com/VincentTV/before-after-slider/issues),[submit a new issues](https://github.com/VincentTV/before-after-slider/issues/new?labels=bug) or [feature request](https://github.com/VincentTV/before-after-slider/issues/new?labels=enhancement), participate in discussions, upvote or downvote the issues you like or dislike.\n\n## License\n\n[**The MIT License**](http://opensource.org/licenses/MIT).","readmeFilename":"README.md"}