{"id":14862243,"url":"https://github.com/ZouYouShun/ngx-hm-carousel","last_synced_at":"2025-09-18T15:30:58.078Z","repository":{"id":65411340,"uuid":"112596950","full_name":"ZouYouShun/ngx-hm-carousel","owner":"ZouYouShun","description":"a light carousel for Angular18+, support mobile touch by hammerJs","archived":false,"fork":false,"pushed_at":"2024-09-08T17:19:35.000Z","size":721,"stargazers_count":60,"open_issues_count":5,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-12T18:50:40.184Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/stackblitz-starters-nkd5pk?file=src%2Fmain.ts","language":"TypeScript","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/ZouYouShun.png","metadata":{"files":{"readme":"README-LEGACY.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","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":"2017-11-30T10:14:44.000Z","updated_at":"2024-09-09T03:20:42.000Z","dependencies_parsed_at":"2024-10-25T18:28:51.498Z","dependency_job_id":"3ef9a038-3f7f-42f5-b180-8cbc22b15864","html_url":"https://github.com/ZouYouShun/ngx-hm-carousel","commit_stats":{"total_commits":99,"total_committers":5,"mean_commits":19.8,"dds":"0.18181818181818177","last_synced_commit":"8e56baa7ee28eb6428134d47e9b124ddf74094c5"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZouYouShun%2Fngx-hm-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZouYouShun%2Fngx-hm-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZouYouShun%2Fngx-hm-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZouYouShun%2Fngx-hm-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZouYouShun","download_url":"https://codeload.github.com/ZouYouShun/ngx-hm-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233484529,"owners_count":18683099,"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":[],"created_at":"2024-09-19T20:01:33.008Z","updated_at":"2025-09-18T15:30:52.724Z","avatar_url":"https://github.com/ZouYouShun.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Carousels"],"readme":"[![NPM version](https://badge.fury.io/js/ngx-hm-carousel.svg)](http://badge.fury.io/js/ngx-hm-carousel)\n\n# ngx-hm-carousel\n\nA lightweight carousel UI for Angular, support mobile touch with Hammerjs.\n\nWork with custom animation, and server-side-rendering.\n\n## Description\n\nAn Carousel that easy to use with your custom template.\n\nThis package is design by angular and hammerjs.\n\nDepend on [Hammerjs](https://hammerjs.github.io/).\n\nSupport Angular 12+ and Rxjs6+\n\n## Example\n\nhttps://alanzouhome.firebaseapp.com/package/NgxHmCarousel\n\n![](https://res.cloudinary.com/dw7ecdxlp/image/upload/v1533206320/1533206262496_soounq.gif)\n\n![](https://i.imgur.com/SyyBSR9.gif)\n\n## Stackblitz Example\n\n[with custom animation](https://stackblitz.com/edit/ngx-hm-carousel-fade-example)\n\n[custom-breakpoint](https://stackblitz.com/edit/ngx-hm-carousel-custom-breakpoint)\n\n[change-show-number-dynamicly](https://stackblitz.com/edit/ngx-hm-carousel-change-show-number-dynamicly)\n\n[disable-drag event](https://stackblitz.com/edit/ngx-hm-carousel-disable-drag)\n\n[loop carousel](https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class)\n\n## Install\n\n```ts\nnpm install --save ngx-hm-carousel\n```\n\n1. HammerJs\n\n- Import `hammerjs` in your main.ts or app.module.ts;\n\n```ts\nimport 'hammerjs';\n\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n...\n...\n```\n\n2. ResizeObserver\n   We base on browser `ResizeObserver` API, if you need support not support browser, import [`polyfill`](https://www.npmjs.com/package/resize-observer-polyfill) in your `polyfills.ts`.\n\npolyfills.ts\n\n```ts\nimport 'resize-observer-polyfill';\n...\n\nimport 'zone.js';\n```\n\n- Import `NgxHmCarouselModule` into your main AppModule or the module where you want use.\n\n1. Module\n\n```ts\nimport { NgxHmCarouselModule } from 'ngx-hm-carousel';\n\n@NgModule({\n  imports: [NgxHmCarouselModule],\n})\nexport class YourModule {}\n```\n\n2. HTML\n\n```html\n\u003cngx-hm-carousel [(ngModel)]=\"currentIndex\" [show-num]=\"4\" [autoplay-speed]=\"speed\" [infinite]=\"infinite\" [drag-many]=\"true\" [aniTime]=\"200\" [data]=\"avatars\" class=\"carousel c-accent\"\u003e\n  \u003csection ngx-hm-carousel-container class=\"content\"\u003e\n    \u003carticle class=\"item cursor-pointer\" ngx-hm-carousel-item *ngFor=\"let avatar of avatars; let i = index\" [ngClass]=\"{'visible': currentIndex===i}\"\u003e\n      \u003cdiv class=\"img\" (click)=\"click(i)\" [style.backgroundImage]=\"'url('+avatar.url+')'\"\u003e{{i}}\u003c/div\u003e\n    \u003c/article\u003e\n    \u003cng-template #infiniteContainer\u003e\u003c/ng-template\u003e\n  \u003c/section\u003e\n\n  \u003c!-- only using in infinite mode or autoplay mode, that will render with--\u003e\n  \u003cng-template #carouselContent let-avatar let-i=\"index\"\u003e\n    \u003carticle class=\"item cursor-pointer\" [ngClass]=\"{'visible': currentIndex===i}\"\u003e\n      \u003cdiv class=\"img\" (click)=\"click(i)\" [style.backgroundImage]=\"'url('+avatar.url+')'\"\u003e{{i}}\u003c/div\u003e\n    \u003c/article\u003e\n  \u003c/ng-template\u003e\n\n  \u003cng-template #carouselPrev\u003e\n    \u003cdiv class=\"click-area\"\u003e\n      \u003ci class=\"material-icons\"\u003ekeyboard_arrow_left\u003c/i\u003e\n    \u003c/div\u003e\n  \u003c/ng-template\u003e\n  \u003cng-template #carouselNext\u003e\n    \u003cdiv class=\"click-area\"\u003e\n      \u003ci class=\"material-icons\"\u003ekeyboard_arrow_right\u003c/i\u003e\n    \u003c/div\u003e\n  \u003c/ng-template\u003e\n\n  \u003cng-template #carouselDot let-model\u003e\n    \u003cdiv class=\"ball bg-accent\" [class.visible]=\"model.index === model.currentIndex\"\u003e\u003c/div\u003e\n  \u003c/ng-template\u003e\n\n  \u003cng-template #carouselProgress let-progress\u003e\n    \u003cdiv class=\"progress\"\u003e\u003c/div\u003e\n  \u003c/ng-template\u003e\n\u003c/ngx-hm-carousel\u003e\n```\n\n2. TS\n\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-drag-one',\n  templateUrl: './drag-one.component.html',\n  styleUrls: ['./drag-one.component.scss'],\n})\nexport class DragOneComponent {\n  currentIndex = 0;\n  speed = 5000;\n  infinite = true;\n  direction = 'right';\n  directionToggle = true;\n  autoplay = true;\n  avatars = '1234567891234'.split('').map((x, i) =\u003e {\n    const num = i;\n    // const num = Math.floor(Math.random() * 1000);\n    return {\n      url: `https://picsum.photos/600/400/?${num}`,\n      title: `${num}`,\n    };\n  });\n\n  constructor() {}\n\n  click(i) {\n    alert(`${i}`);\n  }\n}\n```\n\n3. SCSS\n\n- this project not contain any specile style, you can custom by yourself\n\n```scss\n$transition_time: 0.2s;\n\n.carousel {\n  color: white;\n  .content {\n    display: flex;\n\n    .item {\n      width: 100%;\n      padding: 0.5em;\n      display: block;\n      opacity: 0.5;\n\n      transition: opacity 0.295s linear $transition_time;\n\n      \u0026.visible {\n        opacity: 1;\n      }\n\n      .img {\n        width: 100%;\n        height: 400px;\n        display: block;\n        background-size: cover;\n        background-position: center;\n      }\n    }\n  }\n\n  .ball {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: black;\n    border: 2px solid;\n    opacity: 0.5;\n\n    \u0026.visible {\n      opacity: 1;\n    }\n  }\n\n  .click-area {\n    width: 50px;\n    text-align: center;\n\n    i {\n      font-size: 3em;\n    }\n  }\n}\n```\n\n[View more examples](https://alanzouhome.firebaseapp.com/package/NgxHmCarousel)\n\n## Attribute\n\n### Configuration (Input)\n\n---\n\n| Attribute            | Necessary | Default value | Type                                | Location        | Description                                                                                                                                         |\n| -------------------- | --------- | ------------- | ----------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `autoplay`           | no        | false         | `boolean`                           | ngx-hm-carousel | carousel auto play confing                                                                                                                          |\n| `autoplay-speed`     | no        | 5000 (ms)     | `number`                            | ngx-hm-carousel | auto play speed                                                                                                                                     |\n| `between-delay`      | no        | 8000 (ms)     | `number`                            | ngx-hm-carousel | each auto play between time                                                                                                                         |\n| `autoplay-direction` | no        | 'right'       | `'left'` or `'right'`               | ngx-hm-carousel | auto play direction                                                                                                                                 |\n| `mouse-enable`       | no        | false         | `boolean`                           | ngx-hm-carousel | is mouse moveover stop the auto play                                                                                                                |\n| `autoplay`           | no        | false         | `boolean`                           | ngx-hm-carousel | carousel auto play config                                                                                                                           |\n| `[breakpoint]`       | no        | []            | `NgxHmCarouselBreakPointUp`         | ngx-hm-carousel | switch show number with own logic like bootstrap scss media-breakpoint-up                                                                           |\n| `show-num`           | no        | 1             | `number` or `'auto'`                | ngx-hm-carousel | how many number items to show once                                                                                                                  |\n| `scroll-num`         | no        | 1             | `number`                            | ngx-hm-carousel | how many number with each scroll                                                                                                                    |\n| `drag-many`          | no        | false         | `boolean`                           | ngx-hm-carousel | is can scroll many item once, simulate with scrollbar                                                                                               |\n| `swipe-velocity`     | no        | 0.3           | `number`                            | ngx-hm-carousel | Minimal velocity required before recognizing, unit is in px per ms.                                                                                 |\n| `pan-boundary`       | no        | 0.15          | `number` of `false`                 | ngx-hm-carousel | user move picture with the container width rate, when more than that rate, it will go to next or prev, set false will never move with distance rate |\n| `align`              | no        | 'left'        | `'left'` or `'right'` or `'center'` | ngx-hm-carousel | when show-num is bigger than 1, the first item align                                                                                                |\n| `infinite`           | no        | false         | `boolean`                           | ngx-hm-carousel | is the carousel will move loop                                                                                                                      |\n| `data`               | no        | undefined     | `any[]`                             | ngx-hm-carousel | the data you using with `*ngFor`, it need when infinite mode or autoplay mode                                                                       |\n| `aniTime`            | no        | 400           | `number`                            | ngx-hm-carousel | when `infinite` is true, the animation time with item                                                                                               |\n| `aniClass`           | no        | 'transition'  | `string`                            | ngx-hm-carousel | this class will add when carousel touch drag or click change index                                                                                  |\n| `aniClassAuto`       | no        | 'aniClass'    | `string`                            | ngx-hm-carousel | this class will add when carousel auto play                                                                                                         |\n| `disable-drag`       | no        | false         | `boolean`                           | ngx-hm-carousel | disable drag event with touch and mouse pan moving                                                                                                  |\n| `not-follow-pan`     | no        | false         | `boolean`                           | ngx-hm-carousel | disable when drag occur the child element will follow touch point.                                                                                  |\n| `[(ngModel)]`        | no        | 0             | `number`                            | ngx-hm-carousel | You can bind ngModel with this carousel, it will two way binding with current index. You also can use `(ngModelChange)=\"change($event)\"` with that. |\n\n```ts\n// the breakpoint interface\nexport interface NgxHmCarouselBreakPointUp {\n  width: number;\n  number: number;\n}\n```\n\n### Other Directive\n\nnormal click with effect the touch event, using this event replace that.\n\n| Attribute              | Location | Description                            |\n| ---------------------- | -------- | -------------------------------------- |\n| `ngxHmCarouselDynamic` | any tag  | It will dynamic load tag with element. |\n\nThis Directive will Dynamic load element with previous element and next element and current element.\n\n- Example\n\n```html\n\u003csection ngx-hm-carousel-container class=\"content\"\u003e\n  \u003carticle class=\"item cursor-pointer\" ngx-hm-carousel-item *ngFor=\"let item of data; let i = index\"\u003e\n    \u003cdiv *ngxHmCarouselDynamic=\"i; length: data.length; index: currentI\" class=\"img\" [style.backgroundImage]=\"item.url\"\u003e\u003c/div\u003e\n  \u003c/article\u003e\n\u003c/section\u003e\n```\n\n1. first data is this data index\n2. length is ths total length with array\n3. index is now index\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZouYouShun%2Fngx-hm-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FZouYouShun%2Fngx-hm-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZouYouShun%2Fngx-hm-carousel/lists"}