{"id":21775520,"url":"https://github.com/devendramilmile121/ngx-custom-carousel","last_synced_at":"2026-03-01T13:30:23.518Z","repository":{"id":229440422,"uuid":"776738469","full_name":"devendramilmile121/ngx-custom-carousel","owner":"devendramilmile121","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-24T10:53:00.000Z","size":6815,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-24T08:54:30.365Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devendramilmile121.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2024-03-24T10:59:01.000Z","updated_at":"2025-07-24T14:37:27.000Z","dependencies_parsed_at":"2024-03-24T12:21:08.158Z","dependency_job_id":"53368f29-120c-432c-9c06-13b5449e869c","html_url":"https://github.com/devendramilmile121/ngx-custom-carousel","commit_stats":null,"previous_names":["devendramilmile121/ngx-custom-carousel"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/devendramilmile121/ngx-custom-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devendramilmile121%2Fngx-custom-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devendramilmile121%2Fngx-custom-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devendramilmile121%2Fngx-custom-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devendramilmile121%2Fngx-custom-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devendramilmile121","download_url":"https://codeload.github.com/devendramilmile121/ngx-custom-carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devendramilmile121%2Fngx-custom-carousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29970327,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T12:56:10.327Z","status":"ssl_error","status_checked_at":"2026-03-01T12:55:24.744Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-26T20:01:30.705Z","updated_at":"2026-03-01T13:30:23.491Z","avatar_url":"https://github.com/devendramilmile121.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# ngx-custom-carousel\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#badge\"\u003e\n    \u003cimg alt=\"semantic-release: angular\" src=\"https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/devendramilmile121/ngx-custom-carousel/actions?query=workflow%3Aangular+branch%3Amaster\"\u003e\n    \u003cimg alt=\"Build states\" src=\"https://github.com/devendramilmile121/ngx-custom-carousel/actions/workflows/publish.yml/badge.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\nngx-custom-carousel is a feature-rich Angular 17 component crafted to elevate your carousel experience. Seamlessly integrated with Angular, this library offers swipe functionality for smooth content navigation on various devices. The carousel comes equipped with next and forward buttons, enhancing user interaction. While these buttons maintain a sleek design for consistency, ngx-custom-carousel empowers users to fully customize carousel templates to suit their unique needs. Whether showcasing images, products, or other content, ngx-custom-carousel delivers a dynamic and intuitive solution for creating captivating carousels in Angular applications.\n\n### Features\n\n-   Support for custom template using `\u003cng-template\u003e` tag.\n-   Swipe left and swipe right gestures for navigation.\n-   Previous Next buttons\n-   Turn on/off auto switch and control using next and previous buttons\n-   Auto pause if hove on the item to make content readable\n\n## Installation\n\nInstall `ngx-custom-carousel` via npm:\n\n```bash\nnpm  install  ngx-custom-carousel  --save\n```\n\n## Demo\n\n[Demo and API Reference](https://devendramilmile121.github.io/ngx-custom-carousel/)\n\n## Usage\n\n1. Import the `NgxCustomCarouselModule` in your Angular module:\n\n```typescript\nimport { NgxCustomCarouselModule } from 'ngx-custom-carousel';\n\n@NgModule({\n    imports: [NgxCustomCarouselModule],\n})\nexport class YourModule {}\n```\n\n2. Use the `\u003cngx-custom-carousel\u003e` element in your component's template to display a carousel:\n\n```html\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"hw-full\"\u003e\n        \u003cngx-custom-carousel\n            [items]=\"itemsTemplate\"\n            [customItemTemplate]=\"userDetailsTemplate\"\n            [delay]=\"5000\"\n            [enableControls]=\"true\"\n            [enableAutoSwitch]=\"true\"\u003e\u003c/ngx-custom-carousel\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n3. Define a custom template using the `\u003cng-template\u003e` element for displaying user details:\n\n```html\n\u003cng-template #userDetailsTemplate let-item let-index=\"index\"\u003e\n    \u003cdiv\u003eUse your own html\u003c/div\u003e\n\u003c/ng-template\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevendramilmile121%2Fngx-custom-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevendramilmile121%2Fngx-custom-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevendramilmile121%2Fngx-custom-carousel/lists"}