Slider.min.js

export default class Slider{constructor({track:a,start:b,autoplay:c,infinity:d,showSlide:e,buttons:f,dots:g,interval:h,threshold:i,margin:j,overflow:k=1,transition:l="0.7s transform linear"}){if(!("object"==typeof a&&a?.offsetWidth))throw"track \u043D\u0435 \u0431\u044B\u043B \u0437\u0430\u0434\u0430\u043D";if(!a.querySelector(".slide"))throw"\u043A\u043B\u0430\u0441\u0441\u0430 .slide \u0432\u043D\u0443\u0442\u0440\u0438 track \u043D\u0435 \u0437\u0430\u0434\u0430\u043D\u043E";if(f&&!("object"==typeof f&&f?.offsetWidth))throw"\u042D\u043B\u0435\u043C\u0435\u043D\u0442 buttons \u0431\u044B\u043B \u0437\u0430\u0434\u0430\u043D \u043D\u0435 \u043F\u0440\u0430\u0432\u0438\u043B\u044C\u043D\u043E";if(g&&!("object"==typeof g&&g?.offsetWidth))throw"\u042D\u043B\u0435\u043C\u0435\u043D\u0442 dots \u0431\u044B\u043B \u0437\u0430\u0434\u0430\u043D \u043D\u0435 \u043F\u0440\u0430\u0432\u0438\u043B\u044C\u043D\u043E";if("string"!=typeof l)throw"transition \u0434\u043E\u043B\u0436\u0435\u043D \u0431\u044B\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u043E\u0439";this.track=a,this.parentTrack=a.parentElement,this.threshold=i??.2,this.slides=a.querySelectorAll(".slide"),this.width=a.querySelector(".slide").offsetWidth,this.infinity=d?1:0,this.showSlide=+e||1,this.buttons=f&&{wrap:f,prev:f.querySelectorAll(".prev"),next:f.querySelectorAll(".next")},this.dots=g&&g.querySelectorAll(".dot"),this.transition=l.toString(),this.active=0<b?+b:0,this.margin=+j||0,this.overflow=k?1:0,this.interval=10<h?+h:4e3,this.autoplay=0<c?1:0,this.stopAutoPlay=null,this.callbackSwipe=a=>this.swipeStart(a),this.callbackBtnsPrev=()=>this.slide("prev"),this.callbackBtnsNext=()=>this.slide("next"),this.callbackDots=a=>{this.infinity?this.slide(a+1):this.slide(a)},this.callbackMouseenterParentTrack=()=>this.autoPlay(1),this.callbackMouseleaveParentTrack=()=>{this.autoplay&&!this.allowSwipe&&this.autoPlay()},this.callbackTransitionend=()=>{this.infinity&&(this.toggleClass(this.slides[this.active],"remove"),this.track.style.transition="0s transform linear",0==this.active?(this.active=this.slides.length-2,this.transform()):this.active==this.slides.length-1&&(this.active=1,this.transform()),this.toggleClass(this.slides[this.active],"add")),this.allowSwipe=0},this.callbackResize=()=>{this.infinity?this.slide(1):this.slide(0),this.media(window.innerWidth)}}init(a=1){try{if(a&&this.controlResize(),this.infinity){this.active=0==this.active?this.active+1:this.active;const a=this.slides[0].cloneNode(!0),b=this.slides[this.slides.length-1].cloneNode(!0);this.toggleClass(a,"add","cloned"),this.toggleClass(b,"add","cloned"),this.track.prepend(b),this.track.append(a),this.slides=this.track.querySelectorAll(".slide")}if(this.transform(),this.toggleClass(this.slides[this.active],"add"),this.overflow&&(this.parentTrack.style.overflow="hidden"),this.track.style.touchAction="pan-y",this.track.style.userSelect="none",this.margin&&this.setMargin(this.margin),this.autoplay&&this.autoPlay(),this.buttons){if(0==this.buttons.prev.length||0==this.buttons.next.length)throw"\u041D\u0435 \u043E\u0434\u043D\u043E\u0439 \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E";this.buttons.prev.forEach(a=>{0==this.active&&this.toggleClass(a,"add","hidden"),a.addEventListener("click",this.callbackBtnsPrev)}),this.buttons.next.forEach(a=>{this.active==this.slides.length-this.showSlide&&this.toggleClass(a,"add","hidden"),a.addEventListener("click",this.callbackBtnsNext)})}if(this.dots){if(0==this.dots.length)throw"\u041D\u0435 \u043E\u0434\u043D\u043E\u0433\u043E .dot \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E";this.dots.forEach((a,b)=>{a.addEventListener("click",this.callbackDots.bind(this,[b]))})}this.track.addEventListener("mousedown",this.callbackSwipe),this.track.addEventListener("touchstart",this.callbackSwipe),this.track.addEventListener("transitionend",this.callbackTransitionend),this.parentTrack.addEventListener("mouseenter",this.callbackMouseenterParentTrack),this.parentTrack.addEventListener("mouseleave",this.callbackMouseleaveParentTrack)}catch(a){console.error(a,"start")}}destroy(a=1){try{if(a&&this.stopControlResize(),this.infinity){const a=this.track.querySelectorAll(".slide.cloned");a.forEach(a=>a.remove())}this.transform("destroy"),this.toggleClass(this.slides[this.active],"remove"),this.overflow&&(this.parentTrack.style.overflow=""),this.track.style.touchAction="",this.track.style.userSelect="",this.margin&&this.setMargin("destroy"),this.autoPlay(1),this.buttons&&(this.buttons.prev.forEach(a=>{this.toggleClass(a,"remove","hidden"),a.removeEventListener("click",this.callbackBtnsPrev)}),this.buttons.next.forEach(a=>{this.toggleClass(a,"remove","hidden"),a.removeEventListener("click",this.callbackBtnsNext)})),this.dots&&this.dots.forEach((a,b)=>{this.toggleClass(a,"remove"),a.removeEventListener("click",this.callbackDots.bind(this,[b]))}),this.track.removeEventListener("mousedown",this.callbackSwipe),this.track.removeEventListener("touchstart",this.callbackSwipe),this.track.removeEventListener("transitionend",this.callbackTransitionend),this.parentTrack.removeEventListener("mouseenter",this.callbackMouseenterParentTrack),this.parentTrack.removeEventListener("mouseleave",this.callbackMouseleaveParentTrack)}catch(a){console.error(a,"destroy")}}controlResize(){try{window.addEventListener("resize",this.callbackResize),this.media(window.innerWidth)}catch(a){console.error(a,"start")}}stopControlResize(){try{window.removeEventListener("resize",this.callbackResize)}catch(a){console.error(a,"stop")}}autoPlay(a=0){return a?(clearInterval(this.stopAutoPlay),this.stopAutoPlay=null):void(null===this.stopAutoPlay&&(this.stopAutoPlay=setInterval(()=>{let a=this.active+this.showSlide,b=this.slides?.[a]?a:this.infinity?1:0;this.slide(b)},this.interval)))}media(a){this.mediaFunc&&this.mediaFunc.call(this,a)}setMargin(a){+a?(this.margin=a,this.slides.forEach(a=>a.style.marginRight=this.margin+"px")):"destroy"==a?this.slides.forEach(a=>a.style.marginRight=""):(this.margin=0,this.slides.forEach(a=>a.style.marginRight=""))}toggleClass(a,b="add",c="active"){if(!a)throw"element \u043D\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u043D \u0432 toggleClass";"remove"===b?a.classList.remove(c):a.classList.add(c)}slide(a){if(this.toggleClass(this.slides[this.active],"remove"),this.dots&&(this.infinity?this.active===this.slides.length-1?this.toggleClass(this.dots[0],"remove"):0===this.active?this.toggleClass(this.dots[this.dots.length-1],"remove"):this.toggleClass(this.dots[this.active-1],"remove"):this.toggleClass(this.dots[this.active],"remove")),"next"===a){const a=this.active+this.showSlide;this.slides?.[a]&&(this.active=a)}else if("prev"===a){const a=this.active-this.showSlide;0<=a&&(this.active=a)}else"slide"===a?this.allowSwipe=0:this.slides?.[a]&&(this.active=+a);this.buttons&&!this.infinity&&(this.active==this.slides.length-this.showSlide?(this.buttons.prev.forEach(a=>this.toggleClass(a,"remove","hidden")),this.buttons.next.forEach(a=>this.toggleClass(a,"add","hidden"))):0==this.active?(this.buttons.next.forEach(a=>this.toggleClass(a,"remove","hidden")),this.buttons.prev.forEach(a=>this.toggleClass(a,"add","hidden"))):(this.buttons.prev.forEach(a=>this.toggleClass(a,"remove","hidden")),this.buttons.next.forEach(a=>this.toggleClass(a,"remove","hidden")))),this.dots&&(this.infinity?this.active===this.slides.length-1?this.toggleClass(this.dots[0],"add"):0===this.active?this.toggleClass(this.dots[this.dots.length-1],"add"):this.toggleClass(this.dots[this.active-1],"add"):this.toggleClass(this.dots[this.active],"add")),this.track.style.transition=this.transition,this.transform(),this.toggleClass(this.slides[this.active],"add")}transform(a=0){if(a)return this.track.style.transform=`translate3d(0px, 0px, 0px)`;this.width=this.track.querySelector(".slide").offsetWidth;const b=-(this.active*this.margin+this.active*this.width);this.track.style.transform=`translate3d(${b}px, 0px, 0px)`}swipeStart(a){if(this.allowSwipe)return;this.allowSwipe=1,a.touches?.[0]&&this.autoPlay(1);const b={start:0,action:0,end:0},c=a=>-1===a.type.search("touch")?a:a.touches[0],d=c(a);this.toggleClass(this.track,"add","grab"),this.track.style.transition="0s transform linear",b.start=b.action=d.clientX;const e=a=>{const d=c(a),e=this.track.style.transform;let f=+e.match(/[-0-9.]+(?=px)/)[0];b.action-=d.clientX,this.track.style.transform=`translate3d(${f-b.action}px, 0px, 0px)`,b.end=b.action=d.clientX},f=()=>{const c=Math.abs(b.start-b.end);document.removeEventListener("touchmove",e),document.removeEventListener("mousemove",e),document.removeEventListener("touchend",f),document.removeEventListener("mouseup",f),this.toggleClass(this.track,"remove","grab"),this.track.style.transition=this.transition,c>this.width*this.threshold?b.end&&b.start&&b.end!==b.start?b.end<b.start?this.slide("next"):this.slide("prev"):this.slide("slide"):this.slide("slide"),a.touches?.[0]&&this.autoplay&&this.autoPlay()};document.addEventListener("touchmove",e),document.addEventListener("touchend",f),document.addEventListener("mousemove",e),document.addEventListener("mouseup",f)}}