angular-image-slider
Version:
**Slider based on Angular 2+, currently supports Angular 8**
1 lines • 6.23 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"SliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"angular-image-slider","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":18,"character":4},"arguments":["move",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":19,"character":6},"arguments":["in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":19,"character":18},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":20,"character":6},"arguments":["void => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":21,"character":8},"arguments":[{"transform":"translateX(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":22,"character":8},"arguments":[200]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":24,"character":6},"arguments":["left => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":25,"character":8},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":25,"character":21},"arguments":[{"transform":"translateX(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":27,"character":6},"arguments":["void => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":28,"character":8},"arguments":[{"transform":"translateX(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":29,"character":8},"arguments":[200]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":31,"character":6},"arguments":["right => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":32,"character":8},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":32,"character":21},"arguments":[{"transform":"translateX(0)"}]}]}]]}]]}],"template":"<div id=\"container\">\n <div class=\"overlay-left\"></div>\n <div class=\"overlay-right\"></div>\n <div id=\"grid\" class=\"image-cropper\">\n <img *ngFor=\"let url of imageUrls; let i = index\" \n [@move]=\"state\" \n (@move.done)=\"onFinish($event)\" \n (@move.start)=\"onStart($event)\" \n [attr.class]=\"i\" \n [src]=\"url\"\n alt=\"\" />\n </div>\n <div>\n <a id=\"slider-buttons-left\" (click)=\"moveLeft()\">❮</a>\n <a id=\"slider-buttons-right\" (click)=\"moveRight()\">❯</a>\n </div>\n</div>","styles":["#container{position:relative;overflow-x:hidden}#grid{display:-ms-grid;display:grid;height:150;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);-ms-grid-rows:300px;grid-template-rows:300px;grid-column-gap:20px}.overlay-left{position:absolute;display:inline-block;display:-ms-grid;display:grid;width:7rem;height:100%;top:0;left:0;bottom:0;background-color:#fff;z-index:1;cursor:pointer}.overlay-right{position:absolute;display:inline-block;display:-ms-grid;display:grid;width:7rem;height:100%;top:0;right:0;bottom:0;background-color:#fff;z-index:1;cursor:pointer}#grid>div{background-color:gray}#slider-buttons-left{position:absolute;z-index:1000;top:130px;float:left;cursor:pointer;font-size:250%;color:#789;left:60px}#slider-buttons-right{position:absolute;top:130px;z-index:1000;float:right;cursor:pointer;font-size:250%;color:#789;right:60px}.image-cropper{height:300px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.image-cropper img{max-width:100%;max-height:100%;display:block;margin:0 auto}"]}]}],"members":{"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"autoRotate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"autoRotateAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"autoRotateRight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":50,"character":33}]}],"ngOnInit":[{"__symbolic":"method"}],"imageRotate":[{"__symbolic":"method"}],"moveLeft":[{"__symbolic":"method"}],"moveRight":[{"__symbolic":"method"}],"onFinish":[{"__symbolic":"method"}],"onStart":[{"__symbolic":"method"}]}}},"origins":{"SliderModule":"./src/app/slider/slider.module","ɵa":"./src/app/slider/slider.component"},"importAs":"angular-image-slider"}