simple-marquee-js/dist/simple-marquee.min.js

A lightweight JavaScript marquee/ticker library with CSS

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SimpleMarquee=t():e.SimpleMarquee=t()}(this,()=>(()=>{"use strict";var e={d:(t,i)=>{for(var n in i)e.o(i,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:i[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function i(e){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function n(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,n)}return i}function o(e,t,i){return(t=s(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function r(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,s(n.key),n)}}function s(e){var t=function(e,t){if("object"!=i(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=i(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==i(t)?t:t+""}e.r(t),e.d(t,{default:()=>a});const a=function(){return e=function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.container="string"==typeof t?document.querySelector(t):t,this.options=function(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?n(Object(i),!0).forEach(function(t){o(e,t,i[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):n(Object(i)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))})}return e}({speed:500,direction:"left",pauseOnHover:!0,duplicateItems:!0,slidesPerView:3,slidesPerViewTablet:2,slidesPerViewMobile:1,spaceBetween:24,spaceBetweenTablet:16,spaceBetweenMobile:8},i),this.content=this.container.querySelector(".simple_marquee-content"),this.items=Array.from(this.content.children),this.isPaused=!1,this.itemWidth=300,this.init()},(t=[{key:"getCurrentBreakpoint",value:function(){var e=window.innerWidth;return e<=600?"mobile":e<=1024?"tablet":"desktop"}},{key:"init",value:function(){var e=this,t=this.container.offsetWidth;if(this.options.duplicateItems)for(;this.content.scrollWidth<2*t;)this.items.forEach(function(t){var i=t.cloneNode(!0);e.content.appendChild(i)});this.setDirection(this.options.direction),this.setSpeed(this.options.speed),this.options.pauseOnHover&&(this.container.addEventListener("mouseenter",function(){return e.pause()}),this.container.addEventListener("mouseleave",function(){return e.resume()})),window.addEventListener("resize",function(){e.setSlidesPerView(),e.updateAnimation()})}},{key:"setSlidesPerView",value:function(){var e=this,t=this.getCurrentBreakpoint(),i={desktop:this.options.slidesPerView,tablet:this.options.slidesPerViewTablet,mobile:this.options.slidesPerViewMobile}[t],n={desktop:this.options.spaceBetween,tablet:this.options.spaceBetweenTablet,mobile:this.options.spaceBetweenMobile}[t],o=(this.container.offsetWidth-n*(i-1))/i;this.itemWidth=o,this.items.forEach(function(t,i){t.style.width="".concat(e.itemWidth,"px"),t.style.marginRight=i!==e.items.length-1?"".concat(n,"px"):"0"})}},{key:"setDirection",value:function(e){this.content.classList.remove("simple_marquee-left","simple_marquee-right","simple_marquee-up","simple_marquee-down"),this.content.classList.add("simple_marquee-".concat(e)),this.updateAnimation()}},{key:"setSpeed",value:function(e){var t=this.container.offsetWidth;this.items=Array.from(this.content.children),this.setSlidesPerView();var i=this.content.scrollWidth/t*e;this.content.style.animationDuration="".concat(i,"ms")}},{key:"pause",value:function(){this.content.style.animationPlayState="paused",this.isPaused=!0}},{key:"resume",value:function(){this.isPaused&&(this.content.style.animationPlayState="running",this.isPaused=!1)}},{key:"updateAnimation",value:function(){this.content.style.animation="none",this.content.offsetHeight,this.content.style.animation="",this.setSpeed(this.options.speed)}}])&&r(e.prototype,t),i&&r(e,i),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t,i}();return t})());