{"_id":"@coderpradp/ng-image-slider","_rev":"10-3ec0c7d71cca7193e640d51814d3b2c1","name":"@coderpradp/ng-image-slider","dist-tags":{"latest":"21.3.0"},"versions":{"19.0.0":{"name":"@coderpradp/ng-image-slider","version":"19.0.0","keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"author":{"name":"Pradip Khadka"},"license":"MIT","_id":"@coderpradp/ng-image-slider@19.0.0","maintainers":[{"name":"coderpradp","email":"iampradyp@gmail.com"}],"homepage":"https://github.com/coderpradp/ng-image-slider","bugs":{"url":"https://github.com/coderpradp/ng-image-slider/issues"},"dist":{"shasum":"4bc0bb3febec5fa9d8319dc0a6f66fdab2de486f","tarball":"https://registry.npmjs.org/@coderpradp/ng-image-slider/-/ng-image-slider-19.0.0.tgz","fileCount":12,"integrity":"sha512-8uT9WrR4F6Eof3baOI7lQaSPIqgQpQb6jn8oB3P87yxTJi5lJ4r6wMtE2yQe0bUxiLmgclgwXaCkvs4H30nUhA==","signatures":[{"sig":"MEQCIFX/rSNWLwBrECb3eQfE33C3bjK6zCnvv3rbvV1DgbRpAiABkLFRGKqOdkzN12v3UPFqlpp+OIlCzV2ARutv4zwrsQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":267863},"module":"fesm2022/coderpradp-ng-image-slider.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/coderpradp-ng-image-slider.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"ce3fd289781925048b8e899eeb2c26aad8e6b270","typings":"index.d.ts","_npmUser":{"name":"coderpradp","actor":{"name":"coderpradp","type":"user","email":"iampradyp@gmail.com"},"email":"iampradyp@gmail.com"},"repository":{"url":"git+https://github.com/coderpradp/ng-image-slider.git","type":"git"},"_npmVersion":"10.9.2","description":"Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.","directories":{},"sideEffects":false,"_nodeVersion":"22.13.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=19.0.0","@angular/common":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-image-slider_19.0.0_1750591183348_0.5803117302592726","host":"s3://npm-registry-packages-npm-production"}},"19.0.2":{"name":"@coderpradp/ng-image-slider","version":"19.0.2","keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"author":{"name":"Pradip Khadka"},"license":"MIT","_id":"@coderpradp/ng-image-slider@19.0.2","maintainers":[{"name":"coderpradp","email":"iampradyp@gmail.com"}],"homepage":"https://github.com/coderpradp/ng-image-slider","bugs":{"url":"https://github.com/coderpradp/ng-image-slider/issues"},"dist":{"shasum":"cf46c2e026d13429fb1f9e76a686875c64af5e3a","tarball":"https://registry.npmjs.org/@coderpradp/ng-image-slider/-/ng-image-slider-19.0.2.tgz","fileCount":12,"integrity":"sha512-eg+cbvSiZYvXrzPYoAW0mwYLFiM3LsPiWvUbYZ55i1CaDjevKaMvRdmjTB5Jc88lWx8hOifgB9VKMh0F+iylNw==","signatures":[{"sig":"MEYCIQCSmJN0rZKIjDSSNnlCNHC+9DU3J9IxMH+R92JH3P4VzwIhAL8eT6JhR7Ktmxm1QlnWKhJ4Cr2NUumDK+sPPvZ4hK75","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":269700},"module":"fesm2022/coderpradp-ng-image-slider.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/coderpradp-ng-image-slider.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"152602f50100c9da10a8be07bb5915fcc0ff37b1","typings":"index.d.ts","_npmUser":{"name":"coderpradp","actor":{"name":"coderpradp","type":"user","email":"iampradyp@gmail.com"},"email":"iampradyp@gmail.com"},"repository":{"url":"git+https://github.com/coderpradp/ng-image-slider.git","type":"git"},"_npmVersion":"10.9.2","description":"Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.","directories":{},"sideEffects":false,"_nodeVersion":"22.13.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=19.0.0","@angular/common":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-image-slider_19.0.2_1750599230209_0.09572002578108751","host":"s3://npm-registry-packages-npm-production"}},"20.0.0":{"name":"@coderpradp/ng-image-slider","version":"20.0.0","keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"author":{"name":"Pradip Khadka"},"license":"MIT","_id":"@coderpradp/ng-image-slider@20.0.0","maintainers":[{"name":"coderpradp","email":"iampradyp@gmail.com"}],"homepage":"https://github.com/coderpradp/ng-image-slider","bugs":{"url":"https://github.com/coderpradp/ng-image-slider/issues"},"dist":{"shasum":"08d52b9ff98a79feaaa2a03511ac8e0c977f08f2","tarball":"https://registry.npmjs.org/@coderpradp/ng-image-slider/-/ng-image-slider-20.0.0.tgz","fileCount":6,"integrity":"sha512-W7kZo3V0KRby20Kv+P8UQZLBgNWjmOEeBiS3WD+1JQs5QGDLLHIR7FKmZRpb3T4paqg0UryQIp1W7gdNxzJuiw==","signatures":[{"sig":"MEYCIQD9r4mOO7kyfimQ6iBesBMIXPNWm1Tpp1j6F4azLJfKoAIhAJwPf9jhCFZSk6jbbSHeLzo8J/7Is7ZjFMwIuUThjPkf","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":284869},"module":"fesm2022/coderpradp-ng-image-slider.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/coderpradp-ng-image-slider.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"c6baa47cb7996737deb28ad4abc1a6f3d518b5e8","typings":"index.d.ts","_npmUser":{"name":"coderpradp","email":"iampradyp@gmail.com"},"repository":{"url":"git+https://github.com/coderpradp/ng-image-slider.git","type":"git"},"_npmVersion":"11.13.0","description":"Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.","directories":{},"sideEffects":false,"_nodeVersion":"24.16.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=20.0.0","@angular/common":">=20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-image-slider_20.0.0_1783929748704_0.9377832115004541","host":"s3://npm-registry-packages-npm-production"}},"21.0.0":{"name":"@coderpradp/ng-image-slider","version":"21.0.0","keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"author":{"name":"Pradip Khadka"},"license":"MIT","_id":"@coderpradp/ng-image-slider@21.0.0","maintainers":[{"name":"coderpradp","email":"iampradyp@gmail.com"}],"homepage":"https://github.com/coderpradp/ng-image-slider","bugs":{"url":"https://github.com/coderpradp/ng-image-slider/issues"},"dist":{"shasum":"dec168ce270b69c4f61eee3078e58629feb223fa","tarball":"https://registry.npmjs.org/@coderpradp/ng-image-slider/-/ng-image-slider-21.0.0.tgz","fileCount":6,"integrity":"sha512-9O4bOL8YutlDN2QP72rT+YVnIxVjjxrMH6dN5SgGR0z3ziUe1rTwEYTm6o5Im83IeRq5FxH4fR52tcwy0tqYnA==","signatures":[{"sig":"MEYCIQCVLVLLtqZvhGinnoIO3xS0iGyOG8VFZ45QLfWovUQNWQIhAOuhV+xrIB6SK34rVJnqjrqIxHmJr1KyMMHtW42zRvtU","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":286142},"type":"module","module":"fesm2022/coderpradp-ng-image-slider.mjs","exports":{".":{"types":"./types/coderpradp-ng-image-slider.d.ts","default":"./fesm2022/coderpradp-ng-image-slider.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"8a4b5393610038b2fb5fa8f4ea72aa4f874b40e8","typings":"types/coderpradp-ng-image-slider.d.ts","_npmUser":{"name":"coderpradp","email":"iampradyp@gmail.com"},"repository":{"url":"git+https://github.com/coderpradp/ng-image-slider.git","type":"git"},"_npmVersion":"11.13.0","description":"Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.","directories":{},"sideEffects":false,"_nodeVersion":"24.16.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=21.0.0","@angular/common":">=21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-image-slider_21.0.0_1783931862628_0.9982358791718271","host":"s3://npm-registry-packages-npm-production"}},"21.1.0":{"name":"@coderpradp/ng-image-slider","version":"21.1.0","keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"author":{"name":"Pradip Khadka"},"license":"MIT","_id":"@coderpradp/ng-image-slider@21.1.0","maintainers":[{"name":"coderpradp","email":"iampradyp@gmail.com"}],"homepage":"https://github.com/coderpradp/ng-image-slider","bugs":{"url":"https://github.com/coderpradp/ng-image-slider/issues"},"dist":{"shasum":"3399f165b26960202ea42d653f041851b2f8556d","tarball":"https://registry.npmjs.org/@coderpradp/ng-image-slider/-/ng-image-slider-21.1.0.tgz","fileCount":6,"integrity":"sha512-AS4A+q+QvAAlZTu74cVYZNZOQ23BGDLy9uW0RM5l2y9syOFKY5ni5Uq0vFFrHJXnmRDnh7AvrwupGwxmCOuiSg==","signatures":[{"sig":"MEUCIQCTSHnL5xMtNTqH7TrpRX7oUURIIsTVtimhhAgegGcynwIgX10SrGbsJs+ocP0yIYMUR1oN7CbdXM9gN/0PvKhrat0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":289462},"type":"module","module":"fesm2022/coderpradp-ng-image-slider.mjs","exports":{".":{"types":"./types/coderpradp-ng-image-slider.d.ts","default":"./fesm2022/coderpradp-ng-image-slider.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"6bd0a1430cb322bf037776fed1ecebf9e6e0acd8","typings":"types/coderpradp-ng-image-slider.d.ts","_npmUser":{"name":"coderpradp","email":"iampradyp@gmail.com"},"repository":{"url":"git+https://github.com/coderpradp/ng-image-slider.git","type":"git"},"_npmVersion":"11.13.0","description":"Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.","directories":{},"sideEffects":false,"_nodeVersion":"24.16.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=21.0.0","@angular/common":">=21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-image-slider_21.1.0_1783934628635_0.9938031356380181","host":"s3://npm-registry-packages-npm-production"}},"21.1.1":{"name":"@coderpradp/ng-image-slider","version":"21.1.1","keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"author":{"name":"Pradip Khadka"},"license":"MIT","_id":"@coderpradp/ng-image-slider@21.1.1","maintainers":[{"name":"coderpradp","email":"iampradyp@gmail.com"}],"homepage":"https://github.com/coderpradp/ng-image-slider","bugs":{"url":"https://github.com/coderpradp/ng-image-slider/issues"},"dist":{"shasum":"af743bb985d696fabf922bfa92e7b6e847bd00bc","tarball":"https://registry.npmjs.org/@coderpradp/ng-image-slider/-/ng-image-slider-21.1.1.tgz","fileCount":6,"integrity":"sha512-qrDQVko0l0cXNurwtdtNaVUEzYZrECgMKehjPpAz0S5E0Rv+FM075oa3taVRdvmm0tdKP2eeLaN2PoA3PZiKpQ==","signatures":[{"sig":"MEQCIB48PA+YILUjQIHFEQsohCNlFQa3Q+x4tjYNiIIQ5DZJAiAsI37uZqBkKkoNe6jg2TRn+mEn6E7czCHCdsXpMgVYNQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":291552},"type":"module","module":"fesm2022/coderpradp-ng-image-slider.mjs","exports":{".":{"types":"./types/coderpradp-ng-image-slider.d.ts","default":"./fesm2022/coderpradp-ng-image-slider.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"132fed9e18d04578b703cce64b391685e895d5af","typings":"types/coderpradp-ng-image-slider.d.ts","_npmUser":{"name":"coderpradp","email":"iampradyp@gmail.com"},"repository":{"url":"git+https://github.com/coderpradp/ng-image-slider.git","type":"git"},"_npmVersion":"11.13.0","description":"Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.","directories":{},"sideEffects":false,"_nodeVersion":"24.16.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=21.0.0","@angular/common":">=21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-image-slider_21.1.1_1783935051446_0.7002314076419929","host":"s3://npm-registry-packages-npm-production"}},"21.2.0":{"name":"@coderpradp/ng-image-slider","version":"21.2.0","keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"author":{"name":"Pradip Khadka"},"license":"MIT","_id":"@coderpradp/ng-image-slider@21.2.0","maintainers":[{"name":"coderpradp","email":"iampradyp@gmail.com"}],"homepage":"https://github.com/coderpradp/ng-image-slider","bugs":{"url":"https://github.com/coderpradp/ng-image-slider/issues"},"dist":{"shasum":"c286643afd047a270bc9230e5c1a9bc1298743c5","tarball":"https://registry.npmjs.org/@coderpradp/ng-image-slider/-/ng-image-slider-21.2.0.tgz","fileCount":7,"integrity":"sha512-EGqoaekJElLgVStogKpfLfSbAT5uvozjvlYxN2entPqJjNwDYqL3c7b1Asg+8U2TqudfubwYQ7QPraoTfziZ0Q==","signatures":[{"sig":"MEUCIAaAmB3oOizQrowHiffeimpWjNSd8qTLTQXEjnF7xOvbAiEAk14ShBfznL8lxwvxNYhScm89iRjP97EghcPs28lWpRw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":302712},"type":"module","module":"fesm2022/coderpradp-ng-image-slider.mjs","exports":{".":{"types":"./types/coderpradp-ng-image-slider.d.ts","default":"./fesm2022/coderpradp-ng-image-slider.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"536dae4e8dff2701611d03761eeee414b4a5b3a1","typings":"types/coderpradp-ng-image-slider.d.ts","_npmUser":{"name":"coderpradp","email":"iampradyp@gmail.com"},"repository":{"url":"git+https://github.com/coderpradp/ng-image-slider.git","type":"git"},"_npmVersion":"11.16.0","description":"Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.","directories":{},"sideEffects":false,"_nodeVersion":"24.18.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=21.0.0","@angular/common":">=21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-image-slider_21.2.0_1785244729493_0.020219581843286205","host":"s3://npm-registry-packages-npm-production"}},"21.3.0":{"name":"@coderpradp/ng-image-slider","version":"21.3.0","description":"Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.","peerDependencies":{"@angular/common":">=21.0.0","@angular/core":">=21.0.0"},"keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"author":{"name":"Pradip Khadka"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/coderpradp/ng-image-slider.git"},"homepage":"https://github.com/coderpradp/ng-image-slider","bugs":{"url":"https://github.com/coderpradp/ng-image-slider/issues"},"module":"fesm2022/coderpradp-ng-image-slider.mjs","typings":"types/coderpradp-ng-image-slider.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/coderpradp-ng-image-slider.d.ts","default":"./fesm2022/coderpradp-ng-image-slider.mjs"}},"sideEffects":false,"type":"module","dependencies":{"tslib":"^2.3.0"},"gitHead":"19ef0958c83a7102866022e8183b7dd053eebe6d","_id":"@coderpradp/ng-image-slider@21.3.0","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-FSAvQv2fgaZzXVe34udlLc7O/ltYS4hXvMxkh0yRJtfv6TF/sFVjkBxoITSSeUfTz2NgUj4RdLMqtZ6DfewZfw==","shasum":"cc59052aacead1d520c6052ae9010ae7108102d8","tarball":"https://registry.npmjs.org/@coderpradp/ng-image-slider/-/ng-image-slider-21.3.0.tgz","fileCount":7,"unpackedSize":288565,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICjWu4M8TKKiu/+sC6hbU+JbECEwrvPl0MnfFGYX/FH/AiAoKKhtl/9gdecIb0cArO1J5cppcXyPwvZrYawUMH2JzA=="}]},"_npmUser":{"name":"coderpradp","email":"iampradyp@gmail.com"},"directories":{},"maintainers":[{"name":"coderpradp","email":"iampradyp@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ng-image-slider_21.3.0_1785266717302_0.8146247504468302"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-22T11:19:43.258Z","modified":"2026-07-28T19:25:17.625Z","19.0.0":"2025-06-22T11:19:43.525Z","19.0.1":"2025-06-22T13:25:29.035Z","19.0.2":"2025-06-22T13:33:50.399Z","20.0.0":"2026-07-13T08:02:28.850Z","21.0.0":"2026-07-13T08:37:42.770Z","21.1.0":"2026-07-13T09:23:48.770Z","21.1.1":"2026-07-13T09:30:51.583Z","21.2.0":"2026-07-28T13:18:49.662Z","21.3.0":"2026-07-28T19:25:17.478Z"},"bugs":{"url":"https://github.com/coderpradp/ng-image-slider/issues"},"author":{"name":"Pradip Khadka"},"license":"MIT","homepage":"https://github.com/coderpradp/ng-image-slider","keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"repository":{"type":"git","url":"git+https://github.com/coderpradp/ng-image-slider.git"},"description":"Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.","maintainers":[{"name":"coderpradp","email":"iampradyp@gmail.com"}],"readme":"# Angular Image Slider with Lightbox\n\nAn Angular responsive image slider with lightbox popup.\nAlso support youtube and mp4 video urls.\n\n(Compatible with Angular Version: 21)\n\n## Features!\n\n- Responsive (support images width and height in both % and px)\n- captures swipes from phones and tablets\n- Compatible with Angular Universal\n- Image lightbox popup\n- captures keyboard next/previous arrow key event for lightbox image move\n- Support Images (jpeg, jpg, gif, png and Base64-String), Youtube url and MP4 video (url and Base64-String)\n- Handling runtime image arraylist changes\n\n### Demo: https://coderpradp.github.io/ng-image-slider/\n\n# Installation\n\n`npm install @coderpradp/ng-image-slider --save`\n\n# Setup :\n\n**`NgImageSliderComponent` is standalone — import it directly wherever you need it:**\n\n```typescript\nimport { Component } from '@angular/core';\nimport { NgImageSliderComponent } from '@coderpradp/ng-image-slider';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [\n    NgImageSliderComponent,\n    ...\n  ],\n  templateUrl: './app.component.html',\n})\nexport class AppComponent {}\n```\n\nStill on an `NgModule`-based app? `NgImageSliderComponent` can be added to `NgModule.imports` the\nsame way any standalone component can:\n\n```typescript\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    NgImageSliderComponent,\n    ...\n  ],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n**Add component in your template file.**\n\n```html\n<ng-image-slider [images]=\"imageObject\" #nav></ng-image-slider>\n```\n\n**ImageObject format**\n\n```typescript\nimport type { ImageObject } from '@coderpradp/ng-image-slider';\n\nimageObject: ImageObject[] = [\n  {\n    image: 'assets/img/slider/1.jpg',\n    thumbImage: 'assets/img/slider/1_min.jpeg',\n    alt: 'alt of image',\n    title: 'title of image',\n  },\n  {\n    image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image\n    thumbImage: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image\n    title: 'Image title', // Optional: You can use this key if want to show image with title\n    alt: 'Image alt', // Optional: You can use this key if want to show image with alt\n    order: 1, // Optional: if you pass this key then slider images will be arrange according @input: orderType\n  },\n];\n```\n\n**Image, Youtube and MP4 url's object format**\n\n```typescript\nimport type { ImageObject } from '@coderpradp/ng-image-slider';\n\nimageObject: ImageObject[] = [\n  {\n    video: 'https://youtu.be/6pxRHBw-k8M', // Youtube url\n  },\n  {\n    video: 'assets/video/movie.mp4', // MP4 Video url\n  },\n  {\n    video: 'assets/video/movie2.mp4',\n    posterImage: 'assets/img/slider/2_min.jpeg', // Optional: You can use this key if you want to show video poster image in slider\n    title: 'Image title',\n  },\n  {\n    image: 'assets/img/slider/1.jpg',\n    thumbImage: 'assets/img/slider/1_min.jpeg',\n    alt: 'Image alt',\n  },\n  ...\n];\n```\n\n## API Reference (optional) :\n\n| Name               | Type    | Data Type               | Description                                                                                                                                                                                                                                                                                                         | Default                               |\n| ------------------ | ------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |\n| images             | @Input  | `ImageObject[]`         | Array of image/video objects to render in the slider. See ImageObject format above.                                                                                                                                                                                                                                 | `[]`                                  |\n| fallbackImage      | @Input  | `SliderFallbackImage`   | Sets fallback image for image load errors. See fallbackImage Input format below.                                                                                                                                                                                                                                    | null                                  |\n| infinite           | @Input  | `boolean`               | Infinite sliding images if value is **true**.                                                                                                                                                                                                                                                                       | false                                 |\n| imagePopup         | @Input  | `boolean`               | Enable image lightBox popup option on slider image click.                                                                                                                                                                                                                                                           | true                                  |\n| animationSpeed     | @Input  | `number`                | By this user can set slider animation speed. Minimum value is **0.1 second** and Maximum value is **5 second**.                                                                                                                                                                                                     | 1                                     |\n| slideImage         | @Input  | `number`                | Set how many images will move on left/right arrow click.                                                                                                                                                                                                                                                            | 1                                     |\n| imageSize          | @Input  | `SliderImageSize`       | Set slider images width, height and space. space is use for set space between slider images. Pass object like `{width: '400px', height: '300px', space: 4}` or you can pass value in percentage `{width: '20%', height: '20%'}` OR set only space `{space: 4}`                                                      | `{width: 205, height: 200, space: 3}` |\n| manageImageRatio   | @Input  | `boolean`               | Show images with aspect ratio if value is `true` and set imageSize width and height on parent div                                                                                                                                                                                                                   | false                                 |\n| autoSlide          | @Input  | `AutoSlideConfig`       | Auto slide images according provided time interval. Option will work only if **infinite** option is **true**. For number data type minimum value is 1 second and Maximum value is 5 second. By object data type you can prevent auto slide stop behaviour on mouse hover event. `{interval: 2, stopOnHover: false}` | 0                                     |\n| showArrow          | @Input  | `boolean`               | Hide/Show slider arrow buttons                                                                                                                                                                                                                                                                                      | true                                  |\n| arrowKeyMove       | @Input  | `boolean`               | Disable slider and popup image left/right move on arrow key press event, if value is `false`                                                                                                                                                                                                                        | true                                  |\n| videoAutoPlay      | @Input  | `boolean`               | Auto play popup video                                                                                                                                                                                                                                                                                               | false                                 |\n| showVideoControls  | @Input  | `boolean`               | Hide video control if value is `false`                                                                                                                                                                                                                                                                              | true                                  |\n| direction          | @Input  | `SliderDirection`       | Set text direction. You can pass **rtl** / **ltr** / **auto**                                                                                                                                                                                                                                                       | ltr                                   |\n| orderType          | @Input  | `SliderOrderType`       | Arrange slider images in Ascending order by `ASC` and in Descending order by `DESC`. `order` key must be exist with image object.                                                                                                                                                                                   | ASC                                   |\n| lazyLoading        | @Input  | `boolean`               | Lazy load images and Iframe if true.                                                                                                                                                                                                                                                                                | false                                 |\n| defaultActiveImage | @Input  | `number`                | Set image as selected on load.                                                                                                                                                                                                                                                                                      | null                                  |\n| imageClick         | @Output | `number`                | Executes when click event on slider image. Return image index.                                                                                                                                                                                                                                                      | n/a                                   |\n| arrowClick         | @Output | `SliderArrowClickEvent` | Executes when click on slider left/right arrow. Returns current event name and next/previous button disabled status.                                                                                                                                                                                                | n/a                                   |\n| lightboxClose      | @Output | `void`                  | Executes when lightbox close.                                                                                                                                                                                                                                                                                       | n/a                                   |\n| lightboxArrowClick | @Output | `LightboxArrowAction`   | Executes when click on lightbox next/previous arrow.                                                                                                                                                                                                                                                                | n/a                                   |\n\n## fallbackImage Input Format\n\n```typescript\nimport type { SliderFallbackImage } from '@coderpradp/ng-image-slider';\n\nfallbackImage: SliderFallbackImage = {\n  image: './slider/mainImage.jpg',\n  thumbImage: './slider/thumbImage.jpg',\n};\n```\n\n## TypeScript types\n\nThe package exports TypeScript types for its `@Input`/`@Output` shapes — import them directly\ninstead of hand-rolling your own:\n\n```typescript\nimport type {\n  ImageObject,\n  SliderImageSize,\n  SliderFallbackImage,\n  AutoSlideConfig,\n  AutoSlideOptions,\n  SliderArrowClickEvent,\n  SliderDirection,\n  SliderOrderType,\n  SliderArrowAction,\n  LightboxArrowAction,\n} from '@coderpradp/ng-image-slider';\n```\n\n| Type                    | Used by                          | Shape                                                                                 |\n| ----------------------- | -------------------------------- | ------------------------------------------------------------------------------------- |\n| `ImageObject`           | `images` @Input                  | `{ image?, thumbImage?, title?, alt?, order?, video?, videoAutoPlay?, posterImage? }` |\n| `SliderImageSize`       | `imageSize` @Input               | `{ width?: number \\| string; height?: number \\| string; space?: number }`             |\n| `SliderFallbackImage`   | `fallbackImage` @Input           | `{ image?: string; thumbImage?: string }`                                             |\n| `AutoSlideConfig`       | `autoSlide` @Input               | `boolean \\| number \\| AutoSlideOptions`                                               |\n| `AutoSlideOptions`      | object form of `AutoSlideConfig` | `{ interval: number; stopOnHover?: boolean }`                                         |\n| `SliderDirection`       | `direction` @Input               | `'ltr' \\| 'rtl' \\| 'auto'`                                                            |\n| `SliderOrderType`       | `orderType` @Input               | `'ASC' \\| 'DESC'`                                                                     |\n| `SliderArrowAction`     | `SliderArrowClickEvent.action`   | `'next' \\| 'previous'`                                                                |\n| `LightboxArrowAction`   | `lightboxArrowClick` @Output     | `'lightbox next' \\| 'lightbox previous'`                                              |\n| `SliderArrowClickEvent` | `arrowClick` @Output             | `{ action: SliderArrowAction; prevDisable?: boolean; nextDisable?: boolean }`         |\n\n> **Note:** `direction`, `orderType`, `arrowClick`'s `action`, and `lightboxArrowClick` are\n> literal unions rather than plain `string`. Under `strictTemplates`, binding a value whose\n> declared type is `string` will not compile — annotate the field with the exported type instead,\n> e.g. `slideOrderType: SliderOrderType = 'DESC';`.\n\n## NgImageSliderService\n\n`NgImageSliderService` is also exported (`providedIn: 'root'`) — the slider uses it internally, but\nit is part of the public API if you need the same helpers:\n\n| Method                                                                       | Returns            | Description                                                                                                       |\n| ---------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- |\n| `isBase64(str: string)`                                                      | `boolean`          | Whether the string is Base64-encoded.                                                                             |\n| `base64FileExtension(str: string)`                                           | `string`           | Extracts the file extension from a `data:image/...;base64,...` string.                                            |\n| `orderArray<T extends { order?: number }>(arr, orderType?: SliderOrderType)` | `T[]`              | Sorts in place by the `order` key; `orderType` is `'ASC'` (default) or `'DESC'`. Entries without `order` go last. |\n| `isImageExist(url: string)`                                                  | `Promise<boolean>` | Resolves `true` if the image at `url` loads. Browser-only (uses `new Image()`).                                   |\n\n## Add custom navigation button\n\n```typescript\nimport { Component, viewChild } from '@angular/core';\nimport {\n  NgImageSliderComponent,\n  ImageObject,\n} from '@coderpradp/ng-image-slider';\n\n@Component({\n  selector: 'sample',\n  standalone: true,\n  imports: [NgImageSliderComponent],\n  template: `\n    <ng-image-slider [images]=\"imageObject\" #nav></ng-image-slider>\n    <button (click)=\"prevImageClick()\">Prev</button>\n    <button (click)=\"nextImageClick()\">Next</button>\n  `,\n})\nclass Sample {\n  readonly nav = viewChild<NgImageSliderComponent>('nav');\n  imageObject: ImageObject[] = [...];\n\n  prevImageClick() {\n    this.nav()?.prev();\n  }\n\n  nextImageClick() {\n    this.nav()?.next();\n  }\n}\n```\n\n## License\n\nAs Angular itself, this module is released under the permissive [MIT license](http://revolunet.mit-license.org).\n\nYour contributions and suggestions are always welcome :)\n","readmeFilename":"README.md"}