{"_id":"@afiniti/webgl-slider","_rev":"4-d8bf283ca06394e7593a2d7dd6c40de2","name":"@afiniti/webgl-slider","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@afiniti/webgl-slider","version":"0.0.1","description":"React component for webgl slider for videos and images","license":"MIT","repository":{"type":"gitlab","url":"git+https://gitlab.com/afiniti/webgl-slider.git"},"homepage":"https://gitlab.com/afiniti/webgl-slider#readme","main":"lib/cjs/","module":"lib/","keywords":["webgl-slider","react-webgl-slider","react-webgl-slider","webgl slider","react webgl slider","npm webgl slider","npm","react","parallax","package","afiniti"],"scripts":{"clean":"rimraf dist","compile":"rollup -c"},"peerDependencies":{"prop-types":"^15.6.0","react":"^17.0.1","react-dom":"^17.0.1","gsap":"^3.0.0"},"devDependencies":{"@babel/plugin-proposal-class-properties":"^7.12.1","node-sass":"^4.14.1","@babel/cli":"^7.11.6","@babel/core":"^7.11.6","@babel/preset-env":"^7.11.5","@babel/preset-react":"^7.10.4","@rollup/plugin-commonjs":"^15.1.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^9.0.0","@svgr/rollup":"^5.4.0","postcss-import":"^12.0.1","rollup":"^2.28.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-copy":"^3.3.0","rollup-plugin-includepaths":"^0.2.4","rollup-plugin-peer-deps-external":"^2.2.3","rollup-plugin-postcss":"^3.1.8","rollup-plugin-terser":"^7.0.2"},"gitHead":"8d2e9f7536805f516196f9822d74721d5b6d8b08","bugs":{"url":"https://gitlab.com/afiniti/webgl-slider/issues"},"_id":"@afiniti/webgl-slider@0.0.1","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-u61E6STYeHJZn6lIAxA9iyIQjzp4Km8Fw8mIFmEdvVyR2BxBUuyNFBDzIV4iSEjCH8cpg/LER4Zm4EchLHsJGQ==","shasum":"760950de4ff8eae52a907d937f221379b7d20f7a","tarball":"https://registry.npmjs.org/@afiniti/webgl-slider/-/webgl-slider-0.0.1.tgz","fileCount":5,"unpackedSize":328438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQK1xCRA9TVsSAnZWagAAZv8P/RCI6fXwhcRrl67SNOpk\nsQ+RUSTQFCyG4//q7kj643wqiAKsf4A9JXG2QUj+aAMAahFppwRBNF2po3zm\nGs9Vo/hjaFqlNhE4PsmIhAn1YTgevaGlGN0ZVXZLra0WGlrzd0w9punUBm0Y\nfLuh3gdJsoErdd5XSVxoCbAo3UaIttRjqc7Zh/KDudgjEQLhTubCRFP/lFea\nXGbtP7O/ppJis+etjB6FRMd2NtebruiTWUVVEUjPuV6JqCLqBoia8+VLObeJ\njdgU9xRf9gUrXo9oCpBEIakGh+Ges9AMY9HnROcSifJVzHn2TcOmCLg1n1dR\nzQp2pPBerUOHqEH5SHcRXo8qjMyfzSZnKCOYxLVF0Tx18u6YLsoGUWmThQYX\nVzOCY3IpGCAz8ygpehJwh5qYnR5t1tRnaD1NvZC/LxHFbzydkYAwqS/Lb4hn\n5Kpc0JoMiRsLrG7fgku9IcBwTSzkpjWWS2pHr22nLYSlZ2bAT00WaUQtjbUw\nrik4RpWZxI5Zh/tBVQplv5LY7LtnGcllNmY/fpfjizfe0SL6Mlb3740gWJf8\nkqxD9IGKhaY3/AuuYLcAhsIFPWQ11UXYCrjIZuDo3wKUcdEqL39AUjJ7AygU\nUIu4u75erfpV6F9TLBHp5u1hilpXNVC7qNdb11soPSSNfXqAQovDizKIFa2N\nqaUg\r\n=YaPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWIF6FqvZpmz8Zop28bOo8sL90blQXDJIqEw3i400lOAiEA09hVp+XyXdiysGdOH3MnVJgAZgyu15F5o3kNufKSJ4s="}]},"_npmUser":{"name":"neha.akram","email":"irfan.ali@afiniti.com"},"directories":{},"maintainers":[{"name":"neha.akram","email":"irfan.ali@afiniti.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webgl-slider_0.0.1_1614851440737_0.08992486395394272"},"_hasShrinkwrap":false},"0.0.2":{"name":"@afiniti/webgl-slider","version":"0.0.2","description":"React component for webgl slider for videos and images","license":"MIT","repository":{"type":"gitlab","url":"git+https://gitlab.com/afiniti/webgl-slider.git"},"homepage":"https://gitlab.com/afiniti/webgl-slider#readme","main":"lib/cjs/","module":"lib/","keywords":["webgl-slider","react-webgl-slider","react-webgl-slider","webgl slider","react webgl slider","react webgl video slider","react webgl video carousel","react webgl picture slider","react webgl image slider","react webgl image carousel","npm webgl slider","npm","react","parallax","package","afiniti"],"scripts":{"clean":"rimraf dist","compile":"rollup -c"},"peerDependencies":{"prop-types":"^15.6.0","react":"^17.0.1","react-dom":"^17.0.1","gsap":"^3.0.0"},"devDependencies":{"@babel/plugin-proposal-class-properties":"^7.12.1","node-sass":"^4.14.1","@babel/cli":"^7.11.6","@babel/core":"^7.11.6","@babel/preset-env":"^7.11.5","@babel/preset-react":"^7.10.4","@rollup/plugin-commonjs":"^15.1.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^9.0.0","@svgr/rollup":"^5.4.0","postcss-import":"^12.0.1","rollup":"^2.28.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-copy":"^3.3.0","rollup-plugin-includepaths":"^0.2.4","rollup-plugin-peer-deps-external":"^2.2.3","rollup-plugin-postcss":"^3.1.8","rollup-plugin-terser":"^7.0.2"},"gitHead":"eb9052a2e3177813031c8d74aa5c62ab068e4069","bugs":{"url":"https://gitlab.com/afiniti/webgl-slider/issues"},"_id":"@afiniti/webgl-slider@0.0.2","_nodeVersion":"12.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-CWoHpV+6UBsh2ThJEYq/Twabcc9lW1FDM3tbg4SNqnTlrBe74mIoLXoQ4x+ktv8bjv0oX2ONTJk4N2XNt+LCPg==","shasum":"53a8ed7b1c9a2b10003f6e675e6376438cb71e14","tarball":"https://registry.npmjs.org/@afiniti/webgl-slider/-/webgl-slider-0.0.2.tgz","fileCount":5,"unpackedSize":330664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSNQ6CRA9TVsSAnZWagAAxL4P/j0wJQVnQZcITfWbu9Jw\nUlQD877cmjMoUlizcpyNNHFpnqicFyrq3hL2d8KvSaQBXhFzaW3IcBE7Ekzl\nP5tJhJUWMFO/IhfoLGmDTt+BI50wD7wyKOBkPpjPUO/X3tctKlsSP5FS2MZt\nzdUatU4kk99StFaZzv0f7m7lV1wVEcDHCa8uTDp1VL7+q5MaDkfG46XvuzN6\ndGDzlgit1OhmX9j3knJgUKhPpgqc8ofeGWxVC5vgBEQt4kKzWMgX0FyoMLDd\n4AW+fLef34SlcMHjjjD5GN8rxG2ZbU+IFFCk2Wq5c5Oy4jTo+BoR9Yv7669k\ngjiriYr5GB1fzjXeG/BmghDOJRBquWYYoBizsd3Irm0LNY90C33ITvAkj4x/\nigY5S53PHOC4u6knlc1JFeNyO4h0K4ppzf6l+EB+7yt4tQDO7VzuzS7Fnj4A\nkJvIXTzSuXjd8cXpdszP6tvQSjQoOFjqc3COhP/Hg7yrZIzuImMaYJC70BBg\nVSH+QyzpzR2+VYmXmqzzGs/4gvA3fFBZjsKgsZ3SCZXvpgacmHQu0CnD7wyl\n1b0MLIkNQ93Ok/HECzzDl2M4sj3O1tNJkjmB8H0LFyQ9mBy2IQzrujwfR45g\nqiTq0mDFagcy2nRhYy1EZ25KIHAR03YfCve1pBDRnoGG8NDVdpqVDcLfgPY6\n65Sb\r\n=qr6Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQHT+fvUpr+JEeDfnIdng8xi4JquDbeseRBVmxnBewWAiBJdafFgb7x7OME2otKsUdeqw+qXaqhi/igPMkpvINFZA=="}]},"_npmUser":{"name":"neha.akram","email":"irfan.ali@afiniti.com"},"directories":{},"maintainers":[{"name":"neha.akram","email":"irfan.ali@afiniti.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webgl-slider_0.0.2_1615385658076_0.9217396021234041"},"_hasShrinkwrap":false},"0.0.3":{"name":"@afiniti/webgl-slider","version":"0.0.3","description":"React component for webgl slider for videos and images","license":"MIT","repository":{"type":"gitlab","url":"git+https://gitlab.com/afiniti/webgl-slider.git"},"homepage":"https://gitlab.com/afiniti/webgl-slider#readme","main":"lib/cjs/","module":"lib/","keywords":["webgl-slider","react-webgl-slider","react-webgl-slider","webgl slider","react webgl slider","react webgl video slider","react webgl video carousel","react webgl picture slider","react webgl image slider","react webgl image carousel","npm webgl slider","npm","react","parallax","package","afiniti"],"scripts":{"clean":"rimraf dist","compile":"rollup -c"},"peerDependencies":{"prop-types":"^15.6.0","react":"^17.0.1","react-dom":"^17.0.1","gsap":"^3.0.0"},"devDependencies":{"@babel/plugin-proposal-class-properties":"^7.12.1","node-sass":"^4.14.1","@babel/cli":"^7.11.6","@babel/core":"^7.11.6","@babel/preset-env":"^7.11.5","@babel/preset-react":"^7.10.4","@rollup/plugin-commonjs":"^15.1.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^9.0.0","@svgr/rollup":"^5.4.0","postcss-import":"^12.0.1","rollup":"^2.28.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-copy":"^3.3.0","rollup-plugin-includepaths":"^0.2.4","rollup-plugin-peer-deps-external":"^2.2.3","rollup-plugin-postcss":"^3.1.8","rollup-plugin-terser":"^7.0.2"},"gitHead":"a9ddb882d0b47762fa9bc0e217de91d62407fded","bugs":{"url":"https://gitlab.com/afiniti/webgl-slider/issues"},"_id":"@afiniti/webgl-slider@0.0.3","_nodeVersion":"12.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-G305pvFK+mxN1fbI//MsLUJR2YwZSz9VazNb2/AnzVao4TtgUnPwGGPhvWxxe7j3NH7n69P89XIghn92QeYmmw==","shasum":"b0ed56ce2b2e9e36de63fe4b55919c3ae8690815","tarball":"https://registry.npmjs.org/@afiniti/webgl-slider/-/webgl-slider-0.0.3.tgz","fileCount":5,"unpackedSize":331701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSarZCRA9TVsSAnZWagAAkroP/jT3/PS303F7wS73wN61\nTiPjSiGeT+2dJJ4DZX7iZ/ak7uHItAZA01n6Fce6O6ZAh2rEsZQp6ZFj2HvR\nTVINUSJJqvTYNIddb1FjcxNEgndRprOM54GdMJ9ZpZ3GmBSYhdtDOmppHfGH\njUXbzwf37vFutOOfw8jnZzpPTsDRt040auWBUVPYba/fN7JUcabGkSdYBqG7\nOEXaSBS+SU9YeJlcjEXljuo92imq+LP00rOG/zSu2kcIf8G2vs7s/HBGjMYs\n85k8wwL83iyu5fAjfpkwIWTn+bytIcBoFO/QVIB7w9GXytIWuO+xbyd6MGH7\n8+UL8F3su3YaG7kd9G4wp+n3DwogXkKVn4lzGelipMEPoIy2XuMcfNXCy2Yi\n8QE4l7+s26UKSfUNPPEgBw0yl5n0rLrE40FUyzVJqvAosYhIqRch+lApTV1x\nSQkF1G28oiXWcs/OT0V13eSo8jC+RoqisoMC9ZU9UlU+HyTW93ZAQOJqwTrt\neVAfnPX5Ku369CrZEf8XTRXHgX+rQZiMaxdTIV8tWTF5frgOw9ql5CV946ys\nF9JGbW6K0tZJCD4nhq6F/lGpNiWj7SF6NwOvFK5ayJjn9g+4hiuK1IlTyBCE\nJZKxhQzHEkWyvL3CSMZifxVUq5h8cfssRtN9nERxKyRYkj8KBZr5R0MOQhC4\nUNEp\r\n=XwTE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtPvG18WBTwyRLRZ49FQwVLTDp0a0BBp+7qXoNfg53NwIhAOZGlDiRxPH5+DsilsA6WIABJFIlud3RmxvL6sV6GaMU"}]},"_npmUser":{"name":"neha.akram","email":"irfan.ali@afiniti.com"},"directories":{},"maintainers":[{"name":"neha.akram","email":"irfan.ali@afiniti.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webgl-slider_0.0.3_1615440600493_0.9130257770589991"},"_hasShrinkwrap":false},"0.0.4":{"name":"@afiniti/webgl-slider","version":"0.0.4","description":"React component for webgl slider for videos and images","license":"MIT","repository":{"type":"gitlab","url":"git+https://gitlab.com/afiniti/webgl-slider.git"},"homepage":"https://gitlab.com/afiniti/webgl-slider#readme","main":"lib/cjs/","module":"lib/","keywords":["webgl-slider","react-webgl-slider","react-webgl-slider","webgl slider","react webgl slider","react webgl video slider","react webgl video carousel","react webgl picture slider","react webgl image slider","react webgl image carousel","npm webgl slider","npm","react","parallax","package","afiniti"],"scripts":{"clean":"rimraf dist","compile":"rollup -c"},"peerDependencies":{"prop-types":"^15.6.0","react":"^17.0.1","react-dom":"^17.0.1","gsap":"^3.0.0"},"devDependencies":{"@babel/plugin-proposal-class-properties":"^7.12.1","node-sass":"^4.14.1","@babel/cli":"^7.11.6","@babel/core":"^7.11.6","@babel/preset-env":"^7.11.5","@babel/preset-react":"^7.10.4","@rollup/plugin-commonjs":"^15.1.0","@rollup/plugin-image":"^2.0.5","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^9.0.0","@svgr/rollup":"^5.4.0","postcss-import":"^12.0.1","rollup":"^2.28.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-copy":"^3.3.0","rollup-plugin-includepaths":"^0.2.4","rollup-plugin-peer-deps-external":"^2.2.3","rollup-plugin-postcss":"^3.1.8","rollup-plugin-terser":"^7.0.2"},"gitHead":"fec207864d36d30cdd6fc1b03ff10df187d14247","bugs":{"url":"https://gitlab.com/afiniti/webgl-slider/issues"},"_id":"@afiniti/webgl-slider@0.0.4","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-RjdiYdFHhZQblloALYneghpsnqmRFzhRvuCWujDzl0yVrcRCGgv7FLBoyraozTtdHHCjgXpotaSuUerqx+Subw==","shasum":"2654eeb77120190238c1ce19e0153e6485258e1e","tarball":"https://registry.npmjs.org/@afiniti/webgl-slider/-/webgl-slider-0.0.4.tgz","fileCount":5,"unpackedSize":334620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq5jGCRA9TVsSAnZWagAAGjkQAI9wpvHdiHYEWgOUK371\nq+PYpN7Oer5+aHk3L/Mow7pe3tvW7X+Wkm9FW0YSibOquUYilosF+j2UDK00\nA9A+B4XQWjvbQkUFMpVUj7YBKfhVvvP4+sU/7MeVPLIUsjWEXeeHtElbTWtG\nOI6yM06mN8UYvKiGSlu30HmZQ4qUTZbrCsDVzRM/oTUfhJih7CywZt6gJGab\n1ZqWeQtTvTvFaScZSkpkWwiY+PYAYsFx9KwV3g1b3/JBfeFF7En1niZH2mUb\nao19fi49mrXby5SwOt4RXEluef//VpnGDxdQm21CZvnb4P7xTP1QUmQPx2/r\nDGd8DxCEaX+aKaaH0TwLz+3AYSG2Wwq8HSr1zh5xUA+QQl0qMTU9ugqmJkUI\n70srx4cN93KPsteqTQuI/livaGlJ/pScKbiwguA5LW0tIBm6pZulFptpwmnT\nsjerQ1RDQOA41qPhVg9eyhmEQo1gYYRduR6HFMaiOENHpYguRXWhWiMou9Ft\nUpFuPsv/Rf8F7KJFQk1YMb9ti60++HofC8kUP/i0E33ne2Xyx0kUFsl3LY4z\nRxcreqHI68mqYDo0all3OTb8+h7VNcutwMHGi+7x0wqDPPu3rvo+0NOrj7N5\nY0Oae5GQQrwG0iHRgIN61PlCnbM/SSClZzydGrRNZOwCc3SQKiCPDia0VbEn\nwP/u\r\n=5Ojt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcBVGxFccMagXWHtcUtqIDxWFAcAjHAkHsL5JDUtrurAiEAnj6bHg8h9/VlvoUMA5T0M7JUNgv9D7wg/oj1dYgMUQk="}]},"_npmUser":{"name":"neha.akram","email":"irfan.ali@afiniti.com"},"directories":{},"maintainers":[{"name":"neha.akram","email":"irfan.ali@afiniti.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webgl-slider_0.0.4_1621858501386_0.927444181567993"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-04T09:50:40.498Z","0.0.1":"2021-03-04T09:50:40.912Z","modified":"2022-04-04T11:50:52.808Z","0.0.2":"2021-03-10T14:14:18.326Z","0.0.3":"2021-03-11T05:30:00.701Z","0.0.4":"2021-05-24T12:15:01.642Z"},"maintainers":[{"name":"neha.akram","email":"irfan.ali@afiniti.com"}],"description":"React component for webgl slider for videos and images","homepage":"https://gitlab.com/afiniti/webgl-slider#readme","keywords":["webgl-slider","react-webgl-slider","react-webgl-slider","webgl slider","react webgl slider","react webgl video slider","react webgl video carousel","react webgl picture slider","react webgl image slider","react webgl image carousel","npm webgl slider","npm","react","parallax","package","afiniti"],"repository":{"type":"gitlab","url":"git+https://gitlab.com/afiniti/webgl-slider.git"},"bugs":{"url":"https://gitlab.com/afiniti/webgl-slider/issues"},"license":"MIT","readme":"# @afiniti/webgl-slider\r\n\r\n### Description\r\n\r\nReact slider component for images and videos. It provides option for webgl\r\neffects for sliding animations.\r\n\r\n### Requirements\r\n\r\nCurrently, works only for images and videos. \r\n\r\n### Installation\r\n\r\nnpm i @afiniti/webgl-slider\r\n\r\n### Features\r\n\r\n- Fullscreen slider\r\n- Handles both images and videos.\r\n- Webgl transition effects.\r\n- Multiple callbacks for as much customization as possible\r\n\r\n### Props\r\n\r\n| Name | Type | Description |\r\n| ------------------- | -------- | ----------------------------------------------------------------------------- |\r\n| `fps` | `number` | In order to keep performance in mind if it is a video carousel then use your desired fps to keep memory and cpu usage as less as possible. Defaults to null it will collect browser refresh rate. |\r\n| `data` | `object` | Image or video sources in specified format. |\r\n| `effect` | `number` | Currently 8 different types of webgl effects are available pass number between 1 to 8. |\r\n| `iterations` | `number` | Number of iterations in case of autoplay. Defaults to `infinite/null` |\r\n| `autoplay` | `bool` | Autoplay slider or not. Defaults to `true` |\r\n| `autoplaySpeed` | `number` | Set autoplay slide speed . Defaults to `3000` 3 seconds |\r\n| `slideSpeed` | `float` | Set slide effect speed. Defaults to `1.6` 1.6 seconds |\r\n| `scrollToSlide` | `bool` | Change slides on mouse/trackpad scroll. Defaults to `false`. |\r\n| `initialSlideIndex` | `number` | Optional value in pixels if fixed height needs to be added to image elements. |\r\n\r\n### Methods\r\n\r\n| Name | Args | Description |\r\n| --------------------- | ------------ | ----------------------------------------------------------------------- |\r\n| `pause` | `none` | Pause the autoplay. |\r\n| `resume` | `none` | Start the autoplay. |\r\n| `pauseRender` | `none` | Pause requestanimationframe to save battery and memory. |\r\n| `resumeRender` | `none` | Resume requestanimationframe. |\r\n| `SlideNext` | `none` | Go to the next slide. |\r\n| `slidePrevious` | `none` | Go to the previous slide. |\r\n| `updateScrollToSlide` | `true/false` | Enable/Disable slides Change on mouse/trackpad scroll |\r\n\r\n### Callbacks\r\n\r\n| Name | Description |\r\n| --------------------- | ----------------------------------------------------------------------- |\r\n| `onSlideStart` | returns currentIndex, nextIndex, direction, Triggers on slide start |\r\n| `onSlideComplete` | returns nothing, Trigger when slide ends |\r\n| `webglSliderApi` | return ref of the slider to give access to all available methods |\r\n\r\n### Example Usage\r\n\r\nThe package can be integrated inside a react component as follows:\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport WebglSlider from '@afiniti/webgl-slider';\r\n\r\nconst data={\r\n {Picturehandle: \"https://images.unsplash.com/photo-1603993097397-89c963e325c7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80\"},\r\n {Picturehandle: \"https://images.unsplash.com/photo-1618580987827-8d73bdd196aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80\"},\r\n {Picturehandle: \"https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1489&q=80\"}\r\n};\r\n\r\nOR\r\n\r\nconst data={\r\n {videoHandle: \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"},\r\n {videoHandle: \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"},\r\n {videoHandle: \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"}\r\n};\r\n\r\n// you can get public test videos from here: https://gist.github.com/jsturgis/3b19447b304616f18657\r\n\r\nconst Component = () => {\r\n return (\r\n {\r\n console.log(currentIndex, nextIndex, direction);\r\n }}\r\n onSlideComplete={() => {\r\n console.log('complete');\r\n }}\r\n webglSliderApi={ref => {\r\n // get access to slider's methods\r\n console.log('ref', ref);\r\n }}\r\n />\r\n );\r\n};\r\n\r\nexport default Component;\r\n```\r\n","readmeFilename":"README.md"}