{"_id":"col-slider","_rev":"29-4ad305c03041d74c60056733f22cf230","name":"col-slider","dist-tags":{"latest":"1.2.0"},"versions":{"1.1.1":{"name":"col-slider","version":"1.1.1","description":"slide image or content block in frame divided by column around the center view","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["slide","slide","column","col-slide","column","slider","col","slider"],"author":{"name":"Dainb_"},"license":"ISC","gitHead":"18b24be4589c1a47acbf049e9f2d5f2b262fddaa","_id":"col-slider@1.1.1","_nodeVersion":"14.17.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-7pS5iGRQDRwYU2tpMB57PBhKGBErqwImK8z6ImIYx20qsRRVi8x/tQ8VidiJJ0KaoAkIGtxBUriPC5jZ6JdRsw==","shasum":"f7406225d641f348dbf81618aa04008b99c2d26d","tarball":"https://registry.npmjs.org/col-slider/-/col-slider-1.1.1.tgz","fileCount":3,"unpackedSize":15614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxVKvCRA9TVsSAnZWagAAyfIP/jJPPC+Z8LUDnsAsuX97\nVtmDc9Kz55+J/TJ0gsxXfflfpa4dkR+Be7ChLUUSa056LeY89bwsWo9ZLQSp\n7D9w/KMrB91CWQGoI18oCF2VhSdMFWVKHRzH3RaX3BanyO/7CFWIyuV96+CG\n9WluSpSliePCye9NP1dhrIcZbp5xfeAcyE4+qPfnYACiTN9cLvdk3o7gYM2s\nV1xz7jLxbTQbtJ8yVhBmxW9ffjtmDyYsL4FCHdTtMEL8vuSf/+sfGtS9UWmm\nXXz9+SURspoi67cK8tEHtfKs62LhByAukRVCLqLrH9wEW3GpQxDWhHeeavdy\n71vHTy9mECLMO5bYvot3hzMgjFAIX6GPpMnHQybHhL22rne3KLc8fhpsGNyn\nmrOgMd/DcuCxyhGdt0SUnK+Dl7CQ/pE05M2V3yH/WtKpSKIaxZOCkQOpQS0W\n0hng3JGhuIiZxCyxWb+Rf0wtXUHb1S1GXlFUT4etyPRxZTdhCn7G5CTUiuHe\nvLquQmxvxUhsXEz7wdCHnX7Lb01phh19lZXXMs98JKPWUHoQIuCmQRzwR3hs\nMEopSrRV5yUVM1OoHOWvgVdJgkq1+Fq1QTWmTMmIsG7KVP+r8Ebvn5BIt30+\nnG9tyMpFJdxycl/D5J43TmDeABOvX6lVU40tgoh1uuEvjciynZSG7h8WLN8H\n2uXj\r\n=sEI1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDntmTuh9xil+J6X1LqC+5PAig+Yzv7pnLsTb50cOzpAiAQ5pEV5OGqXwvlW8qn9tLvO5Ort0jmtUqtjck/mrMW1A=="}]},"_npmUser":{"name":"dainb_","email":"dainb8x@gmail.com"},"directories":{},"maintainers":[{"name":"dainb_","email":"dainb8x@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/col-slider_1.1.1_1640321711452_0.5587706081514263"},"_hasShrinkwrap":false},"1.1.2":{"name":"col-slider","version":"1.1.2","description":"slide image or content block in frame divided by column around the center view","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["slide","slide images","column","col-slide","slide column style","slider","column view slider","slider horizontal"],"author":{"name":"Dainb_"},"license":"ISC","gitHead":"bdfef911f340ea90c876c0dc6726c23f81ffd149","_id":"col-slider@1.1.2","_nodeVersion":"14.17.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-vpkJq8BzNoVyIS/1hoI9oGtSMJ6RlBaqN4QZr6/fRF18lFmuPXxDabmEYJ9zK3iSbBf4OCnGIE+SpAFh7NezJg==","shasum":"21a13b6a9242110766f2482bbd4e2252a4bf7ce4","tarball":"https://registry.npmjs.org/col-slider/-/col-slider-1.1.2.tgz","fileCount":3,"unpackedSize":15932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxVoHCRA9TVsSAnZWagAAz7wP/3+n//VbUCd0WrfRzXqr\nv28uBoeIww/Wo2zr+MEifAvPALH8p71Tt/ErRt85IBlCq/dslev7vb+W2aa6\ne/jIufPg934XIpGvcutPe4LlU8Hs0thCYs9pgMb/UHA5lG47Er873n7kTvJW\nGzk5jJRy1DqvWF2ZErbiSBRrH/ZIF/OhAO6vgV5/TQe6CnN//6tYZrec7uFs\nKDFxMfbMtARC0uihiJU0LTi99FSGiQHKPPHTgWayLKLMyI5px5GkdzCRUwtJ\nw9kjZX7CGplPmxxoOuPTM5SCguoT5nzBAcnLUAxWus5ZmEW5wYi9xi0ypXML\nvaBZNf/77phe8JnOtX+zG9WZJdAEPIG0oweM1Nzabb/v44pd/HV2m8iXOrdJ\n/N/xSILl9CE0OvJvbo7U3Zo718/tW8glu1Wt936RAUThqf491ca/TnpdLa5V\n053aVnPRxEnkA/naEVZCr69+/xin9ZxdrKd3shguj+UStLzcNfDH6MaK474S\nOI15hbaOMe5EP0KNuMgTKFqFG4djM/aUBk/RQuQjGgnBYgJuVob0NBxVFujo\nQFbq0xZB0mldu8c3STcGwjAcYaksgVtqGEiuZlDhlxLdBJmqko6BfosEtL4C\nDajJ3lJkRDQc/vGIowBynsUtWheen5SmME4WG1j2X/zsWSGohLqKWpR8fRlG\nktdW\r\n=gJII\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPCD3QGmF+YfYGh5IFS2Fur5OLa0ut4cHNH+61agR+BAiBlm4EyZruPFeEBwvepOBiBmYkFOMZM+TqCkSeHoIOlKw=="}]},"_npmUser":{"name":"dainb_","email":"dainb8x@gmail.com"},"directories":{},"maintainers":[{"name":"dainb_","email":"dainb8x@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/col-slider_1.1.2_1640323590987_0.597226214819373"},"_hasShrinkwrap":false},"1.2.0":{"name":"col-slider","version":"1.2.0","description":"slide image or content block in frame divided by column around the center view","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["slide","slide images","column","col-slide","slide column style","slider","column view slider","slider horizontal"],"author":{"name":"Dainb_"},"license":"ISC","gitHead":"11526c7c240ab29c234aed8a60b037fa3084e1cd","_id":"col-slider@1.2.0","_nodeVersion":"14.17.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-AF7wCXj4xgie00ySLVzs4FmjMSGR87OZH6xup6IgUiZvYyONFVyZ5GqML05ICqLtENPvlb+8Ee4Q0gx5f+YSrw==","shasum":"f9b1590134db19a3e3383c3a51abfa0305225c31","tarball":"https://registry.npmjs.org/col-slider/-/col-slider-1.2.0.tgz","fileCount":3,"unpackedSize":17299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhz9c8CRA9TVsSAnZWagAAnM4P/1o8iNl62TqsW83Nqm7v\njiefKKrmrOXiGg+0SCqMYc+WQTXFUhZZABk6JYfoJcjiOH0CbBrrorXrDL0V\nWy1uat+IdcbdU3/HPaKaNDW/2YBNEY/xdaYuKJSHFLm7NHZDXfla2lscKYFb\nRG2kBcQ+kpuW9fu6X/Zm08dTeWWo2+OvlpV8c+LN5jlCgX+KqNqQ9130Kq3A\nmuzimcJOv2KCFbHe+j2QL1+8MvjSkt8ersasHtD1z43icC528ZE/dvUFcTsM\nz06sUIlP0PvOWOGX1cjBbP0U5agNwFr6CWmP8CgjOOGkYcP4KJZs+GizoQpi\nl5W7wkgIoyRWuv704F/7KPSl0e9S592eCCsxLqC8/Xjaw5Yzbq7e9oTfwR52\nGDlHeIRqxn8qcy0h9R+p8dREaGZDv7PL5xobh4amnI4BfsvQu0pEZ7qI2tJM\nFJhO16KEVS3lP/seajAdMKla1wWMiN//8ajMVLsKWBbdOUu6zZX+KkvlNww5\nP8UBQAWeoVaD91SMqGed3H2W8hfHhWc6RdazJwtxD1QqVkS9q+sBeQu0gh59\ncgZmAbNVqgCWgSGwOYkwX2oqFXjfos/xJq1fGnqDc2t1XwhA5/mZfpg/hkZp\n6jXc4hOiPKGvd1cUFO6kh0hU+OoP8K+n3Pp8Mp/OCx18Kd1PewqPYzVDY8uZ\nIR+B\r\n=Iyzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/xn86O1380qvrwgEE0p7ll3pr17S7UVkEhZbVlIWotQIhALK2R+GadfDK1TAy3djobo25iWcrjMasa5DHS/91ZABp"}]},"_npmUser":{"name":"dainb_","email":"dainb8x@gmail.com"},"directories":{},"maintainers":[{"name":"dainb_","email":"dainb8x@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/col-slider_1.2.0_1641011004286_0.011807394779915104"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-21T16:15:24.163Z","1.0.0":"2021-12-21T16:15:24.318Z","modified":"2022-04-27T13:27:23.488Z","1.0.1":"2021-12-21T16:37:08.279Z","1.0.2":"2021-12-21T16:41:06.876Z","1.0.3":"2021-12-21T16:42:46.882Z","1.0.4":"2021-12-21T16:44:07.885Z","1.0.5":"2021-12-21T16:45:12.527Z","1.0.6":"2021-12-21T16:45:49.604Z","1.0.7":"2021-12-21T16:49:44.142Z","1.0.8":"2021-12-22T15:01:22.671Z","1.0.9":"2021-12-22T15:15:04.357Z","1.0.10":"2021-12-22T15:23:21.692Z","1.0.11":"2021-12-23T12:13:33.077Z","1.1.0":"2021-12-23T12:14:12.749Z","1.1.1":"2021-12-24T04:55:11.595Z","1.1.2":"2021-12-24T05:26:31.135Z","1.2.0":"2022-01-01T04:23:24.416Z"},"maintainers":[{"name":"dainb_","email":"dainb8x@gmail.com"}],"description":"slide image or content block in frame divided by column around the center view","keywords":["slide","slide images","column","col-slide","slide column style","slider","column view slider","slider horizontal"],"author":{"name":"Dainb_"},"license":"ISC","readme":"### The package is present images by slide image in frame divided by column around the center view\r\n   ![test col-slider package](https://live.staticflickr.com/65535/51761145941_091d74543c.jpg)\r\n### Usage    \r\n1. import { colSlider } from \"col-slider\"\r\n2. Get array image\r\n    ```\r\n    const images = [{src: \"img url\"}]\r\n    ```\r\n    i. Item is object has src property\r\n3. call function with important params then set parent element use class name or id\r\n    ```\r\n    colSlider({\r\n        slides: images\r\n    }).append('.parentClassName');\r\n    ```\r\n4. In web application: User can click/touch down and drag horizontal to move on the left/right\r\n5. Happy codding!!!\r\n\r\n> Demo in React app\r\n```\r\nimport React, { useState, useEffect } from 'react';\r\nimport './App.css';\r\nimport { colSlider } from 'col-slider';\r\n\r\nfunction App() {\r\n    return (\r\n        <div className=\"App\">\r\n        <header className=\"App-header\">\r\n            <MainBody />\r\n        </header>\r\n        </div>\r\n    );\r\n}\r\n\r\nexport default App;\r\n\r\nfunction MainBody() {\r\n    useEffect(() => {\r\n        const imgs = [\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' }\r\n        ];\r\n        colSlider({\r\n        slides: imgs,\r\n        mainWidth: '75%' //, viewWidth: 800\r\n        }).append('.dnbBody');\r\n    });\r\n    return (\r\n        <div className=\"dnbBody\">\r\n        <h2>Dainb demo col-slider</h2>\r\n        </div>\r\n    );\r\n}\r\n\r\n```\r\n\r\n> Version 1.2.0 - output active index in function onDragEnd\r\n```\r\n//import React, { useState, useEffect } from 'react';\r\nfunction MainBody() {\r\n  const [index, setIndex] = useState(0);\r\n\r\n  useEffect(() => {\r\n    const imgs = [\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },\r\n            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' }\r\n        ];\r\n    colSlider({\r\n      slides: imgs, \r\n      mainWidth: '75%'\r\n    }).append('.dnbBody').onDragEnd(function(_index){\r\n      setIndex(_index);\r\n    });\r\n  });\r\n  return (\r\n    <div className=\"dnbBody\">\r\n      {console.log(index)}\r\n      <h2>Dainb demo col-slider</h2>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n[![Demo col-slider in React App](https://img.youtube.com/vi/G27LJT9HlbA/0.jpg)](https://www.youtube.com/watch?v=G27LJT9HlbA)\r\n\r\n### Source code [Github/col-slider](https://github.com/front-end-2021/npm-pkg/tree/main/col-slider)\r\n\r\n##### The version 1.2.0 (output active index in function onDragEnd)\r\n##### The version 1.1.2 (allow mainWidth undefined)\r\n##### The version 1.1.1 (mainWidth is string or number)","readmeFilename":"README.md"}