ngx-glide

Angular wrapper component of Glide 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

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

<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

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