ngx-carousel/src/ngx-carousel/ngx-carousel.component.metadata.json

An amazing responsive carousel for angular 2+. It have multiple options to control the carousel and also it is very simple to getstarted. Go and try this angular 2+ carousel. Getstarted available in readme file.

[{"__symbolic":"module","version":3,"metadata":{"NgxCarouselComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-carousel","template":"<div #ngxcarousel class=\"ngxcarousel\"><div #forTouch class=\"ngxcarousel-inner\"><div #ngxitems class=\"ngxcarousel-items\"><ng-content select=\"[NgxCarouselItem]\"></ng-content></div><div style=\"clear: both\"></div></div><ng-content select=\"[NgxCarouselPrev]\"></ng-content><ng-content select=\"[NgxCarouselNext]\"></ng-content></div><div #points *ngIf=\"userData.point.visible\"><ul class=\"ngxcarouselPoint\"><li #pointInner *ngFor=\"let i of pointNumbers; let i=index\" [class.active]=\"i==pointers\" (click)=\"moveTo(i)\"></li></ul></div>","styles":["\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    .ngxcarousel .ngxcarousel-inner {\n      position: relative;\n      overflow: hidden;\n    }\n    .ngxcarousel .ngxcarousel-inner .ngxcarousel-items {\n      white-space: nowrap;\n      position: relative;\n    }\n\n    .banner .ngxcarouselPointDefault .ngxcarouselPoint {\n      position: absolute;\n      width: 100%;\n      bottom: 20px;\n    }\n    .banner .ngxcarouselPointDefault .ngxcarouselPoint li {\n      background: rgba(255, 255, 255, 0.55);\n    }\n    .banner .ngxcarouselPointDefault .ngxcarouselPoint li.active {\n      background: white;\n    }\n    .banner .ngxcarouselPointDefault .ngxcarouselPoint li:hover {\n      cursor: pointer;\n    }\n\n    .ngxcarouselPointDefault .ngxcarouselPoint {\n      list-style-type: none;\n      text-align: center;\n      padding: 12px;\n      margin: 0;\n      white-space: nowrap;\n      overflow: auto;\n      box-sizing: border-box;\n    }\n    .ngxcarouselPointDefault .ngxcarouselPoint li {\n      display: inline-block;\n      border-radius: 50%;\n      background: rgba(0, 0, 0, 0.55);\n      padding: 4px;\n      margin: 0 4px;\n      transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);\n      transition: 0.4s;\n    }\n    .ngxcarouselPointDefault .ngxcarouselPoint li.active {\n      background: #6b6b6b;\n      transform: scale(1.8);\n    }\n    .ngxcarouselPointDefault .ngxcarouselPoint li:hover {\n      cursor: pointer;\n    }\n  "]}]}],"members":{"userData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["inputs"]}]}],"moveToSlide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["moveToSlide"]}]}],"carouselLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["carouselLoad"]}]}],"onMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onMove"]}]}],"afterCarouselViewed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["afterCarouselViewed"]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./ngx-carousel.directive","name":"NgxCarouselItemDirective"}]}]}],"points":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["pointInner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"next":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./ngx-carousel.directive","name":"NgxCarouselNextDirective"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"prev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./ngx-carousel.directive","name":"NgxCarouselPrevDirective"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"carouselMain1":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["ngxcarousel",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"carouselInner1":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["ngxitems",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"carousel1":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["main",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"pointMain":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["points",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"forTouch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["forTouch",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResizing":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}],"storeCarouselData":[{"__symbolic":"method"}],"touch":[{"__symbolic":"method"}],"touchHandling":[{"__symbolic":"method"}],"onWindowScrolling":[{"__symbolic":"method"}],"carouselPoint":[{"__symbolic":"method"}],"carouselPointActiver":[{"__symbolic":"method"}],"moveTo":[{"__symbolic":"method"}],"carouselSize":[{"__symbolic":"method"}],"carouselScrollOne":[{"__symbolic":"method"}],"carouselScrollTwo":[{"__symbolic":"method"}],"btnBoolean":[{"__symbolic":"method"}],"transformStyle":[{"__symbolic":"method"}],"carouselLoadTrigger":[{"__symbolic":"method"}],"generateID":[{"__symbolic":"method"}],"carouselInterval":[{"__symbolic":"method"}],"carouselIntervalEvent":[{"__symbolic":"method"}],"carouselAnimator":[{"__symbolic":"method"}],"buttonControl":[{"__symbolic":"method"}],"setStyle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NgxCarouselComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-carousel","template":"<div #ngxcarousel class=\"ngxcarousel\"><div #forTouch class=\"ngxcarousel-inner\"><div #ngxitems class=\"ngxcarousel-items\"><ng-content select=\"[NgxCarouselItem]\"></ng-content></div><div style=\"clear: both\"></div></div><ng-content select=\"[NgxCarouselPrev]\"></ng-content><ng-content select=\"[NgxCarouselNext]\"></ng-content></div><div #points *ngIf=\"userData.point.visible\"><ul class=\"ngxcarouselPoint\"><li #pointInner *ngFor=\"let i of pointNumbers; let i=index\" [class.active]=\"i==pointers\" (click)=\"moveTo(i)\"></li></ul></div>","styles":["\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    .ngxcarousel .ngxcarousel-inner {\n      position: relative;\n      overflow: hidden;\n    }\n    .ngxcarousel .ngxcarousel-inner .ngxcarousel-items {\n      white-space: nowrap;\n      position: relative;\n    }\n\n    .banner .ngxcarouselPointDefault .ngxcarouselPoint {\n      position: absolute;\n      width: 100%;\n      bottom: 20px;\n    }\n    .banner .ngxcarouselPointDefault .ngxcarouselPoint li {\n      background: rgba(255, 255, 255, 0.55);\n    }\n    .banner .ngxcarouselPointDefault .ngxcarouselPoint li.active {\n      background: white;\n    }\n    .banner .ngxcarouselPointDefault .ngxcarouselPoint li:hover {\n      cursor: pointer;\n    }\n\n    .ngxcarouselPointDefault .ngxcarouselPoint {\n      list-style-type: none;\n      text-align: center;\n      padding: 12px;\n      margin: 0;\n      white-space: nowrap;\n      overflow: auto;\n      box-sizing: border-box;\n    }\n    .ngxcarouselPointDefault .ngxcarouselPoint li {\n      display: inline-block;\n      border-radius: 50%;\n      background: rgba(0, 0, 0, 0.55);\n      padding: 4px;\n      margin: 0 4px;\n      transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);\n      transition: 0.4s;\n    }\n    .ngxcarouselPointDefault .ngxcarouselPoint li.active {\n      background: #6b6b6b;\n      transform: scale(1.8);\n    }\n    .ngxcarouselPointDefault .ngxcarouselPoint li:hover {\n      cursor: pointer;\n    }\n  "]}]}],"members":{"userData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["inputs"]}]}],"moveToSlide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["moveToSlide"]}]}],"carouselLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["carouselLoad"]}]}],"onMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onMove"]}]}],"afterCarouselViewed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["afterCarouselViewed"]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./ngx-carousel.directive","name":"NgxCarouselItemDirective"}]}]}],"points":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["pointInner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"next":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./ngx-carousel.directive","name":"NgxCarouselNextDirective"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"prev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./ngx-carousel.directive","name":"NgxCarouselPrevDirective"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"carouselMain1":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["ngxcarousel",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"carouselInner1":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["ngxitems",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"carousel1":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["main",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"pointMain":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["points",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"forTouch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["forTouch",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResizing":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}],"storeCarouselData":[{"__symbolic":"method"}],"touch":[{"__symbolic":"method"}],"touchHandling":[{"__symbolic":"method"}],"onWindowScrolling":[{"__symbolic":"method"}],"carouselPoint":[{"__symbolic":"method"}],"carouselPointActiver":[{"__symbolic":"method"}],"moveTo":[{"__symbolic":"method"}],"carouselSize":[{"__symbolic":"method"}],"carouselScrollOne":[{"__symbolic":"method"}],"carouselScrollTwo":[{"__symbolic":"method"}],"btnBoolean":[{"__symbolic":"method"}],"transformStyle":[{"__symbolic":"method"}],"carouselLoadTrigger":[{"__symbolic":"method"}],"generateID":[{"__symbolic":"method"}],"carouselInterval":[{"__symbolic":"method"}],"carouselIntervalEvent":[{"__symbolic":"method"}],"carouselAnimator":[{"__symbolic":"method"}],"buttonControl":[{"__symbolic":"method"}],"setStyle":[{"__symbolic":"method"}]}}}}]