ngsl-carousel
Version:
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.4.
2 lines • 6.71 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngsl-carousel",["exports","@angular/core","@angular/animations","@angular/common"],e):e(t["ngsl-carousel"]={},t.ng.core,t.ng.animations,t.ng.common)}(this,function(t,e,i,n){"use strict";var r=function(){function t(t){this.tpl=t}return t.decorators=[{type:e.Directive,args:[{selector:"[ngslCarouselItem]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef}]},t}(),s=function(){function t(t){this.tpl=t,this.isVisible=!0}return t.decorators=[{type:e.Directive,args:[{selector:"[ngslCarouselDot]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef}]},t}(),o=function(){function t(){}return t.decorators=[{type:e.Directive,args:[{selector:".ngsl-carousel-item-directive"}]}],t}(),l=function(){function t(){}return t.decorators=[{type:e.Directive,args:[{selector:".ngsl-carousel-dot-directive"}]}],t}(),a=function(){function t(t){this.builder=t,this.timing=450,this.rewindTiming=900,this.arrows=!0,this.dots=!0,this.infinity=!0,this.dynamicTiming=!1,this.autoplay=!0,this.perView=1,this.action=null,this.currentSlide=0,this.prevSlide=null,this.nextSlide=null,this.trackWidth={}}return t.prototype.buildAnimation=function(t){var e="REWIND"===this.action?this.rewindTiming:this.timing;return this.builder.build([i.animate(e+"ms cubic-bezier(0.165, 0.840, 0.440, 1.000)",i.style({transform:"translateX("+t+"%)"}))])},t.prototype.changeSlide=function(t){this.setSlidesIndex();var e=100/this.items.length/this.perView*this.currentSlide*this.perView,i=this.buildAnimation(-e);this.player=i.create(this.carousel.nativeElement),this.player.play()},t.prototype.goToSlide=function(t){this.dynamicTiming&&(this.timing=this.timing+55*(t-this.currentSlide)),this.currentSlide=t,this.changeSlide("go to slide")},t.prototype.next=function(){var t=this.items.length;if(this.currentSlide+1===t&&this.infinity)return this.currentSlide=0,this.action="REWIND",void this.changeSlide("rewind to first slide");(this.currentSlide+1!==t||this.infinity)&&(this.currentSlide++,this.action="NEXT_SLIDE",this.changeSlide("next slide"))},t.prototype.prev=function(){var t=this.items.length;if(0===this.currentSlide&&this.infinity)return this.currentSlide=t-1,this.action="REWIND",void this.changeSlide("rewind to last slide");(0!==this.currentSlide||this.infinity)&&(this.currentSlide--,this.action="PREV_SLIDE",this.changeSlide("prev slide"))},t.prototype.setSlidesIndex=function(){this.prevSlide=0===this.currentSlide?this.items.length-1:this.currentSlide-1,this.nextSlide=this.currentSlide===this.items.length-1?0:this.currentSlide+1},t.prototype.removeDotsInDomElements=function(){var i=1<this.perView?this.dotsList.length-this.perView:null;this.dotsList.toArray().forEach(function(t,e){i<e&&(t.isVisible=!1)})},t.prototype.setInitValues=function(){this.setSlidesIndex(),1<this.perView&&this.removeDotsInDomElements(),this.trackWidth={width:100*this.items.length/this.perView+"%"}},t.prototype.ngAfterContentInit=function(){this.setInitValues()},t.decorators=[{type:e.Component,args:[{selector:"ngsl-carousel",exportAs:"ngsl-carousel",template:'<div class="ngsl-carousel">\n <div *ngIf="dots" class="dots" #dotsTrack>\n <div *ngFor="let item of dotsList; let i = index"\n class="ngsl-carousel-dot-directive dot"\n (click)="goToSlide(i)"\n [class.is-current-item]="currentSlide === i">\n <ng-container *ngIf="item.isVisible" [ngTemplateOutlet]="item.tpl"></ng-container>\n </div>\n </div>\n <div class="slide">\n <div class="content">\n <div *ngIf="arrows" class="slide-arrows">\n <input type="button" (click)="prev()" class="prev" [class.is-disabled]="currentSlide === 0" />\n <input type="button" (click)="next()" class="next" [class.is-disabled]="currentSlide === items.length - 1" />\n </div>\n <div class="slide-track" #track [ngStyle]="trackWidth">\n <div *ngFor="let item of items" class="ngsl-carousel-item-directive">\n <ng-container [ngTemplateOutlet]="item.tpl"></ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n',styles:['.ngsl-carousel{overflow:hidden;position:relative}.ngsl-carousel .dots{position:absolute;top:30px;right:40px;font-size:0;z-index:10}.ngsl-carousel .dots .dot{display:inline-block;vertical-align:middle;width:10px;height:10px;border-radius:100%;background-color:#768692;box-sizing:border-box;cursor:pointer}.ngsl-carousel .dots .dot+.dot{margin-left:10px}.ngsl-carousel .dots .dot.is-current-item{width:22px;height:22px;position:relative;border:1px solid #fff;background-color:transparent}.ngsl-carousel .dots .dot.is-current-item:after{content:"";position:absolute;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);width:10px;height:10px;border-radius:100%;background-color:#fff}.slide-track{display:flex;flex-direction:row;flex-wrap:nowrap;height:100%}.ngsl-carousel-item-directive{width:100%;height:100%}.slide-arrows input[type=button]{z-index:10;position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:40px;height:40px;background-color:#768692;opacity:.7;border:0;cursor:pointer;background-repeat:no-repeat;background-position:center}.slide-arrows input[type=button]:hover{opacity:.9}.slide-arrows input[type=button].is-disabled{background-color:#c4bcb7}.slide-arrows input[type=button].is-disabled:hover{opacity:.7}.slide-arrows input[type=button]:focus{outline:0}.slide-arrows input[type=button].prev{-webkit-transform:translateY(-50%) rotate(-180deg);transform:translateY(-50%) rotate(-180deg)}.slide-arrows input[type=button].next{left:auto;right:0}']}]}],t.ctorParameters=function(){return[{type:i.AnimationBuilder}]},t.propDecorators={items:[{type:e.ContentChildren,args:[r]}],itemsElements:[{type:e.ViewChildren,args:[o,{read:e.ElementRef}]}],carousel:[{type:e.ViewChild,args:["track"]}],dotsList:[{type:e.ContentChildren,args:[s]}],dotElements:[{type:e.ViewChildren,args:[l,{read:e.ElementRef}]}],dotTrack:[{type:e.ViewChild,args:["dotTrack"]}],timing:[{type:e.Input}],rewindTiming:[{type:e.Input}],arrows:[{type:e.Input}],dots:[{type:e.Input}],infinity:[{type:e.Input}],dynamicTiming:[{type:e.Input}],autoplay:[{type:e.Input}],perView:[{type:e.Input}]},t}(),d=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule],declarations:[a,r,s,o,l],exports:[a,r,s,o,l]}]}],t}();t.NgslCarouselModule=d,t.ɵe=s,t.ɵd=r,t.ɵb=l,t.ɵa=o,t.ɵc=a,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngsl-carousel.umd.min.js.map