{"id":20424315,"url":"https://github.com/avivharuzi/ngx-glide","last_synced_at":"2025-07-30T22:08:46.631Z","repository":{"id":35110212,"uuid":"205498957","full_name":"avivharuzi/ngx-glide","owner":"avivharuzi","description":"Angular wrapper component of Glide carousel library","archived":false,"fork":false,"pushed_at":"2024-04-09T21:40:35.000Z","size":24131,"stargazers_count":29,"open_issues_count":5,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-09T23:46:53.806Z","etag":null,"topics":["angular-library","anngular","carousel","carousel-library","glide-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-glide","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/avivharuzi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-31T05:15:53.000Z","updated_at":"2024-03-05T14:33:15.000Z","dependencies_parsed_at":"2023-02-13T02:16:15.449Z","dependency_job_id":null,"html_url":"https://github.com/avivharuzi/ngx-glide","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avivharuzi%2Fngx-glide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avivharuzi%2Fngx-glide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avivharuzi%2Fngx-glide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avivharuzi%2Fngx-glide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avivharuzi","download_url":"https://codeload.github.com/avivharuzi/ngx-glide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248617127,"owners_count":21134190,"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-library","anngular","carousel","carousel-library","glide-library"],"created_at":"2024-11-15T07:09:10.821Z","updated_at":"2025-04-12T18:43:04.374Z","avatar_url":"https://github.com/avivharuzi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-glide\n\nAngular wrapper component of [Glide](https://glidejs.com) carousel library.\n\n![npm](https://img.shields.io/npm/v/ngx-glide) ![NPM](https://img.shields.io/npm/l/ngx-glide) ![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-glide)\n\n## Environment Support\n\n- Angular 6+\n- Server-side Rendering\n\n## Compatibility\n\nVersions compatibility list:\n\n| ngx-glide | Angular | @glidejs/glide |\n| --------- | ------------- | -------------- |\n| 16.x.x | 16.x.x | 3.x.x |\n| 15.x.x | 15.x.x | 3.x.x |\n| 14.x.x | 14.x.x | 3.x.x |\n| 13.x.x | 13.x.x | 3.x.x |\n| 12.x.x | 12.x.x | 3.x.x |\n| 11.x.x | 11.x.x | 3.x.x |\n| 10.x.x | 10.x.x | 3.x.x |\n| 1.x.x | 6.x.x - 9.x.x | 3.x.x |\n\n## Installation\n\n```sh\nnpm i @glidejs/glide@3 ngx-glide\n```\n\n## Demo\n\n[Demo page](https://avivharuzi.github.io/ngx-glide)\n\n## Usage\n\nAdd scss files to the `styles` section of your `angular.json`:\n\n```json\n\"styles\": [\n \"src/styles.scss\",\n \"node_modules/@glidejs/glide/src/assets/sass/glide.core\",\n \"node_modules/@glidejs/glide/src/assets/sass/glide.theme\"\n],\n```\n\nYou can either import the `styles` files into main scss file:\n\n```scss\n@use '@glidejs/glide/src/assets/sass/glide.core' as *;\n@use '@glidejs/glide/src/assets/sass/glide.theme' as *;\n```\n\nImport `NgxGlideModule` into the current module's imports:\n\n```ts\nimport { NgxGlideModule } from 'ngx-glide';\n\nimports: [\n // ...\n NgxGlideModule,\n],\n```\n\nYou can also import `NgxGlideComponent` as standalone component:\n\n```ts\nimport { NgxGlideComponent } from 'ngx-glide';\n\n@Component({\n standalone: true,\n imports: [NgxGlideComponent],\n // ...\n})\nexport class MyComponent {}\n```\n\nUse in your components (add html items into the ngx-glide component):\n\n```html\n\u003cngx-glide\u003e\n \u003cdiv\u003e0\u003c/div\u003e\n \u003cdiv\u003e1\u003c/div\u003e\n \u003cdiv\u003e2\u003c/div\u003e\n\u003c/ngx-glide\u003e\n```\n\nYou can also access to the component instance directly like this:\n\n```ts\n// Get the component instance.\n@ViewChild(NgxGlideComponent, { static: false }) ngxGlide: NgxGlideComponent;\n\nplay(): void {\n this.ngxGlide.play();\n}\n```\n\nUpdate the carousel items dynamically (**only available from version 12**).\n\n```html\n\u003cng-container *ngIf=\"names \u0026\u0026 names.length \u003e 0\"\u003e\n \u003cngx-glide #ngxGlide\u003e\n \u003cng-container *ngFor=\"let name of names\"\u003e\n \u003cdiv\u003e{{ name }}\u003c/div\u003e\n \u003c/ng-container\u003e\n \u003c/ngx-glide\u003e\n\u003c/ng-container\u003e\n```\n\n```ts\n// Get the component instance.\n@ViewChild('ngxGlide') ngxGlide!: NgxGlideComponent;\n\nnames: string[];\n\nconstructor() {\n this.names = ['Johny Depp', 'Christian Bale'];\n}\n\nupdateItems(): void {\n this.names = [...this.names, 'Tom Hanks'];\n if (this.ngxGlide) {\n this.ngxGlide.recreate();\n }\n}\n```\n\n## API\n\n### Inputs\n\n| Input | Type | Default | Description |\n| --------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------ |\n| `showArrows` | boolean | `true` | Indicates if to show arrows in the view or not. |\n| `showBullets` | boolean | `true` | Indicates if to show bullets in the view or not. |\n| `arrowLeftLabel` | string | `'prev'` | The label presented in the arrow left side. |\n| `arrowLeftTemplate` | TemplateRef | `null` | Custom HTML (TemplateRef) to use for arrow left this disable the default. |\n| `arrowRightLabel` | string | `'next'` | The label presented in the arrow right side. |\n| `arrowRightTemplate` | TemplateRef | `null` | Custom HTML (TemplateRef) to use for arrow right this disable the default. |\n| `listenToEvents` | boolean | `false` | If you need to get output events set it to true (by default is false to save performance). |\n| `type` | string | `'slider'` | Type of the movement. |\n| `startAt` | number | `0` | Start at specific slide number. |\n| `perView` | number | `1` | A number of visible slides. |\n| `focusAt` | number \u0026#124; string | `0` | Focus currently active slide at a specified position. |\n| `gap` | number | `10` | A size of the space between slide. |\n| `autoplay` | number \u0026#124; boolean | `false` | Change slides after a specified interval. |\n| `hoverpause` | boolean | `true` | Stop autoplay on mouseover. |\n| `keyboard` | boolean | `true` | Change slides with keyboard arrows. |\n| `bound` | boolean | `false` | Stop running `perView` number of slides from the end. |\n| `swipeThreshold` | number \u0026#124; boolean | `80` | Minimal swipe distance needed to change the slide. |\n| `dragThreshold` | number \u0026#124; boolean | `120` | Minimal mousedrag distance needed to change the slide. |\n| `perTouch` | number \u0026#124; boolean | `false` | A maximum number of slides moved per single swipe or drag. |\n| `touchRatio` | number | `0.5` | Alternate moving distance ratio of swiping and dragging. |\n| `touchAngle` | number | `45` | Angle required to activate slides moving. |\n| `animationDuration` | number | `400` | Easing function for the animation. |\n| `rewind` | boolean | `true` | Allow looping the `slider` type. |\n| `rewindDuration` | number | `800` | Duration of the rewinding animation. |\n| `animationTimingFunc` | string | `'cubic-bezier(0.165, 0.840, 0.440, 1.000)'` | Easing function for the animation. |\n| `direction` | string | `'ltr'` | Moving direction mode. |\n| `peek` | number \u0026#124; object | `0` | The value of the future viewports which have to be visible in the current view. |\n| `breakpoints` | object | `{}` | Collection of options applied at specified media breakpoints. |\n| `throttle` | number | `25` | Throttle costly events |\n\n## Outputs\n\n| Output | Event Type | Example | Description |\n| ----------------- | ---------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `mountedBefore` | void | | Called before first mounting begins. However, the mounting phase has not been started, and components are not bootstrapped yet. |\n| `mountedAfter` | void | | Called right after first mounting. All components have been mounted. |\n| `updated` | void | | Called right after updating settings with update() API method. |\n| `played` | void | | Called right after starting an instance with play() API method. |\n| `paused` | void | | Called right after stopping instance with pause() API method. |\n| `buildedBefore` | void | | Called right before setting up a slider to its initial state. At this point, classes, translations, and sizes are applied. |\n| `buildedAfter` | void | | Called right after setting up a slider to its initial state. At this point, classes, translations, and sizes are applied. |\n| `ranBefore` | object | `{ \"direction\": \"\u003e\", \"steps\": 0 }` | Called right before calculating new index and making a transition. The movement schema (eg. `=1`) string has been parsed. |\n| `ran` | object | `{ \"direction\": \"\u003e\", \"steps\": 0 }` | Called right after calculating new index and before making a transition. The movement schema (eg. `=1`) string has been parsed. |\n| `ranAfter` | object | `{ \"direction\": \"\u003e\", \"steps\": 0 }` | Called after calculating new index and making a transition. The movement schema (eg. `=1`) string has been parsed. |\n| `ranOffset` | object | `{ \"direction\": \"\u003e\", \"steps\": 0 }` | Called after calculating new index and making a transition, while we did an offset animation. Offset animation take place at two moments. |\n| `runStarted` | object | `{ \"direction\": \"\u003e\", \"steps\": 0 }` | Called right after calculating the new index, but before making a transition, while we did a rewinding to the start index. |\n| `runEnded` | object | `{ \"direction\": \"\u003e\", \"steps\": 0 }` | Called right after calculating the new index, but before making a transition, while we did a rewinding to the last index. |\n| `moved` | object | `{ \"movement\": 0 }` | Called right before movement transition begins. |\n| `movedAfter` | object | `{ \"movement\": 0 }` | Called right after movement transition ends. |\n| `resized` | void | | Called when the window is being resized. This event throttled. |\n| `swipeStarted` | void | | Called right after swiping begins. |\n| `swipeMoved` | void | | Called during swiping movement. |\n| `swipeEnded` | void | | Called right after swiping ends. |\n| `translateJumped` | object | | Called right before a translate applies, while we doing a jump to the first or last slide from offset movement. This event is only used when a type is set up to carousel. |\n\n# License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favivharuzi%2Fngx-glide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favivharuzi%2Fngx-glide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favivharuzi%2Fngx-glide/lists"}