# ngx-glide
Angular wrapper component of [Glide](https://glidejs.com) carousel library.
  
## Environment Support
- Angular 6+
- Server-side Rendering
## Compatibility
Versions compatibility list:
| ngx-glide | Angular | @glidejs/glide |
| --------- | ------------- | -------------- |
| 16.x.x | 16.x.x | 3.x.x |
| 15.x.x | 15.x.x | 3.x.x |
| 14.x.x | 14.x.x | 3.x.x |
| 13.x.x | 13.x.x | 3.x.x |
| 12.x.x | 12.x.x | 3.x.x |
| 11.x.x | 11.x.x | 3.x.x |
| 10.x.x | 10.x.x | 3.x.x |
| 1.x.x | 6.x.x - 9.x.x | 3.x.x |
## Installation
```sh
npm i @glidejs/glide@3 ngx-glide
```
## Demo
[Demo page](https://avivharuzi.github.io/ngx-glide)
## Usage
Add scss files to the `styles` section of your `angular.json`:
```json
"styles": [
"src/styles.scss",
"node_modules/@glidejs/glide/src/assets/sass/glide.core",
"node_modules/@glidejs/glide/src/assets/sass/glide.theme"
],
```
You can either import the `styles` files into main scss file:
```scss
@use '@glidejs/glide/src/assets/sass/glide.core' as *;
@use '@glidejs/glide/src/assets/sass/glide.theme' as *;
```
Import `NgxGlideModule` into the current module's imports:
```ts
import { NgxGlideModule } from 'ngx-glide';
imports: [
// ...
NgxGlideModule,
],
```
You can also import `NgxGlideComponent` as standalone component:
```ts
import { NgxGlideComponent } from 'ngx-glide';
@Component({
standalone: true,
imports: [NgxGlideComponent],
// ...
})
export class MyComponent {}
```
Use in your components (add html items into the ngx-glide component):
```html
0
1
2
```
You can also access to the component instance directly like this:
```ts
// Get the component instance.
@ViewChild(NgxGlideComponent, { static: false }) ngxGlide: NgxGlideComponent;
play(): void {
this.ngxGlide.play();
}
```
Update the carousel items dynamically (**only available from version 12**).
```html
{{ name }}
```
```ts
// Get the component instance.
@ViewChild('ngxGlide') ngxGlide!: NgxGlideComponent;
names: string[];
constructor() {
this.names = ['Johny Depp', 'Christian Bale'];
}
updateItems(): void {
this.names = [...this.names, 'Tom Hanks'];
if (this.ngxGlide) {
this.ngxGlide.recreate();
}
}
```
## API
### Inputs
| Input | Type | Default | Description |
| --------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------ |
| `showArrows` | boolean | `true` | Indicates if to show arrows in the view or not. |
| `showBullets` | boolean | `true` | Indicates if to show bullets in the view or not. |
| `arrowLeftLabel` | string | `'prev'` | The label presented in the arrow left side. |
| `arrowLeftTemplate` | TemplateRef | `null` | Custom HTML (TemplateRef) to use for arrow left this disable the default. |
| `arrowRightLabel` | string | `'next'` | The label presented in the arrow right side. |
| `arrowRightTemplate` | TemplateRef | `null` | Custom HTML (TemplateRef) to use for arrow right this disable the default. |
| `listenToEvents` | boolean | `false` | If you need to get output events set it to true (by default is false to save performance). |
| `type` | string | `'slider'` | Type of the movement. |
| `startAt` | number | `0` | Start at specific slide number. |
| `perView` | number | `1` | A number of visible slides. |
| `focusAt` | number | string | `0` | Focus currently active slide at a specified position. |
| `gap` | number | `10` | A size of the space between slide. |
| `autoplay` | number | boolean | `false` | Change slides after a specified interval. |
| `hoverpause` | boolean | `true` | Stop autoplay on mouseover. |
| `keyboard` | boolean | `true` | Change slides with keyboard arrows. |
| `bound` | boolean | `false` | Stop running `perView` number of slides from the end. |
| `swipeThreshold` | number | boolean | `80` | Minimal swipe distance needed to change the slide. |
| `dragThreshold` | number | boolean | `120` | Minimal mousedrag distance needed to change the slide. |
| `perTouch` | number | boolean | `false` | A maximum number of slides moved per single swipe or drag. |
| `touchRatio` | number | `0.5` | Alternate moving distance ratio of swiping and dragging. |
| `touchAngle` | number | `45` | Angle required to activate slides moving. |
| `animationDuration` | number | `400` | Easing function for the animation. |
| `rewind` | boolean | `true` | Allow looping the `slider` type. |
| `rewindDuration` | number | `800` | Duration of the rewinding animation. |
| `animationTimingFunc` | string | `'cubic-bezier(0.165, 0.840, 0.440, 1.000)'` | Easing function for the animation. |
| `direction` | string | `'ltr'` | Moving direction mode. |
| `peek` | number | object | `0` | The value of the future viewports which have to be visible in the current view. |
| `breakpoints` | object | `{}` | Collection of options applied at specified media breakpoints. |
| `throttle` | number | `25` | Throttle costly events |
## Outputs
| Output | Event Type | Example | Description |
| ----------------- | ---------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mountedBefore` | void | | Called before first mounting begins. However, the mounting phase has not been started, and components are not bootstrapped yet. |
| `mountedAfter` | void | | Called right after first mounting. All components have been mounted. |
| `updated` | void | | Called right after updating settings with update() API method. |
| `played` | void | | Called right after starting an instance with play() API method. |
| `paused` | void | | Called right after stopping instance with pause() API method. |
| `buildedBefore` | void | | Called right before setting up a slider to its initial state. At this point, classes, translations, and sizes are applied. |
| `buildedAfter` | void | | Called right after setting up a slider to its initial state. At this point, classes, translations, and sizes are applied. |
| `ranBefore` | object | `{ "direction": ">", "steps": 0 }` | Called right before calculating new index and making a transition. The movement schema (eg. `=1`) string has been parsed. |
| `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. |
| `ranAfter` | object | `{ "direction": ">", "steps": 0 }` | Called after calculating new index and making a transition. The movement schema (eg. `=1`) string has been parsed. |
| `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. |
| `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. |
| `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. |
| `moved` | object | `{ "movement": 0 }` | Called right before movement transition begins. |
| `movedAfter` | object | `{ "movement": 0 }` | Called right after movement transition ends. |
| `resized` | void | | Called when the window is being resized. This event throttled. |
| `swipeStarted` | void | | Called right after swiping begins. |
| `swipeMoved` | void | | Called during swiping movement. |
| `swipeEnded` | void | | Called right after swiping ends. |
| `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. |
# License
[MIT](LICENSE)