lc-micro-slider/lc-micro-slider.min.js

Lightweight vanilla javascript (ES6) media and contents slider

/**
 * lc_micro_slider.js - Light and modern vanilla javascript (ES6) contents slider    
 * Version: 2.2.0
 * Author: Luca Montanari (LCweb)
 * Website: https://lcweb.it
 * Licensed under the MIT license
 */
!function(){"use strict";if(void 0!==window.lc_micro_slider)return!1;let n=null,e=[];const t={slide_fx:"fadeslide",slide_easing:"ease",nav_arrows:!0,nav_dots:!1,slideshow_cmd:!0,carousel:!0,touchswipe:!0,autoplay:!1,animation_time:700,slideshow_time:5e3,pause_on_hover:!0,pause_on_video_play:!1,extra_cmd_code:"",fixed_slide_type:"",loader_code:'<span class="lcms_loader"></span>',addit_classes:[]},s={slides:[],shown_slide:0,uniqid:"",is_sliding:!1,is_playing:!1,paused_on_hover:!1};window.lc_micro_slider=function(c,o={}){return c?"object"!=typeof o?console.error("Options must be an object"):(o=Object.assign({},t,o),this.init=function(){const e=this;n||(this.generate_style(),n=!0),l(c).forEach(function(n){if(void 0!==n.lcms_vars)return;n.lcms_vars=JSON.parse(JSON.stringify(s));const t=n.children[0].children;if(!t.length)return!1;for(const s of t){s.querySelectorAll("noscript").forEach(function(n){n.remove()});let t=!1,l=!1;s.hasAttribute("data-srcset")?(t=s.getAttribute("data-srcset"),l=!0):s.hasAttribute("data-img")&&(t=s.getAttribute("data-img")),n.lcms_vars.slides.push({type:e.get_slide_type(s),content:s.innerHTML,img:t,using_srcset:l,classes:s.hasAttribute("class")?s.getAttribute("class"):""})}const l=Math.random().toString(36).substr(2,9);n.lcms_vars.uniqid=l,n.innerHTML='<div class="lcms_wrap '+o.addit_classes.join(" ")+'" data-id="'+l+'"><div class="lcms_container"></div></div>';const c=document.querySelector('.lcms_wrap[data-id="'+l+'"]');if(o.nav_arrows&&n.lcms_vars.slides.length>1){const n=o.carousel?"":"lcms_disabled_btn";c.classList.add("lcms_has_nav_arr"),c.insertAdjacentHTML("afterbegin",`\n                        <div class="lcms_nav">\n                            <span class="lcms_prev ${n}" role="button" tabindex="0" aria-label="previous"></span>\n                            <span class="lcms_next" role="button" tabindex="0" aria-label="next"></span>\n                        </div>`)}o.slideshow_cmd&&n.lcms_vars.slides.length>1&&(c.classList.add("lcms_has_ss_cmd"),c.insertAdjacentHTML("afterbegin",'<div class="lcms_play" aria-label="play/pause" role="button" tabindex="0"><span></span></div>')),o.extra_cmd_code&&c.insertAdjacentHTML("afterbegin",o.extra_cmd_code),o.nav_dots&&n.lcms_vars.slides.length>1&&(c.classList.add("lcms_has_nav_dots"),c.insertAdjacentHTML("afterbegin",'<div class="lcms_nav_dots"></div>'),e.populate_dots(n));const _=new Event("lcms_ready",{bubbles:!0});n.dispatchEvent(_),n.lcms_vars.shown_slide=0,e.populate_slide(n,"init",0);const m=new CustomEvent("lcms_first_populated",{bubbles:!0,detail:{slide_data:n.lcms_vars.slides[0]}});if(n.dispatchEvent(m),o.slide_fx&&"none"!=o.slide_fx){const n=o.slide_easing&&"ease"!=o.slide_easing?"animation-timing-function: "+o.slide_easing+" !important;":"";document.head.insertAdjacentHTML("beforeend",`<style>\n                    .lcms_wrap[data-id="${l}"] .lcms_before, \n                    .lcms_wrap[data-id="${l}"] .lcms_after, \n                    .lcms_wrap[data-id="${l}"] .lcms_prepare_for_prev,\n                    .lcms_wrap[data-id="${l}"] .lcms_prepare_for_next {\n                        animation-duration: ${o.animation_time}ms !important;\n                        ${n}\n                    }</style>`),c.classList.add("lcms_"+o.slide_fx+"_fx")}const r=n.querySelector(".lcms_play");r&&(r.addEventListener("click",t=>{if(t.currentTarget.querySelector(".lcms_disabled_btn"))return!1;const s=i(t.target,".lcms_wrap").parentNode;n.querySelector(".lcms_play").classList.contains("lcms_pause")?e.stop(s):e.play(s)}),r.addEventListener("keydown",n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),r.click())}));const d=n.querySelector(".lcms_prev");d&&(d.addEventListener("click",t=>{if(t.currentTarget.classList.contains("lcms_disabled_btn"))return!1;const s=i(t.target,".lcms_wrap").parentNode;e.slide(s,"prev"),n.lcms_vars.paused_on_hover=!1,e.stop(s)}),d.addEventListener("keydown",n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),d.click())}));const p=n.querySelector(".lcms_next");if(p&&(p.addEventListener("click",n=>{if(n.currentTarget.classList.contains("lcms_disabled_btn"))return!1;const t=i(n.target,".lcms_wrap").parentNode;e.slide(t,"next"),e.stop(t)}),p.addEventListener("keydown",n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),p.click())})),o.pause_on_hover&&(n.addEventListener("mouseenter",t=>{n.lcms_vars.is_playing&&(n.lcms_vars.paused_on_hover=!0,e.stop(n,!0))}),n.addEventListener("mouseleave",t=>{n.lcms_vars.paused_on_hover&&(n.lcms_vars.paused_on_hover=!0,e.play(n))})),o.touchswipe){const e=30;new a(c.querySelector(".lcms_container"),function(t,s){t.left&&t.left>=e?lcms_slide(n,"next"):t.right&&t.right>=e&&lcms_slide(n,"prev")})}n.addEventListener("mouseleave",n=>{c.classList.contains("lcms_already_hovered")||c.classList.add("lcms_already_hovered")}),n.addEventListener("lcms_slide",t=>{e.stop(n),e.slide(n,t.detail.direction)}),n.addEventListener("lcms_play",()=>{e.play(n)}),n.addEventListener("lcms_stop",()=>{e.stop(n)}),o.autoplay&&e.play(n)})},this.populate_dots=function(n){const e=this;let t="";for(let e=0;e<n.lcms_vars.slides.length;e++){const s=e?"":"lcms_sel_dot";let l=n.lcms_vars.slides[e].img;l||(l=""),t+='<span class="'+s+'" data-index="'+e+'" data-image="'+l+'" role="button" tabindex="0" aria-label="go to slide '+e+'"></span>'}n.querySelector(".lcms_nav_dots").innerHTML=t,n.querySelectorAll(".lcms_nav_dots span").forEach(function(t){t.addEventListener("click",s=>{if(t.classList.contains("lcms_sel_dot"))return!0;const l=i(t,".lcms_wrap").parentNode,a=parseInt(t.getAttribute("data-index"),10);e.slide(l,a),n.lcms_vars.paused_on_hover=!1,e.stop(l)}),t.addEventListener("keydown",n=>{"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),t.click())})})},this.get_slide_type=function(n){return n.hasAttribute("data-type")?n.getAttribute("data-type"):o.fixed_slide_type?o.fixed_slide_type:n.hasAttribute("data-img")||n.hasAttribute("data-srcset")?n.children.length?"mixed":"image":!n.children.length||n.children.length>1?"mixed":"IFRAME"==n.children[0].nodeName?"iframe":"VIDEO"==n.children[0].nodeName?"video":"mixed"},this.load_img=function(n){new Promise(n=>{const e=new Image;e.onload=()=>n({url:url,ratio:e.naturalWidth/e.naturalHeight}),e.src=url})},this.lazyload_img=async function(n){if(!n.img)return!0;const t=new Image;if(n.using_srcset){const e=n=>new Promise(e=>setTimeout(e,n));let s,l=document.createElement("IMG");l.srcset=n.img;for(let n=0;n<500&&(await e(20),s=l.currentSrc,!s);n++);if(!s)return console.error("LC micro slider - cannot find srcset image url for "+n.img),!1;t.src=s,l=null}else t.src=n.img;var s;await(s=t,new Promise(n=>{s.onload=()=>n()})),e.push(n.img)},this.populate_slide=async function(n,t,s){const l=this,i=n.lcms_vars.slides[s],a=i.img?o.loader_code:"";let c;switch(t){case"init":c="lcms_active_slide";break;case"fade":c="lcms_fadein";break;case"prev":c="lcms_before";break;case"next":c="lcms_after"}n.querySelector(".lcms_has_nav_dots")&&(n.querySelector(".lcms_nav_dots .lcms_sel_dot").classList.remove("lcms_sel_dot"),n.querySelectorAll(".lcms_nav_dots span")[s].classList.add("lcms_sel_dot"));const _=i.img?`<div class="lcms_bg"><img srcset="${i.img}" /></div>`:"",m=i.content.toString().trim()?'<div class="lcms_content">'+i.content+"</div>":"",r='<div class="lcms_slide '+c+'" data-index="'+s+'" data-type="'+i.type+'"><div class="lcms_inner '+i.classes+'">'+_+m+"</div></div>";n.querySelector(".lcms_container").insertAdjacentHTML("beforeend",r);const d=n.querySelector('.lcms_slide[data-index="'+s+'"]');if(i.img){if(-1!==e.indexOf(i.img))d.classList.add("lcms_cached");else if(d.classList.add("lcms_preload"),a&&d.insertAdjacentHTML("beforeend",a),await l.lazyload_img(i),d.classList.remove("lcms_preload"),a)for(const n of d.children)n.classList&&n.classList.contains("lcms_inner")||n.remove();const t=new CustomEvent("lcms_slide_shown",{bubbles:!0,detail:{slide_index:s,slide_data:i,silde_elem:d}});n.dispatchEvent(t)}if(n.lcms_vars.slides.length>1){const e=s<n.lcms_vars.slides.length-1?s+1:0;l.lazyload_img(n.lcms_vars.slides[e])}if(n.lcms_vars.slides.length>2){const e=s?s-1:n.lcms_vars.slides.length-1;l.lazyload_img(n.lcms_vars.slides[e])}o.pause_on_video_play&&"video"==i.type&&d.querySelector("video")&&d.querySelector("video").addEventListener("play",()=>{l.stop(n)})},this.slide=function(n,e){const t=n.lcms_vars.shown_slide;if("prev"!=e&&"next"!=e&&"number"!=typeof e)return!1;if(!o.carousel&&("prev"==e&&!n.lcms_vars.shown_slide||"next"==e&&n.lcms_vars.shown_slide==n.lcms_vars.slides.length-1))return!1;if(n.lcms_vars.lcms_is_sliding||1==n.lcms_vars.slides.length)return!1;if("number"==typeof e&&(e<0||e>n.lcms_vars.slides.length-1))return!1;let s;"prev"==e?s=0===t?n.lcms_vars.slides.length-1:t-1:"next"==e?s=t==n.lcms_vars.slides.length-1?0:t+1:(s=e,e=s>t?"next":"prev"),n.lcms_vars.lcms_is_sliding=!0,n.classList.add("lcms_is_sliding","lcms_moving_"+e),n.querySelector(".lcms_active_slide").classList.add("lcms_prepare_for_"+e);const l="fade"==o.slide_fx?"fade":e;this.populate_slide(n,l,s),n.lcms_vars.shown_slide=s;const i=new CustomEvent("lcms_changing_slide",{bubbles:!0,detail:{new_index:s,slide_data:n.lcms_vars.slides[s],curr_index:t}});n.dispatchEvent(i),o.carousel||(n.querySelectorAll(".lcms_prev, .lcms_next, .lcms_play > span").forEach(function(n){n.classList.remove("lcms_disabled_btn")}),s?s==n.lcms_vars.slides.length-1&&(n.querySelectorAll(".lcms_next, .lcms_play > span").forEach(function(n){n.classList.add("lcms_disabled_btn")}),n.querySelector(".lcms_pause")&&n.querySelector(".lcms_pause").classList.remove("lcms_pause")):n.querySelectorAll(".lcms_prev").forEach(function(n){n.classList.add("lcms_disabled_btn")})),setTimeout(()=>{n.querySelector(".lcms_active_slide").remove(),n.lcms_vars.lcms_is_sliding=!1,n.classList.remove("lcms_is_sliding","lcms_moving_"+e),n.querySelector(".lcms_slide").classList.remove("lcms_fadein","lcms_before","lcms_after"),n.querySelector(".lcms_slide").classList.add("lcms_active_slide");const t=new CustomEvent("lcms_new_active_slide",{bubbles:!0,detail:{new_index:s,slide_data:n.lcms_vars.slides[s]}});n.dispatchEvent(t)},o.animation_time)},this.play=function(n){const e=this;if(n.querySelector(".lcms_play")&&n.querySelector(".lcms_play").classList.add("lcms_pause"),n.lcms_vars.is_playing)return!0;n.classList.add("lcms_is_playing"),n.lcms_vars.is_playing=setInterval(()=>{e.slide(n,"next")},o.slideshow_time+o.animation_time);const t=new Event("lcms_play_slideshow",{bubbles:!0});n.dispatchEvent(t)},this.stop=function(n,e=!1){if(n.querySelector(".lcms_play")&&!e&&n.querySelector(".lcms_play").classList.remove("lcms_pause"),!n.lcms_vars.is_playing)return!0;n.classList.remove("lcms_is_playing"),clearInterval(n.lcms_vars.is_playing),n.lcms_vars.is_playing=null;const t=new Event("lcms_stop_slideshow",{bubbles:!0});n.dispatchEvent(t)},this.generate_style=function(){document.head.insertAdjacentHTML("beforeend",'<style>\n/* MANDATORY STYLES */\n.lcms_wrap, \n.lcms_wrap *,\n.lcms_wrap *:before,\n.lcms_wrap *:after {\n    box-sizing: border-box;\n}\n.lcms_wrap,\n.lcms_container {\n\twidth: 100%;\n\theight: 100%;\t\n}\n.lcms_wrap {\n\tposition: relative;\n\toverflow: visible;\t\n}\n.lcms_container {\n\tposition: absolute;\n\tz-index: 20;\n\toverflow: hidden !important;\n}\n.lcms_slide {\n\tposition: absolute;\t\n\twidth: 100%;\n\theight: 100%;\t\n\tz-index: 100;\n\ttop: 0%;\n\tleft: 0%;\n    transform-style: preserve-3d;\n}\n.lcms_inner {\n\twidth: 100%;\n\theight: 100%;\n\topacity: 1;\n\toverflow: hidden;\n\ttransition: opacity .3s ease-in;\n}\n.lcms_preload .lcms_inner {\n\topacity: 0;\t\n}\n.lcms_cached {\n\ttransition: none !important;\t\n}\n.lcms_slide.lcms_fadein {\n\tz-index: 90;\t\n}\n.lcms_bg,\n.lcms_content {\n\tposition: absolute;\t\n}\n.lcms_bg {\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tz-index: 10;\n}\n.lcms_bg img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n.lcms_content {\n\tz-index: 20;\n}\n\n\n/* nav and buttons */\n.lcms_nav,\n.lcms_play,\n.lcms_nav_dots {\n\tposition: absolute;\n\tz-index: 999;\t\n}\n.lcms_play {\n\tz-index: 998;\t\n}\n.lcms_wrap.lcms_has_nav_dots {\n    max-height: calc(100% - 40px);\n\tmargin-bottom: 40px;\n}\n.lcms_nav_dots {\n\tz-index: 997;\n\tright: 0px;\t\n\tleft: 0;\n\tbottom: -35px;\n\ttext-align: center;\n}\n.lcms_disabled_btn,\n.lcms_sel_dot {\n\tcursor: default !important;\t\n}\n.lcms_moving_next .lcms_slide_fx .lcms_active_slide,\n.lcms_moving_next .lcms_slide_fx .lcms_after,\n.lcms_moving_prev .lcms_slide_fx .lcms_active_slide,\n.lcms_moving_prev .lcms_slide_fx .lcms_before {\n    animation: lcms_foo .7s forwards ease;\n}\n\n\n/* slide type rules */\n.lcms_slide[data-type="iframe"] .lcms_content,\n.lcms_slide[data-type="video"] .lcms_content,\n.lcms_slide[data-type="iframe"] .lcms_content > *,\n.lcms_slide[data-type="video"] .lcms_content > * {\n    height: 100%;\n    width: 100%;\n    border: 0;\n    padding: 0;\n    margin: 0;\n}\n.lcms_slide[data-type="mixed"] .lcms_content {\n    height: 100%;\n    width: 100%;\n}\n\n\n\n/*** ENTRANCE/EXIT EFFECTS ***/\n\n/* fade */\n.lcms_is_sliding .lcms_fade_fx .lcms_active_slide {\n\tanimation-name: lcms_fade;\n}\n@keyframes lcms_fade {\n    from {opacity; 1}\n    to {opacity: 0;}\n}\n\n\n\n/* slide */\n.lcms_moving_prev .lcms_slide_fx .lcms_before {\n\tanimation-name: lcms_slide_new_p;\t\n}\n@keyframes lcms_slide_new_p {\n\tfrom {left: -100%;}\n\tto {left: 0;}\n}\n\n\n.lcms_moving_prev .lcms_slide_fx .lcms_active_slide {\n\tanimation-name: lcms_slide_p;\t\n}\n@keyframes lcms_slide_p {\n\tfrom {left: 0;}\n\tto {left: 100%;}\n}\n\n\n.lcms_moving_next .lcms_slide_fx .lcms_after {\n\tanimation-name: lcms_slide_new_n;\t\n}\n@keyframes lcms_slide_new_n {\n\tfrom {left: 100%;}\n\tto {left: 0;}\n}\n\n\n.lcms_moving_next .lcms_slide_fx .lcms_active_slide {\n\tanimation-name: lcms_slide_n;\t\n}\n@keyframes lcms_slide_n {\n\tfrom {left: 0;}\n\tto {left: -100%;}\n}\n\n\n\n/* vertical slide */\n.lcms_moving_prev .lcms_v_slide_fx .lcms_before {\n\tanimation-name: lcms_v_slide_new_p;\t\n}\n@keyframes lcms_v_slide_new_p {\n\tfrom {top: -100%;}\n\tto {top: 0;}\n}\n\n\n.lcms_moving_prev .lcms_v_slide_fx .lcms_active_slide {\n\tanimation-name: lcms_v_slide_p;\t\n}\n@keyframes lcms_v_slide_p {\n\tfrom {top: 0;}\n\tto {top: 100%;}\n}\n\n\n.lcms_moving_next .lcms_v_slide_fx .lcms_after {\n\tanimation-name: lcms_v_slide_new_n;\t\n}\n@keyframes lcms_v_slide_new_n {\n\tfrom {top: 100%;}\n\tto {top: 0;}\n}\n\n\n.lcms_moving_next .lcms_v_slide_fx .lcms_active_slide {\n\tanimation-name: lcms_v_slide_n;\t\n}\n@keyframes lcms_v_slide_n {\n\tfrom {top: 0;}\n\tto {top: -100%;}\n}\n\n\n\n/* overlap */\n.lcms_moving_prev .lcms_overlap_fx .lcms_before {\n\tanimation-name: lcms_overlap_p;\t\n}\n@keyframes lcms_overlap_p {\n\tfrom {left: -100%;}\n\tto {left: 0;}\n}\n\n\n.lcms_moving_next .lcms_overlap_fx .lcms_after {\n\tanimation-name: lcms_overlap_n;\t\n}\n@keyframes lcms_overlap_n {\n\tfrom {left: 100%;}\n\tto {left: 0;}\n}\n\n\n\n/* vertical overlap */\n.lcms_moving_prev .lcms_v_overlap_fx .lcms_before {\n\tanimation-name: lcms_v_overlap_p;\t\n}\n@keyframes lcms_v_overlap_p {\n\tfrom {top: -100%;}\n\tto {top: 0;}\n}\n\n\n.lcms_moving_next .lcms_v_overlap_fx .lcms_after {\n\tanimation-name: lcms_v_overlap_n;\t\n}\n@keyframes lcms_v_overlap_n {\n\tfrom {top: 100%;}\n\tto {top: 0;}\n}\n\n\n\n/* fadeslide */\n.lcms_moving_prev .lcms_fadeslide_fx .lcms_before {\n\tanimation-name: lcms_fadeslide_new_p;\t\n}\n@keyframes lcms_fadeslide_new_p {\n\tfrom {\n\t\topacity: 0;\n\t\tleft: -100%;\n\t}\n\tto {\n\t\topacity: 1;\n\t\tleft: 0;\n\t}\n}\n\n\n.lcms_moving_prev .lcms_fadeslide_fx .lcms_active_slide {\n\tanimation-name: lcms_fadeslide_p;\t\n}\n@keyframes lcms_fadeslide_p {\n\tfrom {\n\t\topacity: 1;\n\t\tleft: 0;\n\t}\n\tto {\n\t\topacity: 0;\n\t\tleft: 100%;\n\t}\n}\n\n\n.lcms_moving_next .lcms_fadeslide_fx .lcms_after {\n\tanimation-name: lcms_fadeslide_new_n;\t\n}\n@keyframes lcms_fadeslide_new_n {\n\tfrom {\n\t\topacity: 0;\n\t\tleft: 100%;\n\t}\n\tto {\n\t\topacity: 1;\n\t\tleft: 0;\n\t}\n}\n\n\n.lcms_moving_next .lcms_fadeslide_fx .lcms_active_slide {\n\tanimation-name: lcms_fadeslide_n;\t\n}\n@keyframes lcms_fadeslide_n {\n\tfrom {\n\t\topacity: 1;\n\t\tleft: 0;\n\t}\n\tto {\n\t\topacity: 0;\n\t\tleft: -100%;\n\t}\n}\n\n\n\n/* zoom-in */\n.lcms_moving_prev .lcms_zoom-in_fx .lcms_before {\n\tanimation-name: lcms_zoom-in_new_p;\t\n}\n@keyframes lcms_zoom-in_new_p {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: scale(1.5);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n}\n\n\n.lcms_moving_prev .lcms_zoom-in_fx .lcms_active_slide {\n\tanimation-name: lcms_zoom-in_p;\t\n}\n@keyframes lcms_zoom-in_p {\n\tfrom {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n\tto {\n\t\topacity: 0;\n\t\ttransform: scale(.5);\n\t}\n}\n\n\n.lcms_moving_next .lcms_zoom-in_fx .lcms_after {\n\tanimation-name: lcms_zoom-in_new_n;\t\n}\n@keyframes lcms_zoom-in_new_n {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: scale(.5);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n}\n\n\n.lcms_moving_next .lcms_zoom-in_fx .lcms_active_slide {\n\tanimation-name: lcms_zoom-in_n;\t\n}\n@keyframes lcms_zoom-in_n {\n\tfrom {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n\tto {\n\t\topacity: 0;\n\t\ttransform: scale(1.5);\n\t}\n}\n\n\n\n/* zoom-out */\n.lcms_moving_prev .lcms_zoom-out_fx .lcms_before {\n\tanimation-name: lcms_zoom-out_new_p;\t\n}\n@keyframes lcms_zoom-out_new_p {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: scale(.5);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n}\n\n\n.lcms_moving_prev .lcms_zoom-out_fx .lcms_active_slide {\n\tanimation-name: lcms_zoom-out_p;\t\n}\n@keyframes lcms_zoom-out_p {\n\tfrom {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n\tto {\n\t\topacity: 0;\n\t\ttransform: scale(1.5);\n\t}\n}\n\n\n.lcms_moving_next .lcms_zoom-out_fx .lcms_after {\n\tanimation-name: lcms_zoom-out_new_n;\t\n}\n@keyframes lcms_zoom-out_new_n {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: scale(1.5);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n}\n\n\n.lcms_moving_next .lcms_zoom-out_fx .lcms_active_slide {\n\tanimation-name: lcms_zoom-out_n;\t\n}\n@keyframes lcms_zoom-out_n {\n\tfrom {\n\t\topacity: 1;\n\t\ttransform: scale(1);\n\t}\n\tto {\n\t\topacity: 0;\n\t\ttransform: scale(.5);\n\t}\n}\n</style>')},this.init(),this):console.error("You must provide a valid selector or DOM object as first argument")},window.lcms_play=function(n){l(n).forEach(function(n){const e=new Event("lcms_play");n.dispatchEvent(e)})},window.lcms_stop=function(n){l(n).forEach(function(n){const e=new Event("lcms_stop");n.dispatchEvent(e)})},window.lcms_slide=function(n,e){l(n).forEach(function(n){const t=new CustomEvent("lcms_slide",{detail:{direction:e}});n.dispatchEvent(t)})};const l=n=>{if("string"!=typeof n){if(n instanceof Element)return[n];{let e=[];for(const t of n)t instanceof Element&&e.push(t);return e}}return(n.match(/(#[0-9][^\s:,]*)/g)||[]).forEach(function(e){n=n.replace(e,'[id="'+e.replace("#","")+'"]')}),document.querySelectorAll(n)},i=(n,e)=>{let t=n;for(;null!=t.parentNode&&!t.matches(e);)t=t.parentNode;return t},a=function(n,e){return this.$elements=[],this.uniqid=Math.random().toString(36).substr(2,9),this.init=function(){const t=this;this.$elements=l(n),this.$elements.forEach(function(n){void 0===n.lcswiper_cb&&(n.lcswiper_cb={}),n.lcswiper_cb[t.uniqid]=e,n.addEventListener("touchstart",e=>{n.lcswiper_xDown=e.touches[0].clientX,n.lcswiper_yDown=e.touches[0].clientY}),n.addEventListener("touchend",e=>{t.handleTouchDiff(n,e)})})},this.handleTouchDiff=function(n,e){if(void 0===n.lcswiper_xDown||!n.lcswiper_xDown||void 0===n.lcswiper_yDown||!n.lcswiper_yDown||void 0===n.lcswiper_cb[this.uniqid])return;const t=e.changedTouches[0].clientX,s=e.changedTouches[0].clientY,l=parseInt(n.lcswiper_xDown-t,10),i=parseInt(n.lcswiper_yDown-s,10);if(0!==Math.abs(l)||0!==Math.abs(i)){const e={up:i>0?i:0,right:l<0?Math.abs(l):0,down:i<0?Math.abs(i):0,left:l>0?l:0};n.lcswiper_cb[this.uniqid].call(this,e,n)}n.lcswiper_xDown=0,n.lcswiper_yDown=0},this.init(),this}}();