{"id":13808222,"url":"https://github.com/sanjayV/ng-image-slider","last_synced_at":"2025-05-14T02:31:41.583Z","repository":{"id":37384996,"uuid":"140103185","full_name":"sanjayV/ng-image-slider","owner":"sanjayV","description":"Angular Image Slider with Lightbox.","archived":false,"fork":false,"pushed_at":"2024-11-14T13:37:19.000Z","size":16760,"stargazers_count":105,"open_issues_count":45,"forks_count":52,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-14T17:44:18.217Z","etag":null,"topics":["angular","angular-responsive-image-slider","image-lightbox","image-slider"],"latest_commit_sha":null,"homepage":"https://sanjayv.github.io/ng-image-slider/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sanjayV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-07T17:14:25.000Z","updated_at":"2024-11-14T13:21:25.000Z","dependencies_parsed_at":"2024-06-18T14:15:01.800Z","dependency_job_id":null,"html_url":"https://github.com/sanjayV/ng-image-slider","commit_stats":{"total_commits":151,"total_committers":10,"mean_commits":15.1,"dds":0.4039735099337748,"last_synced_commit":"de57e908bdff960b1485062f84fe60eb0184090e"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjayV%2Fng-image-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjayV%2Fng-image-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjayV%2Fng-image-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjayV%2Fng-image-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanjayV","download_url":"https://codeload.github.com/sanjayV/ng-image-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225130624,"owners_count":17425506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-responsive-image-slider","image-lightbox","image-slider"],"created_at":"2024-08-04T01:01:37.745Z","updated_at":"2024-11-19T00:30:41.935Z","avatar_url":"https://github.com/sanjayV.png","language":"SCSS","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Carousels"],"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: 18)\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://sanjayv.github.io/ng-image-slider/\n##### code example:\n##### Images: https://stackblitz.com/edit/ng-image-slider-demo\n##### video: https://stackblitz.com/edit/ng-image-slider-video-demo\n\n\n# Installation\n`npm install ng-image-slider --save`\n\n# Setup :\n\n**Import module in your `app.module.ts`:**\n```typescript\nimport { NgImageSliderModule } from 'ng-image-slider';\n...\n\n@NgModule({\n    declarations: [\n        AppComponent\n    ],\n    imports: [\n        NgImageSliderModule,\n        ...\n    ],\n    providers: [],\n    bootstrap: [AppComponent]\n})\n\nexport class AppModule {\n}\n\n```\n\n**Add component in your template file.**\n```html\n\u003cng-image-slider [images]=\"imageObject\" #nav\u003e\u003c/ng-image-slider\u003e\n```\n\n**ImageObject format**\n```js\nimageObject: Array\u003cobject\u003e = [{\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        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: slideOrderType\n    }\n];\n```\n\n**Image, Youtube and MP4 url's object format**\n ```js\nimageObject: Array\u003cobject\u003e = [{\n        video: 'https://youtu.be/6pxRHBw-k8M' // Youtube url\n    },\n\t{\n\t\tvideo: 'assets/video/movie.mp4', // MP4 Video url\n\t},\n\t{\n\t\tvideo: '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\t{\n\t\timage: 'assets/img/slider/1.jpg',\n        thumbImage: 'assets/img/slider/1_min.jpeg',\n        alt: 'Image alt'\n\t}\n    ...\n];\n```\n\n#### **Note :\nFor angular version 8 or less, use `\"skipLibCheck\": true` in `tsconfig.json` for prevent **ambient context** issue.\n```js\n\"compilerOptions\": {\n    \"skipLibCheck\": true\n}\n```\n\n## API Reference (optional) :\n\n| Name | Type | Data Type | Description | Default |\n|------|------|-----------|-------------|---------|\n| fallbackImage | @Input  | object   | 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 | 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}` |\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 | 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 |\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 | string | Set text direction. You can pass **rtl** / **ltr** / **auto** | ltr |\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 |\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 | n/a | Executes when click event on slider image. Return image index. | n/a |\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 |\n| lightboxClose | @Output | n/a | Executes when lightbox close. | n/a |\n| lightboxArrowClick | @Output | n/a | Executes when click on lightbox next/previous arrow. | n/a |\n\n## fallbackImage Input Format\n```\n{\n    \"image\": \"./slider/mainImage.jpg\",\n    \"thumbImage\": \"./slider/thumbImage.jpg\"\n}\n```\n\n\n## Add custom navigation button\n```typescript\nimport { NgImageSliderComponent } from 'ng-image-slider';\n\n@Component({\n    selector: 'sample',\n        template:`\n        \u003cng-image-slider [images]=\"imageObject\" #nav\u003e\n        \u003c/ng-image-slider\u003e\n        \u003cbutton (click)=\"prevImageClick()\"\u003ePrev\u003c/button\u003e\n        \u003cbutton (click)=\"nextImageClick()\"\u003eNext\u003c/button\u003e\n        `\n})\nclass Sample {\n    @ViewChild('nav') slider: NgImageSliderComponent;\n    imageObject = [{...}]\n\n    prevImageClick() {\n        this.slider.prev();\n    }\n\n    nextImageClick() {\n        this.slider.next();\n    }\n}\n```\n\n## License\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FsanjayV%2Fng-image-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FsanjayV%2Fng-image-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FsanjayV%2Fng-image-slider/lists"}