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:

@import '~@glidejs/glide/src/assets/sass/glide.core';
@import '~@glidejs/glide/src/assets/sass/glide.theme';

Import NgxGlideModule into the current module's imports:

import { NgxGlideModule } from 'ngx-glide';

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

Use in your components (add html items into the ngx-glide component):

<ngx-glide>
  <div>0</div>
  <div>1</div>
  <div>2</div>
</ngx-glide>

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

<ng-container *ngIf="names && names.length > 0">
  <ngx-glide #ngxGlide>
    <ng-container *ngFor="let name of names">
      <div>{{ name }}</div>
    </ng-container>
  </ngx-glide>
</ng-container>

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