{"_id":"@astroluset/ngx-glide","name":"@astroluset/ngx-glide","dist-tags":{"latest":"21.0.0"},"versions":{"21.0.0":{"name":"@astroluset/ngx-glide","version":"21.0.0","description":"Angular 21 wrapper component of Glide carousel library","peerDependencies":{"@angular/common":">=21.0.0","@angular/core":">=21.0.0","@glidejs/glide":"3.x"},"repository":{"type":"git","url":"git+https://github.com/Astroluset/ngx-glide.git"},"keywords":["angular","library","glide","slider","carousel"],"author":{"name":"Astroluset"},"license":"MIT","bugs":{"url":"https://github.com/Astroluset/ngx-glide/issues"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"homepage":"https://github.com/Astroluset/ngx-glide#readme","module":"fesm2022/astroluset-ngx-glide.mjs","typings":"types/astroluset-ngx-glide.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/astroluset-ngx-glide.d.ts","default":"./fesm2022/astroluset-ngx-glide.mjs"}},"gitHead":"7e660de0e9c31d10c8ae5df9a06de37a26f547a8","_id":"@astroluset/ngx-glide@21.0.0","_nodeVersion":"24.13.0","_npmVersion":"11.8.0","dist":{"integrity":"sha512-vW1nAhBOeX/kFw44FBG21D6MonHcG6UsBvypmaQIEESjJ6KjHrQZ+onalr4vL4FSYVj/gZh+QjYeiKDVneLFCg==","shasum":"2ef313fbd5ba4692e94f9889428a390d303ced23","tarball":"https://registry.npmjs.org/@astroluset/ngx-glide/-/ngx-glide-21.0.0.tgz","fileCount":6,"unpackedSize":70174,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGgtPYX6txvZupHwLRVx54X2iVVsNFOZty3Y0bPs6BqFAiB/ZiW9FHOHDLO76qJJaggkWVd2PN38S/ycDwIjCEp6qw=="}]},"_npmUser":{"name":"astroluset","email":"kushnirale@gmail.com"},"directories":{},"maintainers":[{"name":"astroluset","email":"kushnirale@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-glide_21.0.0_1770388694536_0.0209062876224817"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-06T14:38:14.442Z","21.0.0":"2026-02-06T14:38:14.699Z","modified":"2026-02-06T14:38:14.911Z"},"maintainers":[{"name":"astroluset","email":"kushnirale@gmail.com"}],"description":"Angular 21 wrapper component of Glide carousel library","homepage":"https://github.com/Astroluset/ngx-glide#readme","keywords":["angular","library","glide","slider","carousel"],"repository":{"type":"git","url":"git+https://github.com/Astroluset/ngx-glide.git"},"author":{"name":"Astroluset"},"bugs":{"url":"https://github.com/Astroluset/ngx-glide/issues"},"license":"MIT","readme":"# ngx-glide\n\nAngular wrapper component of [Glide](https://glidejs.com) carousel library.\n\n  \n\n## ⚠️ Angular 21 Only\n\nThis version (21.x.x) supports **Angular 21 only**. For older Angular versions, please use the appropriate version:\n- For Angular 16 and lower use avivharuzi/ngx-glide\n- Versions 17 - 20 are not supported.\n\n## Environment Support\n\n- Angular 21+\n- Server-side Rendering\n\n## Compatibility\n\nVersions compatibility list:\n\n| ngx-glide | Angular | @glidejs/glide |\n| --------- | ------------- | -------------- |\n| 21.x.x | 21.x.x | 3.x.x |\n\n## Installation\n\n```sh\nnpm i @glidejs/glide@3 ngx-glide@21\n```\n\n## Migration from Previous Versions\n\n### Breaking Changes in v21.0.0\n\n1. **Angular 21 Required**: This version requires Angular 21+\n2. **Sass @import Deprecated**: Use `@use` syntax instead of `@import`\n3. **Build Configuration**: Update your build configuration as shown below\n\n### Updating Your Build Configuration\n\nMake sure your `angular.json` or `project.json` includes the proper .scss extensions:\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` or `project.json`:\n\n```json\n\"styles\": [\n \"node_modules/@glidejs/glide/src/assets/sass/glide.core.scss\",\n \"node_modules/@glidejs/glide/src/assets/sass/glide.theme.scss\"\n],\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\n 0
\n 1
\n 2
\n\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 0\">\n \n \n {{ name }}
\n \n \n\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 | string | `0` | Focus currently active slide at a specified position. |\n| `gap` | number | `10` | A size of the space between slide. |\n| `autoplay` | number | 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 | boolean | `80` | Minimal swipe distance needed to change the slide. |\n| `dragThreshold` | number | boolean | `120` | Minimal mousedrag distance needed to change the slide. |\n| `perTouch` | number | 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 | 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\": \">\", \"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\": \">\", \"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\": \">\", \"steps\": 0 }` | Called after calculating new index and making a transition. The movement schema (eg. `=1`) string has been parsed. |\n| `ranOffset` | object | `{ \"direction\": \">\", \"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\": \">\", \"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\": \">\", \"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","readmeFilename":"README.md","_rev":"1-f32526d9a6a5b5641adccb0db6aec7c4"}