ngx-slider/bundles/ngx-slider.umd.min.js

This project is a carousel slider with some basic configuration for Angular 4

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],n):n(t["ngx-slider"]={},t.ng.core,t.ng.common)}(this,function(t,n,e){"use strict";var i=function(){function t(t){this.el=t,this.currentItemIndex=0,this.activeTitle=""}return t.prototype.ngOnInit=function(){this.sliderItems=this.init.items,this.config=this.init.config,this.setTitle(),this.resize(),this.setSliderStyle()},t.prototype.onResize=function(){this.resize()},t.prototype.resize=function(){this.componentWidth=this.el.nativeElement.parentElement.clientWidth-this.getPreviewWidth()*this.getNumberOfPreview(),this.setSlideStyle()},t.prototype.setSliderStyle=function(){var t=this.getWrapperWidth()+"px",n=this.getWrapperLeft()?"-"+(this.getWrapperLeft()-this.getPreviewWidth())+"px":0;this.sliderStyle={width:t,left:n,transition:"left "+this.config.transitionDuration+"s"}},t.prototype.setSlideStyle=function(){this.slideStyle={width:this.componentWidth+"px"}},t.prototype.setTitle=function(){this.activeTitle=this.sliderItems.length?this.sliderItems[this.currentItemIndex].title:""},t.prototype.getNumberOfPreview=function(){return this.config.showPreview?this.config.numberOfPreview:0},t.prototype.getPreviewWidth=function(){return this.config.showPreview?this.config.previewWidth:0},t.prototype.getWrapperWidth=function(){return this.sliderItems.length?this.sliderItems.length*this.componentWidth:this.componentWidth},t.prototype.getWrapperLeft=function(){return this.currentItemIndex*this.componentWidth},t.prototype.goTo=function(t){"next"===t?this.sliderItems.length-1>this.currentItemIndex?this.currentItemIndex++:this.currentItemIndex=this.config.loop?0:this.currentItemIndex:"previous"===t?this.currentItemIndex>0?this.currentItemIndex--:this.currentItemIndex=this.config.loop?this.sliderItems.length-1:this.currentItemIndex:this.currentItemIndex=t,this.setSliderStyle(),this.setTitle()},t}();i.decorators=[{type:n.Component,args:[{selector:"ngx-slider",template:'\n    <h4 *ngIf="config.showTitle" class="slide-title" [innerHTML]="activeTitle"></h4>\n    <div class="slider-container">\n      <div class="slider-row">\n        <div [ngStyle]="sliderStyle" class="slide-wrapper">\n          <div *ngFor="let slide of sliderItems; let i=index;" \n               [class.active]="i === currentItemIndex"\n               [ngStyle]="slideStyle" \n               class="slide-item">\n               <div [ngStyle]="{\'background-image\': \'url(\' + slide.src + \')\'}" class="slide"></div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf="sliderItems.length > 1 && config.showNavigator">\n          <button (click)="goTo(\'next\')" class="slider-nav next">\n              <i class="fa fa-chevron-right" aria-hidden="true"></i>\n            </button>\n            <button (click)="goTo(\'previous\')" class="slider-nav previous">\n              <i class="fa fa-chevron-left" aria-hidden="true"></i>\n            </button>\n      </ng-container>\n      <div *ngIf="sliderItems.length > 1 && config.showDots" class="slider-dots">\n        <ul>\n          <li *ngFor="let slide of sliderItems; let i=index;" [class.active]="i === currentItemIndex">\n            <button (click)="goTo(i)" class="dots">\n              <i class="fa fa-circle" aria-hidden="true"></i>\n            </button>\n          </li>\n        </ul>\n      </div>\n    </div>\n  ',styles:["\n    .slider-container {\n        width: 100%;\n        height: 100%;\n        position: relative;\n        overflow: hidden;\n    }\n    .slider-row {\n        width: 100%;\n        height: 100%;\n    }\n    .slide-wrapper {\n        position: absolute;\n        height: 100%;\n    }\n    .slide-wrapper .active {\n        opacity: 1;\n        -webkit-transition: opacity 1s, -webkit-transform 1s;\n        transition: opacity 1s, -webkit-transform 1s;\n        transition: opacity 1s, transform 1s;\n        transition: opacity 1s, transform 1s, -webkit-transform 1s;\n    }\n    .slide-item {\n        display: inline-block;\n        height: 100%;\n        opacity: 0.5;\n        -webkit-transition: opacity 1s, -webkit-transform 1s;\n        transition: opacity 1s, -webkit-transform 1s;\n        transition: opacity 1s, transform 1s;\n        transition: opacity 1s, transform 1s, -webkit-transform 1s;\n    }\n    .slide {\n        height: 100%;\n        background-repeat: no-repeat;\n        background-size: auto;\n        background-position: center;\n        margin: 0 5px;\n    }\n    .slide-title {\n        font-size: 1.5rem;\n        padding: 10px;\n    }\n    .slider-nav {\n        background-color: rgba(0,0,0,0.2);\n        position: absolute;\n        top: 35%;\n        border: none;\n        -webkit-box-shadow: none;\n                box-shadow: none;\n        color: white;\n        font-size: 2rem;\n        padding: 1.5rem;\n    }\n\n    .next {\n        right: 0;\n    }\n\n    .previous {\n        left: 0;\n    }\n\n    .slider-dots {\n        position: absolute;\n        bottom: 3%;\n        width: 100%;\n        text-align: center;\n    }\n\n    .slider-dots ul {\n        margin: 0;\n        padding: 0;\n    }\n\n    .slider-dots ul li {\n        display: inline-block;\n        list-style: none;\n        margin: 0 3px;\n    } \n\n    .slider-dots ul li.active i {\n        color: #00C24F;\n    }\n\n    .dots {\n        padding: 0;\n        border: 0;\n        -webkit-box-shadow: none;\n                box-shadow: none;\n        background: none;\n    }\n  "]}]}],i.ctorParameters=function(){return[{type:n.ElementRef}]},i.propDecorators={init:[{type:n.Input}],onResize:[{type:n.HostListener,args:["window:resize",["$event.target"]]}]};var s=function(){return function(){}}();s.decorators=[{type:n.NgModule,args:[{imports:[e.CommonModule],declarations:[i],exports:[i]}]}],s.ctorParameters=function(){return[]};var r=function(){return function(){this.showDots=!0,this.showNavigator=!0,this.showTitle=!0,this.loop=!0,this.showPreview=!0,this.numberOfPreview=2,this.previewWidth=50,this.transitionDuration=1}}(),o=function(){return function(){this.items=[],this.config=new r}}();t.Slider=o,t.SliderModule=s,t.ɵa=i,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-slider.umd.min.js.map