micro-slider/dist/micro-slider.min.js

Lightweight, Responsive, Touch Friendly, Dependency-Free JavaScript Slider with Hardware Accelerated Transitions.

"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t},_createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}}(),_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t){"function"==typeof define&&define.amd?define(t):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"object"===("undefined"==typeof module?"undefined":_typeof(module))?module.exports=t():"object"===("undefined"==typeof window?"undefined":_typeof(window))&&(window.MicroSlider=t())}(function(){var t=function(){function t(e){var i=this,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,t),this.prevHandler=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:-1;i.attached&&(i.target=i.dim*Math.round(i.offset/i.dim)-i.dim*t,i.offset!==i.target&&(i.amplitude=i.target-i.offset,i.timestamp=Date.now(),requestAnimationFrame(i.autoScroll)))},this.nextHandler=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;i.attached&&(i.target=i.dim*Math.round(i.offset/i.dim)+i.dim*t,i.offset!==i.target&&(i.amplitude=i.target-i.offset,i.timestamp=Date.now(),requestAnimationFrame(i.autoScroll)))},this.clickHandler=function(t){if(i.attached){var e=t.target;if(e.classList.contains(i.options.sliderItemClass)||(e=t.target.closest("."+i.options.sliderItemClass))){if(i.draggedY)return t.preventDefault(),t.stopPropagation(),!1;if(!i.options.fullWidth){var s=e.closest("."+i.options.sliderItemClass),n=i.getItemIndex(s);0!==i.center%i.itemCount-n&&(t.preventDefault(),t.stopPropagation()),i.cycleTo(n)}}}},this.tapHandler=function(t){i.attached&&((t.target===i.sliderContainer||t.target.classList.contains(i.options.sliderItemClass))&&t.preventDefault(),i.pressed=!0,i.draggedX=!1,i.draggedY=!1,i.velocity=0,i.amplitude=0,i.frame=i.offset,i.timestamp=Date.now(),i.referencePos={x:i.getXPos(t),y:i.getYPos(t)},clearInterval(i.ticker),i.ticker=setInterval(i.track,100))},this.dragHandler=function(t){if(i.attached){if(i.pressed){var e=i.getXPos(t),s=i.getYPos(t),n=i.referencePos.x-e;if(Math.abs(i.referencePos.y-s)<30&&!i.draggedX)(n>2||n<-2)&&(i.draggedY=!0,i.referencePos.x=e,i.scroll(i.offset+n));else{if(i.draggedY)return t.preventDefault(),t.stopPropagation(),!1;i.draggedX=!0}}return i.draggedY?(t.preventDefault(),t.stopPropagation(),!1):void 0}},this.releaseHandler=function(t){if(i.pressed)return i.pressed=!1,clearInterval(i.ticker),i.target=i.offset,(i.velocity>10||i.velocity<-10)&&(i.amplitude=.9*i.velocity,i.target=i.offset+i.amplitude),i.target=Math.round(i.target/i.dim)*i.dim,i.options.noWrap&&(i.target>=i.dim*(i.itemCount-1)?i.target=i.dim*(i.itemCount-1):i.target<0&&(i.target=0)),i.amplitude=i.target-i.offset,i.timestamp=Date.now(),requestAnimationFrame(i.autoScroll),i.draggedY&&(t.preventDefault(),t.stopPropagation()),!1},this.resizeHandler=function(){i.attached&&(i.options.fullWidth?(i.setSliderDimensions(),i.offset=2*i.center*i.itemDimensions.width,i.target=i.offset):i.scroll())},this.track=function(){var t=Date.now(),e=t-i.timestamp;i.timestamp=t;var s=i.offset-i.frame;i.frame=i.offset;var n=1e3*s/(1+e);i.velocity=.8*n+.2*i.velocity},this.cycleTo=function(t){var e=i.itemCount,s=i.center%e-t;i.options.noWrap||(s<0&&Math.abs(s+e)<Math.abs(s)?s+=e:s>0&&Math.abs(s-e)<s&&(s-=e)),s<0?i.nextHandler(Math.abs(s)):s>0&&i.prevHandler(s)},this.scroll=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=void 0,s=0,n=void 0,o=void 0;i.setScrollTimeout(),i.lastCenter=i.center,i.offset="number"==typeof t?t:i.offset,i.center=Math.floor((i.offset+i.dim/2)/i.dim);var r=i.offset-i.center*i.dim,a=r<0?1:-1,l=-a*r*2/i.dim,d=i.itemCount>>1;for((!i.options.noWrap||i.center>=0&&i.center<i.itemCount)&&(e=i.items[i.wrap(i.center)],i.setActiveItem(e),i.renderTranslation(e,0,i.options.fullWidth?1:1-.2*l,-r/2,i.options.zoomScale*l,a*i.options.shift*l*s)),s=1;s<=d;++s)i.options.fullWidth?(o=i.options.zoomScale,n=s===d&&r<0?1-l:1):(o=i.options.zoomScale*(2*s+l*a),n=1-.2*(2*s+l*a)),(!i.options.noWrap||i.center+s<i.itemCount)&&(e=i.items[i.wrap(i.center+s)],i.renderTranslation(e,-s,n,i.options.shift+(i.dim*s-r)/2,o)),i.options.fullWidth?(o=i.options.zoomScale,n=s===d&&r>0?1-l:1):(o=i.options.zoomScale*(2*s-l*a),n=1-.2*(2*s-l*a)),(!i.options.noWrap||i.center-s>=0)&&(e=i.items[i.wrap(i.center-s)],i.renderTranslation(e,-s,n,-i.options.shift+(-i.dim*s-r)/2,o));i.lastCenter!==i.center&&"function"==typeof i.options.onCycleTo&&i.options.onCycleTo.call(i,i.activeItem,i.draggedY)},this.setScrollTimeout=function(){i.scrolling=!0,i.sliderContainer.classList.contains(i.options.scrollingClass)&&i.sliderContainer.classList.add(i.options.scrollingClass),null!=i.scrollingTimeout&&window.clearTimeout(i.scrollingTimeout),i.scrollingTimeout=window.setTimeout(function(){i.scrolling=!1,i.sliderContainer.classList.remove(i.options.scrollingClass)},i.options.transitionDuration)},this.setActiveItem=function(t){"string"==typeof t&&(t=document.querySelector(t));var e=null;if(i.items.forEach(function(i){i===t&&(e=i)}),!(t&&t instanceof HTMLElement&&e))throw new Error("Could not resolve element passed to `Slider.setActiveItem()`");t.classList.contains(i.options.activeItemClass)||(null!==i.activeItem&&i.activeItem.classList.remove(i.options.activeItemClass),i.activeItem=t,i.activeItemIndex=i.getItemIndex(t),i.activeItem.classList.contains(i.options.activeItemClass)||i.activeItem.classList.add(i.options.activeItemClass)),i.setActiveIndicator()},this.setActiveIndicator=function(){i.options.indicators&&i.activeIndicator!==i.indicators[i.activeItemIndex]&&(i.activeIndicator.classList.remove(i.options.indicatorActiveClass),i.activeIndicator=i.indicators[i.activeItemIndex],i.activeIndicator.classList.add(i.options.indicatorActiveClass))},this.renderTranslation=function(t,e,s,n,o){var r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,a="translateX(0)";if(!i.options.fullWidth){a="translateX("+(i.sliderContainer.clientWidth-i.itemDimensions.width)/2+"px) translateY("+(i.sliderContainer.clientHeight-i.itemDimensions.height)/2+"px)"}var l="";null!==r&&(l="translateX("+r+"px) "),t.style[i.xForm]=a+" translateX("+n+"px) "+l+"translateZ("+o+"px)",t.style.zIndex=e,t.style.opacity=s,t.style.display="block"},this.autoScroll=function(){var t=Date.now()-i.timestamp,e=i.amplitude*Math.exp(-t/i.options.transitionDuration);if(!i.amplitude)return!1;e>2||e<-2?(i.scroll(i.target-e),requestAnimationFrame(i.autoScroll)):i.scroll(i.target)},this.next=function(){var t=i.activeItemIndex+1;(!i.options.noWrap||i.options.noWrap&&t<i.itemCount)&&i.cycleTo(t)},this.prev=function(){var t=i.activeItemIndex-1;(!i.options.noWrap||i.options.noWrap&&t>=0)&&i.cycleTo(t)},this.set=function(t){return i.cycleTo(t)},this.activeIndicator=null,this.activeItem=null,this.activeItemIndex=0,this.amplitude=null,this.attached=!1,this.center=0,this.draggedX=!1,this.draggedY=!1,this.frame=null,this.initialized=!1,this.lastCenter=null,this.offset=0,this.options=_extends({},t.defaults,s),this.pressed=!1,this.referencePos={x:0,y:0},this.scrolling=!1,this.scrollingTimeout=null,this.sliderContainer=e,this.sliderWrapper=null,this.target=0,this.ticker=null,this.timestamp=null,this.velocity=null,this.init()}return _createClass(t,[{key:"init",value:function(){this.setSliderContainer(),this.setSliderWrapper(),this.setSliderItems(),this.setSliderDimensions(),this.setSliderPerspective(),this.setIndicators(),this.setXForm(),this.bindEvents(),this.refresh(),this.initialized=!0}},{key:"setSliderContainer",value:function(){if("string"==typeof this.sliderContainer&&(this.sliderContainer=document.querySelector(this.sliderContainer)),!(this.sliderContainer instanceof HTMLElement))throw new Error("\n        The slider needs to be instantiated with an HTML Element as the first parameter or a valid CSS selector.\n        eg.: new Carousel(document.getElementById('MyElement')) or new Carousel('#myElement').\n      ");this.sliderContainer.classList.contains(this.options.sliderClass)||this.sliderContainer.classList.add(this.options.sliderClass),this.sliderContainer.classList.contains(this.options.initializedClass)||this.sliderContainer.classList.add(this.options.initializedClass)}},{key:"setSliderWrapper",value:function(){this.sliderWrapper=document.createElement("div"),this.sliderWrapper.classList.add(this.options.sliderWrapperClass),this.sliderWrapper.style.overflow="hidden",this.sliderWrapper.style.width="100%",this.sliderContainer.appendChild(this.sliderWrapper)}},{key:"setSliderItems",value:function(){var t=this.sliderContainer.children,e=[];this.items=[];for(var i=0,s=t.length;i<s;i++){var n=t[i],o=n.cloneNode(!0);n.classList.contains(this.options.sliderItemClass)&&(n.classList.contains(this.options.activeItemClass)&&(this.activeItemIndex=i),e.push(n),this.items.push(o),this.sliderWrapper.appendChild(o))}for(var r=0,a=e.length;r<a;r++){var l=e[r];l.parentNode.removeChild(l)}if(this.itemCount=this.items.length,!this.itemCount)throw new Error("\n        The slider does not contain any valid items. \n        Please ensure that the items have the class name 'slider-item' appended to them.\n      ")}},{key:"setSliderDimensions",value:function(){var t=this.items[0];t.style.display="block",this.setSliderItemsDimensions(t.offsetHeight+"px",t.offsetWidth+"px"),this.initialized||(t.style.display="none")}},{key:"setSliderItemsDimensions",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"320px",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"320px",i=0;i<this.itemCount;i++){var s=this.items[i];s.style.height=t,s.style.width=e}this.itemDimensions={height:parseInt(t),width:parseInt(e)},this.dim=2*this.itemDimensions.width+this.options.padding}},{key:"setSliderPerspective",value:function(){this.sliderWrapper.style.height=this.sliderContainer.offsetHeight+"px",this.sliderWrapper.style.perspective=this.options.fullWidth?"none":this.itemDimensions.height*this.options.perspectiveFactor+"px"}},{key:"setIndicators",value:function(){var t=this;if(this.options.indicators){this.indicators=[],this.indicatorContainer=document.createElement(this.options.indicatorContainerTag),this.indicatorContainer.className=this.options.indicatorContainerClass,this.sliderContainer.appendChild(this.indicatorContainer);for(var e=0;e<this.itemCount;e++)!function(e){var i=document.createElement(t.options.indicatorItemTag);i.className=t.options.indicatorItemClass,i.innerHTML='<a href="#">'+t.options.indicatorText+"</a>",0===e&&(t.activeIndicator=i,i.classList.add(t.options.indicatorActiveClass)),i.addEventListener("click",function(i){i.preventDefault(),t.set(e)}),t.indicatorContainer.appendChild(i),t.indicators.push(i)}(e)}}},{key:"setXForm",value:function(){var t="transform";["webkit","Moz","O","ms"].forEach(function(e){var i=e+"Transform";void 0!==document.body.style[i]&&(t=i)}),this.xForm=t}},{key:"bindEvents",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=!1===t?"addEventListener":"removeEventListener";void 0!==window.ontouchstart&&(this.sliderContainer[e]("touchstart",this.tapHandler),this.sliderContainer[e]("touchmove",this.dragHandler),this.sliderContainer[e]("touchend",this.releaseHandler)),this.sliderContainer[e]("mousedown",this.tapHandler),this.sliderContainer[e]("mousemove",this.dragHandler),this.sliderContainer[e]("mouseup",this.releaseHandler),this.sliderContainer[e]("mouseleave",this.releaseHandler),this.sliderContainer[e]("click",this.clickHandler),window[e]("resize",this.resizeHandler),this.attached=!1===t}},{key:"getXPos",value:function(t){var e=t.clientX;return t.targetTouches&&t.targetTouches.length>=1&&(e=t.targetTouches[0].clientX),e}},{key:"getYPos",value:function(t){var e=t.clientY;return t.targetTouches&&t.targetTouches.length>=1&&(e=t.targetTouches[0].clientY),e}},{key:"wrap",value:function(t){var e=this.itemCount;return t>=e?t%e:t<0?this.wrap(e+t%e):t}},{key:"getItemIndex",value:function(t){for(var e=0;e<this.itemCount;e++)if(this.items[e]===t)return e;return-1}},{key:"refresh",value:function(){requestAnimationFrame(this.autoScroll),this.resizeHandler(),this.scroll()}},{key:"toggleFullWidth",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:320,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,s=null===i?this.itemDimensions.height+"px":i+"px",n=t?"100%":e+"px";this.options.fullWidth=t,this.setSliderItemsDimensions(s,n),this.setSliderPerspective(),this.refresh()}},{key:"detach",value:function(){this.bindEvents(!0)}}]),t}();return t.defaults={activeItemClass:"active",fullWidth:!1,scrollingClass:"scrolling",indicators:!1,indicatorActiveClass:"active",indicatorContainerTag:"ul",indicatorContainerClass:"indicators",indicatorItemTag:"li",indicatorItemClass:"indicator",indicatorText:"&bull;",initializedClass:"initialized",noWrap:!1,onCycleTo:null,padding:0,perspectiveFactor:1.25,shift:0,sliderClass:"micro-slider",sliderItemClass:"slider-item",sliderWrapperClass:"slider-wrapper",transitionDuration:250,zoomScale:-100},t});