{"_id":"@ausy_gl/ng-image-slider","name":"@ausy_gl/ng-image-slider","dist-tags":{"latest":"9.0.1"},"versions":{"9.0.1":{"name":"@ausy_gl/ng-image-slider","version":"9.0.1","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":"^18.0.0","@angular/core":"^18.0.0"},"keywords":["Angular","Angular image slider","Angular video slider","Angular Carousel","responsive slider","slideshow","carousel","slider"],"author":{"name":"Sanjay V","email":"skumarverma45@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/sanjayV/ng-image-slider.git"},"homepage":"https://github.com/sanjayV/ng-image-slider","bugs":{"url":"https://github.com/sanjayV/ng-image-slider/issues"},"module":"fesm2022/ng-image-slider.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/ng-image-slider.mjs","esm":"./esm2022/ng-image-slider.mjs","default":"./fesm2022/ng-image-slider.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"main":"index.js","directories":{"lib":"lib"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_id":"@ausy_gl/ng-image-slider@9.0.1","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-+S7thGCEkyDGXCeZhmBzB82mmkbF7yNjqhhoacxeMBY8EQMx87CFHf8MAtTSXXt39KgWJEwZjpkFZodmJoNaQg==","shasum":"ca81fa8887b9dde2a30c4990684ab2eb9239de5c","tarball":"https://registry.npmjs.org/@ausy_gl/ng-image-slider/-/ng-image-slider-9.0.1.tgz","fileCount":19,"unpackedSize":505330,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpg0DWVrrkxldAt65gTyVafW6sE8pNA4k0/whIwux3UgIhALi66A0mNQX36Xxu+viafNP7ewHoksj/PlLHAJp1j5P0"}]},"_npmUser":{"name":"ausy_gl","email":"DL_TMA_INTERNET_GL@randstaddigital.fr"},"maintainers":[{"name":"ausy_gl","email":"DL_TMA_INTERNET_GL@randstaddigital.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-image-slider_9.0.1_1721654592555_0.5590911723733119"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-22T13:23:12.443Z","9.0.1":"2024-07-22T13:23:12.803Z","modified":"2024-07-22T13:23:13.088Z"},"maintainers":[{"name":"ausy_gl","email":"DL_TMA_INTERNET_GL@randstaddigital.fr"}],"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.","homepage":"https://github.com/sanjayV/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/sanjayV/ng-image-slider.git"},"author":{"name":"Sanjay V","email":"skumarverma45@gmail.com"},"bugs":{"url":"https://github.com/sanjayV/ng-image-slider/issues"},"license":"MIT","readme":"# Angular Image Slider with Lightbox\r\n\r\nAn Angular responsive image slider with lightbox popup.\r\nAlso support youtube and mp4 video urls.\r\n\r\n(Compatible with Angular Version: 14)\r\n\r\n## Features!\r\n\r\n  - Responsive (support images width and height in both % and px)\r\n  - captures swipes from phones and tablets\r\n  - Compatible with Angular Universal\r\n  - Image lightbox popup\r\n  - captures keyboard next/previous arrow key event for lightbox image move\r\n  - Support Images (jpeg, jpg, gif, png and Base64-String), Youtube url and MP4 video (url and Base64-String)\r\n  - Handling runtime image arraylist changes\r\n\r\n### Demo: https://sanjayv.github.io/ng-image-slider/\r\n##### code example:\r\n##### Images: https://stackblitz.com/edit/ng-image-slider-demo\r\n##### video: https://stackblitz.com/edit/ng-image-slider-video-demo\r\n\r\n\r\n# Installation\r\n`npm install ng-image-slider --save`\r\n\r\n# Setup :\r\n\r\n**Import module in your `app.module.ts`:**\r\n```typescript\r\nimport { NgImageSliderModule } from 'ng-image-slider';\r\n...\r\n\r\n@NgModule({\r\n    declarations: [\r\n        AppComponent\r\n    ],\r\n    imports: [\r\n        NgImageSliderModule,\r\n        ...\r\n    ],\r\n    providers: [],\r\n    bootstrap: [AppComponent]\r\n})\r\n\r\nexport class AppModule {\r\n}\r\n\r\n```\r\n\r\n**Add component in your template file.**\r\n```html\r\n<ng-image-slider [images]=\"imageObject\" #nav></ng-image-slider>\r\n```\r\n\r\n**ImageObject format**\r\n```js\r\nimageObject: Array<object> = [{\r\n        image: 'assets/img/slider/1.jpg',\r\n        thumbImage: 'assets/img/slider/1_min.jpeg',\r\n        alt: 'alt of image',\r\n        title: 'title of image'\r\n    }, {\r\n        image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image\r\n        thumbImage: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image\r\n        title: 'Image title', //Optional: You can use this key if want to show image with title\r\n        alt: 'Image alt', //Optional: You can use this key if want to show image with alt\r\n        order: 1 //Optional: if you pass this key then slider images will be arrange according @input: slideOrderType\r\n    }\r\n];\r\n```\r\n\r\n**Image, Youtube and MP4 url's object format**\r\n ```js\r\nimageObject: Array<object> = [{\r\n        video: 'https://youtu.be/6pxRHBw-k8M' // Youtube url\r\n    },\r\n\t{\r\n\t\tvideo: 'assets/video/movie.mp4', // MP4 Video url\r\n\t},\r\n\t{\r\n\t\tvideo: 'assets/video/movie2.mp4',\r\n        posterImage: 'assets/img/slider/2_min.jpeg', //Optional: You can use this key if you want to show video poster image in slider\r\n        title: 'Image title'\r\n    },\r\n\t{\r\n\t\timage: 'assets/img/slider/1.jpg',\r\n        thumbImage: 'assets/img/slider/1_min.jpeg',\r\n        alt: 'Image alt'\r\n\t}\r\n    ...\r\n];\r\n```\r\n\r\n#### **Note :\r\nFor angular version 8 or less, use `\"skipLibCheck\": true` in `tsconfig.json` for prevent **ambient context** issue.\r\n```js\r\n\"compilerOptions\": {\r\n    \"skipLibCheck\": true\r\n}\r\n```\r\n\r\n## API Reference (optional) :\r\n\r\n| Name | Type | Data Type | Description | Default |\r\n|------|------|-----------|-------------|---------|\r\n| infinite | @Input  | boolean   | Infinite sliding images if value is **true**. | false |\r\n| imagePopup | @Input  | boolean | Enable image lightBox popup option on slider image click. | true |\r\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 |\r\n| slideImage | @Input | number | Set how many images will move on left/right arrow click. | 1 |\r\n| imageSize | @Input | object | 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}` |\r\n| manageImageRatio | @Input | boolean | Show images with aspect ratio if value is `true` and set imageSize width and height on parent div | false |\r\n| autoSlide | @Input | number/boolean/object | 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 |\r\n| showArrow | @Input | boolean | Hide/Show slider arrow buttons | true |\r\n| arrowKeyMove | @Input | boolean | Disable slider and popup image left/right move on arrow key press event, if value is `false`  | true |\r\n| videoAutoPlay | @Input | boolean | Auto play popup video | false |\r\n| showVideoControls | @Input | boolean | Hide video control if value is `false` | true |\r\n| direction | @Input | string | Set text direction. You can pass **rtl** / **ltr** / **auto** | ltr |\r\n| slideOrderType | @Input | string | Arrange slider images in Ascending order by `ASC` and in Descending order by `DESC`. `order` key must be exist with image object. | ASC |\r\n| lazyLoading | @Input | boolean | Lazy load images and Iframe if true. | false |\r\n| defaultActiveImage | @Input | number | Set image as selected on load. | null |\r\n| imageClick | @Output | n/a | Executes when click event on slider image. Return image index. | n/a |\r\n| arrowClick | @Output | n/a | Executes when click on slider left/right arrow. Returns current event name and next/previous button disabled status. | n/a |\r\n| lightboxClose | @Output | n/a | Executes when lightbox close. | n/a |\r\n| lightboxArrowClick | @Output | n/a | Executes when click on lightbox next/previous arrow. | n/a |\r\n\r\n\r\n## Add custom navigation button\r\n```typescript\r\nimport { NgImageSliderComponent } from 'ng-image-slider';\r\n\r\n@Component({\r\n    selector: 'sample',\r\n        template:`\r\n        <ng-image-slider [images]=\"imageObject\" #nav>\r\n        </ng-image-slider>\r\n        <button (click)=\"prevImageClick()\">Prev</button>\r\n        <button (click)=\"nextImageClick()\">Next</button>\r\n        `\r\n})\r\nclass Sample {\r\n    @ViewChild('nav') slider: NgImageSliderComponent;\r\n    imageObject = [{...}]\r\n\r\n    prevImageClick() {\r\n        this.slider.prev();\r\n    }\r\n\r\n    nextImageClick() {\r\n        this.slider.next();\r\n    }\r\n}\r\n```\r\n\r\n## License\r\nAs Angular itself, this module is released under the permissive [MIT license](http://revolunet.mit-license.org).\r\n\r\nYour contributions and suggestions are always welcome :)\r\n","readmeFilename":"README.md"}