Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Angular wrapper component of Glide carousel library

License

NotificationsYou must be signed in to change notification settings

avivharuzi/ngx-glide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular wrapper component ofGlide carousel library.

npmNPMnpm bundle size

Environment Support

  • Angular 6+
  • Server-side Rendering

Compatibility

Versions compatibility list:

ngx-glideAngular@glidejs/glide
16.x.x16.x.x3.x.x
15.x.x15.x.x3.x.x
14.x.x14.x.x3.x.x
13.x.x13.x.x3.x.x
12.x.x12.x.x3.x.x
11.x.x11.x.x3.x.x
10.x.x10.x.x3.x.x
1.x.x6.x.x - 9.x.x3.x.x

Installation

npm i @glidejs/glide@3 ngx-glide

Demo

Demo page

Usage

Add scss files to thestyles section of yourangular.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 thestyles files into main scss file:

@use'@glidejs/glide/src/assets/sass/glide.core'as*;@use'@glidejs/glide/src/assets/sass/glide.theme'as*;

ImportNgxGlideModule into the current module's imports:

import{NgxGlideModule}from'ngx-glide';imports:[// ...NgxGlideModule,],

You can also importNgxGlideComponent as standalone component:

import{NgxGlideComponent}from'ngx-glide';@Component({standalone:true,imports:[NgxGlideComponent],// ...})exportclassMyComponent{}

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

InputTypeDefaultDescription
showArrowsbooleantrueIndicates if to show arrows in the view or not.
showBulletsbooleantrueIndicates if to show bullets in the view or not.
arrowLeftLabelstring'prev'The label presented in the arrow left side.
arrowLeftTemplateTemplateRefnullCustom HTML (TemplateRef) to use for arrow left this disable the default.
arrowRightLabelstring'next'The label presented in the arrow right side.
arrowRightTemplateTemplateRefnullCustom HTML (TemplateRef) to use for arrow right this disable the default.
listenToEventsbooleanfalseIf you need to get output events set it to true (by default is false to save performance).
typestring'slider'Type of the movement.
startAtnumber0Start at specific slide number.
perViewnumber1A number of visible slides.
focusAtnumber | string0Focus currently active slide at a specified position.
gapnumber10A size of the space between slide.
autoplaynumber | booleanfalseChange slides after a specified interval.
hoverpausebooleantrueStop autoplay on mouseover.
keyboardbooleantrueChange slides with keyboard arrows.
boundbooleanfalseStop runningperView number of slides from the end.
swipeThresholdnumber | boolean80Minimal swipe distance needed to change the slide.
dragThresholdnumber | boolean120Minimal mousedrag distance needed to change the slide.
perTouchnumber | booleanfalseA maximum number of slides moved per single swipe or drag.
touchRationumber0.5Alternate moving distance ratio of swiping and dragging.
touchAnglenumber45Angle required to activate slides moving.
animationDurationnumber400Easing function for the animation.
rewindbooleantrueAllow looping theslider type.
rewindDurationnumber800Duration of the rewinding animation.
animationTimingFuncstring'cubic-bezier(0.165, 0.840, 0.440, 1.000)'Easing function for the animation.
directionstring'ltr'Moving direction mode.
peeknumber | object0The value of the future viewports which have to be visible in the current view.
breakpointsobject{}Collection of options applied at specified media breakpoints.
throttlenumber25Throttle costly events

Outputs

OutputEvent TypeExampleDescription
mountedBeforevoidCalled before first mounting begins. However, the mounting phase has not been started, and components are not bootstrapped yet.
mountedAftervoidCalled right after first mounting. All components have been mounted.
updatedvoidCalled right after updating settings with update() API method.
playedvoidCalled right after starting an instance with play() API method.
pausedvoidCalled right after stopping instance with pause() API method.
buildedBeforevoidCalled right before setting up a slider to its initial state. At this point, classes, translations, and sizes are applied.
buildedAftervoidCalled right after setting up a slider to its initial state. At this point, classes, translations, and sizes are applied.
ranBeforeobject{ "direction": ">", "steps": 0 }Called right before calculating new index and making a transition. The movement schema (eg.=1) string has been parsed.
ranobject{ "direction": ">", "steps": 0 }Called right after calculating new index and before making a transition. The movement schema (eg.=1) string has been parsed.
ranAfterobject{ "direction": ">", "steps": 0 }Called after calculating new index and making a transition. The movement schema (eg.=1) string has been parsed.
ranOffsetobject{ "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.
runStartedobject{ "direction": ">", "steps": 0 }Called right after calculating the new index, but before making a transition, while we did a rewinding to the start index.
runEndedobject{ "direction": ">", "steps": 0 }Called right after calculating the new index, but before making a transition, while we did a rewinding to the last index.
movedobject{ "movement": 0 }Called right before movement transition begins.
movedAfterobject{ "movement": 0 }Called right after movement transition ends.
resizedvoidCalled when the window is being resized. This event throttled.
swipeStartedvoidCalled right after swiping begins.
swipeMovedvoidCalled during swiping movement.
swipeEndedvoidCalled right after swiping ends.
translateJumpedobjectCalled 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

About

Angular wrapper component of Glide carousel library

Topics

Resources

License

Stars

Watchers

Forks

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp