ngx-carousel
Version:
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.
1 lines • 18.5 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/platform-browser"),require("@angular/common"),require("hammerjs")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/platform-browser","@angular/common","hammerjs"],e):e((t.ng=t.ng||{},t.ng.ngxcarousel=t.ng.ngxcarousel||{}),t.ng.core,t.ng["platform-browser"],t.ng.common,t.Hammer)}(this,function(t,e,s,a,i){"use strict";var n=function(){return function(){}}();n.decorators=[{type:e.Directive,args:[{selector:"[NgxCarouselItem]"}]}],n.ctorParameters=function(){return[]};var r=function(){return function(){}}();r.decorators=[{type:e.Directive,args:[{selector:"[NgxCarouselNext]"}]}],r.ctorParameters=function(){return[]};var o=function(){return function(){}}();o.decorators=[{type:e.Directive,args:[{selector:"[NgxCarouselPrev]"}]}],o.ctorParameters=function(){return[]};var l=function(){function t(t,s){this.el=t,this.renderer=s,this.carouselLoad=new e.EventEmitter,this.onMove=new e.EventEmitter,this.afterCarouselViewed=new e.EventEmitter,this.pauseCarousel=!1,this.Arr1=Array,this.pointNumbers=[],this.data={type:"fixed",classText:"",deviceType:"lg",items:0,load:0,deviceWidth:0,carouselWidth:0,itemWidth:0,visibleItems:{start:0,end:0},slideItems:0,itemWidthPer:0,itemLength:0,currentSlide:0,easing:"cubic-bezier(0, 0, 0.2, 1)",speed:400,transform:{xs:0,sm:0,md:0,lg:0,all:0},loop:!1,dexVal:0,touchTransform:0,touch:{active:!1,swipe:"",velocity:0},isEnd:!1,isFirst:!0,isLast:!1}}return t.prototype.ngOnInit=function(){this.carousel=this.el.nativeElement,this.carouselMain=this.carouselMain1.nativeElement,this.carouselInner=this.carouselInner1.nativeElement,this.carouselItems=this.carouselInner.getElementsByClassName("item"),this.rightBtn=this.next.nativeElement,this.leftBtn=this.prev.nativeElement,this.data.type=0!==this.userData.grid.all?"fixed":"responsive",this.data.loop=this.userData.loop||!1,this.data.easing=this.userData.easing||"cubic-bezier(0, 0, 0.2, 1)",this.data.touch.active=this.userData.touch||!1,this.carouselSize()},t.prototype.ngAfterContentInit=function(){var t=this;this.renderer.listen(this.leftBtn,"click",function(){return t.carouselScrollOne(0)}),this.renderer.listen(this.rightBtn,"click",function(){return t.carouselScrollOne(1)}),this.carouselCssNode=this.renderer.createElement(this.carousel,"style"),this.storeCarouselData(),this.carouselInterval(),this.onWindowScrolling(),this.buttonControl(),this.touch(),this.itemsSubscribe=this.items.changes.subscribe(function(e){t.data.isLast=!1,t.carouselPoint(),t.buttonControl()}),this.moveToSlide&&this.moveTo(this.moveToSlide)},t.prototype.ngAfterViewInit=function(){if(this.userData.point.pointStyles){var t=this.userData.point.pointStyles.replace(/.ngxcarouselPoint/g,"."+this.data.classText+" .ngxcarouselPoint"),e=this.renderer.createElement(this.carousel,"style");this.renderer.createText(e,t)}else this.userData.point&&this.userData.point.visible&&this.renderer.setElementClass(this.pointMain.nativeElement,"ngxcarouselPointDefault",!0);this.afterCarouselViewed.emit(this.data)},t.prototype.ngOnDestroy=function(){clearInterval(this.carouselInt),this.itemsSubscribe&&this.itemsSubscribe.unsubscribe()},t.prototype.onResizing=function(t){var e=this;clearTimeout(this.onResize),this.onResize=setTimeout(function(){e.data.deviceWidth!==t.target.outerWidth&&e.storeCarouselData()},500)},t.prototype.ngOnChanges=function(t){this.moveToSlide>-1&&this.moveTo(t.moveToSlide.currentValue)},t.prototype.storeCarouselData=function(){this.data.deviceWidth=window.innerWidth,this.data.carouselWidth=this.carouselMain.offsetWidth,"responsive"===this.data.type?(this.data.deviceType=this.data.deviceWidth>=1200?"lg":this.data.deviceWidth>=992?"md":this.data.deviceWidth>=768?"sm":"xs",this.data.items=this.userData.grid[this.data.deviceType],this.data.itemWidth=this.data.carouselWidth/this.data.items):(this.data.items=Math.trunc(this.data.carouselWidth/this.userData.grid.all),this.data.itemWidth=this.userData.grid.all,this.data.deviceType="all"),this.data.slideItems=+(this.userData.slide<this.data.items?this.userData.slide:this.data.items),this.data.load=this.userData.load>=this.data.slideItems?this.userData.load:this.data.slideItems,this.data.speed=this.userData.speed||this.userData.speed>-1?this.userData.speed:400,this.carouselPoint()},t.prototype.touch=function(){var t=this;if(this.data.touch.active){var e=new i(this.forTouch.nativeElement);e.get("pan").set({direction:i.DIRECTION_HORIZONTAL}),e.on("panstart",function(e){t.data.carouselWidth=t.carouselInner.offsetWidth,t.data.touchTransform=t.data.transform[t.data.deviceType],t.data.dexVal=0,t.setStyle(t.carouselInner,"transition","")}),e.on("panleft",function(e){t.touchHandling("panleft",e)}),e.on("panright",function(e){t.touchHandling("panright",e)}),e.on("panend",function(e){t.data.touch.velocity=e.velocity,"panright"===t.data.touch.swipe?t.carouselScrollOne(0):t.carouselScrollOne(1)}),e.on("hammer.input",function(t){t.srcEvent.stopPropagation()})}},t.prototype.touchHandling=function(t,e){if(0!==e.center.x){var s=(e=Math.abs(e.deltaX))-this.data.dexVal;s="responsive"===this.data.type?Math.abs(e-this.data.dexVal)/this.data.carouselWidth*100:s,this.data.dexVal=e,this.data.touch.swipe=t,this.data.touchTransform="panleft"===t?s+this.data.touchTransform:this.data.touchTransform-s,this.data.touchTransform>0?this.setStyle(this.carouselInner,"transform","responsive"===this.data.type?"translate3d(-"+this.data.touchTransform+"%, 0px, 0px)":"translate3d(-"+this.data.touchTransform+"px, 0px, 0px)"):this.data.touchTransform=0}},t.prototype.onWindowScrolling=function(){var t=this.carousel.offsetTop,e=window.scrollY,s=window.innerHeight,a=this.carousel.offsetHeight;t<=e+s-a/4&&t+a/2>=e?this.carouselIntervalEvent(0):this.carouselIntervalEvent(1)},t.prototype.carouselPoint=function(){var t=this.items.length-(this.data.items-this.data.slideItems);this.pointIndex=Math.ceil(t/this.data.slideItems);var e=[];if(this.pointIndex>1||!this.userData.point.hideOnSingleSlide)for(var s=0;s<this.pointIndex;s++)e.push(s);this.pointNumbers=e,this.carouselPointActiver(),this.pointIndex<=1?this.btnBoolean(1,1):0!==this.data.currentSlide||this.data.loop?this.btnBoolean(0,0):this.btnBoolean(1,0),this.buttonControl()},t.prototype.carouselPointActiver=function(){var t=Math.ceil(this.data.currentSlide/this.data.slideItems);this.pointers=t},t.prototype.moveTo=function(t){if(this.pointers!==t&&t<this.pointIndex){var e=0,s=this.data.currentSlide<t?1:0;0===t?(this.btnBoolean(1,0),e=t*this.data.slideItems):t===this.pointIndex-1?(this.btnBoolean(0,1),e=this.items.length-this.data.items):(this.btnBoolean(0,0),e=t*this.data.slideItems),this.carouselScrollTwo(s,e,this.data.speed)}},t.prototype.carouselSize=function(){this.data.classText=this.generateID();var t="",e="."+this.data.classText+" > .ngxcarousel > .ngxcarousel-inner > .ngxcarousel-items >";"banner"===this.userData.custom&&this.renderer.setElementClass(this.carousel,"banner",!0),"lazy"===this.userData.animation&&(t+=e+" .item {transition: transform .6s ease;}");var s="";s="responsive"===this.data.type?"@media (max-width:767px){"+("mobile"===this.userData.type?e+" .item {width: "+95/this.userData.grid.xs+"%}":e+" .item {width: "+100/this.userData.grid.xs+"%}")+"}\n @media (min-width:768px){"+(e+" .item {width: "+100/this.userData.grid.sm+"%}")+"}\n @media (min-width:992px){"+(e+" .item {width: "+100/this.userData.grid.md+"%}")+"}\n @media (min-width:1200px){"+(e+" .item {width: "+100/this.userData.grid.lg+"%}")+"}":e+" .item {width: "+this.userData.grid.all+"px}",this.renderer.setElementClass(this.carousel,this.data.classText,!0);var a=this.renderer.createElement(this.carousel,"style");this.renderer.createText(a,t+" "+s)},t.prototype.carouselScrollOne=function(t){var e=this.data.speed,s=0,a=Math.ceil(this.data.dexVal/this.data.itemWidth);if(this.setStyle(this.carouselInner,"transform",""),1!==this.pointIndex)if(0!==t||(this.data.loop||this.data.isFirst)&&!this.data.loop)1!==t||(this.data.loop||this.data.isLast)&&!this.data.loop||(this.items.length<=this.data.currentSlide+this.data.items+this.data.slideItems&&!this.data.isLast?(s=this.items.length-this.data.items,this.btnBoolean(0,1)):this.data.isLast?(s=0,e=400,this.btnBoolean(1,0)):(this.btnBoolean(0,0),a>this.data.slideItems?(s=this.data.currentSlide+this.data.slideItems+(a-this.data.slideItems),e=200):s=this.data.currentSlide+this.data.slideItems),this.carouselScrollTwo(t,s,e));else{this.data.slideItems,this.pointIndex;var i=this.data.currentSlide-this.data.slideItems+this.data.slideItems;this.btnBoolean(0,1),0===this.data.currentSlide?(s=this.items.length-this.data.items,e=400,this.btnBoolean(0,1)):this.data.slideItems>=i?(s=0,this.btnBoolean(1,0)):(this.btnBoolean(0,0),a>this.data.slideItems?(s=this.data.currentSlide-a,e=200):s=this.data.currentSlide-this.data.slideItems),this.carouselScrollTwo(t,s,e)}},t.prototype.carouselScrollTwo=function(t,e,s){if(this.data.visibleItems.start=e,this.data.visibleItems.end=e+this.data.items-1,this.userData.animation&&this.carouselAnimator(t,e+1,e+this.data.items,s,Math.abs(this.data.currentSlide-e)),0!==this.data.dexVal){var a=Math.abs(this.data.touch.velocity),i=Math.floor(this.data.dexVal/a/this.data.dexVal*(this.data.deviceWidth-this.data.dexVal));s=(i=i>s?s:i)<200?200:i,this.data.dexVal=0}this.setStyle(this.carouselInner,"transition","transform "+s+"ms "+this.data.easing),this.data.itemLength=this.items.length,this.transformStyle(e),this.data.currentSlide=e,this.onMove.emit(this.data),this.carouselPointActiver(),this.carouselLoadTrigger(),this.buttonControl()},t.prototype.btnBoolean=function(t,e){this.data.isFirst=!!t,this.data.isLast=!!e},t.prototype.transformStyle=function(t){var e="";"responsive"===this.data.type?(this.data.transform.xs=100/this.userData.grid.xs*t,this.data.transform.sm=100/this.userData.grid.sm*t,this.data.transform.md=100/this.userData.grid.md*t,this.data.transform.lg=100/this.userData.grid.lg*t,e="@media (max-width: 767px) {\n ."+this.data.classText+" > .ngxcarousel > .ngxcarousel-inner > .ngxcarousel-items { transform: translate3d(-"+this.data.transform.xs+"%, 0, 0); } }\n @media (min-width: 768px) {\n ."+this.data.classText+" > .ngxcarousel > .ngxcarousel-inner > .ngxcarousel-items { transform: translate3d(-"+this.data.transform.sm+"%, 0, 0); } }\n @media (min-width: 992px) {\n ."+this.data.classText+" > .ngxcarousel > .ngxcarousel-inner > .ngxcarousel-items { transform: translate3d(-"+this.data.transform.md+"%, 0, 0); } }\n @media (min-width: 1200px) {\n ."+this.data.classText+" > .ngxcarousel > .ngxcarousel-inner > .ngxcarousel-items { transform: translate3d(-"+this.data.transform.lg+"%, 0, 0); } }"):(this.data.transform.all=this.userData.grid.all*t,e="."+this.data.classText+" > .ngxcarousel > .ngxcarousel-inner > .ngxcarousel-items { transform: translate3d(-"+this.data.transform.all+"px, 0, 0);"),this.carouselCssNode.innerHTML=e},t.prototype.carouselLoadTrigger=function(){"number"==typeof this.userData.load&&this.items.length-this.data.load<=this.data.currentSlide+this.data.items&&this.carouselLoad.emit(this.data.currentSlide)},t.prototype.generateID=function(){for(var t="",e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",s=0;s<6;s++)t+=e.charAt(Math.floor(Math.random()*e.length));return"ngxcarousel"+t},t.prototype.carouselInterval=function(){var t=this;"number"==typeof this.userData.interval&&this.data.loop&&(this.renderer.listen(this.carouselMain,"touchstart",function(){t.carouselIntervalEvent(1)}),this.renderer.listen(this.carouselMain,"touchend",function(){t.carouselIntervalEvent(0)}),this.renderer.listen(this.carouselMain,"mouseenter",function(){t.carouselIntervalEvent(1)}),this.renderer.listen(this.carouselMain,"mouseleave",function(){t.carouselIntervalEvent(0)}),this.renderer.listenGlobal("window","scroll",function(){clearTimeout(t.onScrolling),t.onScrolling=setTimeout(function(){t.onWindowScrolling()},600)}),this.carouselInt=setInterval(function(){!t.pauseCarousel&&t.carouselScrollOne(1)},this.userData.interval))},t.prototype.carouselIntervalEvent=function(t){var e=this;this.evtValue=t,0===this.evtValue?(clearTimeout(this.pauseInterval),this.pauseInterval=setTimeout(function(){0===e.evtValue&&(e.pauseCarousel=!1)},this.userData.interval)):this.pauseCarousel=!0},t.prototype.carouselAnimator=function(t,e,s,a,i){var n=this,r=i<5?i:5;if(r=1===r?3:r,1===t)for(o=e-1;o<s;o++)r*=2,this.carouselItems[o]&&this.setStyle(this.carouselItems[o],"transform","translate3d("+r+"px, 0, 0)");else for(var o=s-1;o>=e-1;o--)r*=2,this.carouselItems[o]&&this.setStyle(this.carouselItems[o],"transform","translate3d(-"+r+"px, 0, 0)");setTimeout(function(){for(var t=0;t<n.items.length;t++)n.setStyle(n.carouselItems[t],"transform","translate3d(0, 0, 0)")},.7*a)},t.prototype.buttonControl=function(){!this.data.loop||this.data.isFirst&&this.data.isLast?(this.setStyle(this.leftBtn,"display",this.data.isFirst?"none":"block"),this.setStyle(this.rightBtn,"display",this.data.isLast?"none":"block")):(this.setStyle(this.leftBtn,"display","block"),this.setStyle(this.rightBtn,"display","block"))},t.prototype.setStyle=function(t,e,s){this.renderer.setElementStyle(t,e,s)},t}();l.decorators=[{type:e.Component,args:[{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 "]}]}],l.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer}]},l.propDecorators={userData:[{type:e.Input,args:["inputs"]}],moveToSlide:[{type:e.Input,args:["moveToSlide"]}],carouselLoad:[{type:e.Output,args:["carouselLoad"]}],onMove:[{type:e.Output,args:["onMove"]}],afterCarouselViewed:[{type:e.Output,args:["afterCarouselViewed"]}],items:[{type:e.ContentChildren,args:[n]}],points:[{type:e.ViewChildren,args:["pointInner",{read:e.ElementRef}]}],next:[{type:e.ContentChild,args:[r,{read:e.ElementRef}]}],prev:[{type:e.ContentChild,args:[o,{read:e.ElementRef}]}],carouselMain1:[{type:e.ViewChild,args:["ngxcarousel",{read:e.ElementRef}]}],carouselInner1:[{type:e.ViewChild,args:["ngxitems",{read:e.ElementRef}]}],carousel1:[{type:e.ViewChild,args:["main",{read:e.ElementRef}]}],pointMain:[{type:e.ViewChild,args:["points",{read:e.ElementRef}]}],forTouch:[{type:e.ViewChild,args:["forTouch",{read:e.ElementRef}]}],onResizing:[{type:e.HostListener,args:["window:resize",["$event"]]}]};var h=function(){return function(){this.classes="item"}}();h.decorators=[{type:e.Component,args:[{selector:"ngx-item",template:"<ng-content></ng-content>",styles:["\n :host {\n display: inline-block;\n white-space: initial;\n vertical-align: top;\n }\n "]}]}],h.ctorParameters=function(){return[]},h.propDecorators={classes:[{type:e.HostBinding,args:["class"]}]};var d=function(){return function(){this.classes="item"}}();d.decorators=[{type:e.Component,args:[{selector:"ngx-tile",template:'<div class="tile"><ng-content></ng-content></div>',styles:["\n :host {\n display: inline-block;\n white-space: initial;\n padding: 10px;\n box-sizing: border-box;\n vertical-align: top;\n }\n\n .tile {\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);\n }\n\n * {\n box-sizing: border-box;\n }\n "]}]}],d.ctorParameters=function(){return[]},d.propDecorators={classes:[{type:e.HostBinding,args:["class"]}]};var c=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var s in e)e.hasOwnProperty(s)&&(t[s]=e[s])};return function(e,s){function a(){this.constructor=e}t(e,s),e.prototype=null===s?Object.create(s):(a.prototype=s.prototype,new a)}}(),u=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.overrides={swipe:{velocity:.4,threshold:20},pan:{velocity:.4,threshold:20}},e}return c(e,t),e}(s.HammerGestureConfig),p=function(){return function(){}}();p.decorators=[{type:e.NgModule,args:[{imports:[a.CommonModule],exports:[l,h,d,n,r,o],declarations:[l,h,d,n,r,o],providers:[{provide:s.HAMMER_GESTURE_CONFIG,useClass:u}]}]}],p.ctorParameters=function(){return[]};var m=function(){return function(){}}(),g=function(){return function(){}}();t.NgxCarouselModule=p,t.NgxCarousel=g,t.NgxCarouselStore=m,Object.defineProperty(t,"__esModule",{value:!0})});