ngx-glide

Angular wrapper component of Glide carousel library.

Environment Support

• Angular 6+
• Server-side Rendering

Compatibility

Versions compatibility list:

Installation

npm i @glidejs/glide@3 ngx-glide

Demo

Demo page

Usage

Add scss files to the styles section of your angular.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:

@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:

import { NgxGlideModule } from 'ngx-glide';

imports: [
  // ...
  NgxGlideModule,
],

You can also import NgxGlideComponent as standalone component:

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):

  <div>0</div>
  <div>1</div>
  <div>2</div>

You can also access to the component instance directly like this:

// 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).

  
    
      <div>{{ name }}</div>
    
  

// 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

Outputs

License

MIT