diff --git a/README.md b/README.md
index c34d1fd..8b2d57c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# Lightweight vanilla javascript media and contents slider, by LCweb
-Just 19KB to have:
+Just 20KB to have:
diff --git a/lc-micro-slider.js b/lc-micro-slider.js
index 8305b8e..08c964c 100644
--- a/lc-micro-slider.js
+++ b/lc-micro-slider.js
@@ -1,12 +1,11 @@
/**
* lc_micro_slider.js - Light and modern vanilla javascript (ES6) contents slider
- * Version: 2.1.1
+ * Version: 2.1.2
* Author: Luca Montanari (LCweb)
* Website: https://lcweb.it
* Licensed under the MIT license
*/
-
(function() {
"use strict";
if(typeof(window.lc_micro_slider) != 'undefined') {return false;} // prevent multiple script inits
@@ -402,7 +401,7 @@
/* lazy-loading image (src or srcset) - use onload_cb to fire events once image is loaded. Passes image_url, width and height */
this.lazyload_img = async function(slide_obj) {
- if(!slide_obj.img || cached_img.indexOf(slide_obj.img) !== -1) {
+ if(!slide_obj.img) {
return true;
}
const img = new Image(),
@@ -442,6 +441,7 @@
}
await load_img(img);
+ cached_img.push(slide_obj.img);
};
@@ -449,8 +449,7 @@
/* populate slide and append it in the slider
* type -> init - fade - prev - next
*/
- this.populate_slide = async function($wrap_obj, type, slide_index) {
-
+ this.populate_slide = async function($wrap_obj, type, slide_index) {
const $this = this,
slide = $wrap_obj.lcms_vars.slides[ slide_index ],
loader_code = (slide.img) ? options.loader_code : '';
@@ -486,21 +485,26 @@
// preload current element
if(slide.img) {
- $slide.classList.add('lcms_preload');
-
- // show preloader
- if(loader_code) {
- $slide.insertAdjacentHTML('beforeend', loader_code);
+ if(cached_img.indexOf(slide.img) !== -1) {
+ $slide.classList.add('lcms_cached');
}
-
- await $this.lazyload_img(slide);
- $slide.classList.remove('lcms_preload');
-
- // remove preloader
- if(loader_code) {
- for(const el of $slide.children) {
- if(!el.classList || !el.classList.contains('lcms_inner')) {
- el.remove();
+ else {
+ $slide.classList.add('lcms_preload');
+
+ // show preloader
+ if(loader_code) {
+ $slide.insertAdjacentHTML('beforeend', loader_code);
+ }
+
+ await $this.lazyload_img(slide);
+ $slide.classList.remove('lcms_preload');
+
+ // remove preloader
+ if(loader_code) {
+ for(const el of $slide.children) {
+ if(!el.classList || !el.classList.contains('lcms_inner')) {
+ el.remove();
+ }
}
}
}
@@ -557,7 +561,7 @@
if(typeof(direction) == 'number' && (direction < 0 || direction > ($wrap_obj.lcms_vars.slides.length - 1))) {
return false;
}
-
+
// find the new index and populate
let new_index;
@@ -618,7 +622,7 @@
// after sliding fx
setTimeout(() => {
- $wrap_obj.querySelector('.lcms_active_slide').remove();
+ $wrap_obj.querySelector('.lcms_active_slide').remove();
$wrap_obj.lcms_vars.lcms_is_sliding = false;
$wrap_obj.classList.remove('lcms_is_sliding', 'lcms_moving_'+direction);
@@ -626,16 +630,16 @@
$wrap_obj.querySelector('.lcms_slide').classList.remove('lcms_fadein', 'lcms_before', 'lcms_after');
$wrap_obj.querySelector('.lcms_slide').classList.add('lcms_active_slide');
-
- // dispatched whenever the new slide is in its final position | args: new slide index - slide object
- const nas_event = new CustomEvent('lcms_new_active_slide', {
- bubbles : true,
- detail : {
- new_index : new_index,
- slide_data : $wrap_obj.lcms_vars.slides[new_index]
- }
- });
- $wrap_obj.dispatchEvent(nas_event);
+
+ // dispatched whenever the new slide is in its final position | args: new slide index - slide object
+ const nas_event = new CustomEvent('lcms_new_active_slide', {
+ bubbles : true,
+ detail : {
+ new_index : new_index,
+ slide_data : $wrap_obj.lcms_vars.slides[new_index]
+ }
+ });
+ $wrap_obj.dispatchEvent(nas_event);
}, options.animation_time);
};
@@ -739,12 +743,13 @@
opacity: 0;
}
.lcms_cached {
- transition: opacity 0s ease-in !important;
+ transition: none !important;
}
.lcms_slide.lcms_fadein {
z-index: 90;
}
-.lcms_bg, .lcms_content {
+.lcms_bg,
+.lcms_content {
position: absolute;
}
.lcms_bg {
@@ -793,7 +798,7 @@
.lcms_moving_next .lcms_slide_fx .lcms_after,
.lcms_moving_prev .lcms_slide_fx .lcms_active_slide,
.lcms_moving_prev .lcms_slide_fx .lcms_before {
- animation: lcms_foo .7s normal forwards ease;
+ animation: lcms_foo .7s forwards ease;
}
@@ -822,7 +827,8 @@
animation-name: lcms_fade;
}
@keyframes lcms_fade {
- 100% {opacity: 0;}
+ from {opacity; 1}
+ to {opacity: 0;}
}
@@ -832,8 +838,8 @@
animation-name: lcms_slide_new_p;
}
@keyframes lcms_slide_new_p {
- 0% {left: -100%;}
- 100% {left: 0;}
+ from {left: -100%;}
+ to {left: 0;}
}
@@ -841,8 +847,8 @@
animation-name: lcms_slide_p;
}
@keyframes lcms_slide_p {
- 0% {left: 0;}
- 100% {left: 100%;}
+ from {left: 0;}
+ to {left: 100%;}
}
@@ -850,8 +856,8 @@
animation-name: lcms_slide_new_n;
}
@keyframes lcms_slide_new_n {
- 0% {left: 100%;}
- 100% {left: 0;}
+ from {left: 100%;}
+ to {left: 0;}
}
@@ -859,8 +865,8 @@
animation-name: lcms_slide_n;
}
@keyframes lcms_slide_n {
- 0% {left: 0;}
- 100% {left: -100%;}
+ from {left: 0;}
+ to {left: -100%;}
}
@@ -870,8 +876,8 @@
animation-name: lcms_v_slide_new_p;
}
@keyframes lcms_v_slide_new_p {
- 0% {top: -100%;}
- 100% {top: 0;}
+ from {top: -100%;}
+ to {top: 0;}
}
@@ -879,8 +885,8 @@
animation-name: lcms_v_slide_p;
}
@keyframes lcms_v_slide_p {
- 0% {top: 0;}
- 100% {top: 100%;}
+ from {top: 0;}
+ to {top: 100%;}
}
@@ -888,8 +894,8 @@
animation-name: lcms_v_slide_new_n;
}
@keyframes lcms_v_slide_new_n {
- 0% {top: 100%;}
- 100% {top: 0;}
+ from {top: 100%;}
+ to {top: 0;}
}
@@ -897,8 +903,8 @@
animation-name: lcms_v_slide_n;
}
@keyframes lcms_v_slide_n {
- 0% {top: 0;}
- 100% {top: -100%;}
+ from {top: 0;}
+ to {top: -100%;}
}
@@ -908,8 +914,8 @@
animation-name: lcms_overlap_p;
}
@keyframes lcms_overlap_p {
- 0% {left: -100%;}
- 100% {left: 0;}
+ from {left: -100%;}
+ to {left: 0;}
}
@@ -917,8 +923,8 @@
animation-name: lcms_overlap_n;
}
@keyframes lcms_overlap_n {
- 0% {left: 100%;}
- 100% {left: 0;}
+ from {left: 100%;}
+ to {left: 0;}
}
@@ -928,8 +934,8 @@
animation-name: lcms_v_overlap_p;
}
@keyframes lcms_v_overlap_p {
- 0% {top: -100%;}
- 100% {top: 0;}
+ from {top: -100%;}
+ to {top: 0;}
}
@@ -937,8 +943,8 @@
animation-name: lcms_v_overlap_n;
}
@keyframes lcms_v_overlap_n {
- 0% {top: 100%;}
- 100% {top: 0;}
+ from {top: 100%;}
+ to {top: 0;}
}
@@ -948,11 +954,11 @@
animation-name: lcms_fadeslide_new_p;
}
@keyframes lcms_fadeslide_new_p {
- 0% {
+ from {
opacity: 0;
left: -100%;
}
- 100% {
+ to {
opacity: 1;
left: 0;
}
@@ -963,11 +969,11 @@
animation-name: lcms_fadeslide_p;
}
@keyframes lcms_fadeslide_p {
- 0% {
+ from {
opacity: 1;
left: 0;
}
- 100% {
+ to {
opacity: 0;
left: 100%;
}
@@ -978,11 +984,11 @@
animation-name: lcms_fadeslide_new_n;
}
@keyframes lcms_fadeslide_new_n {
- 0% {
+ from {
opacity: 0;
left: 100%;
}
- 100% {
+ to {
opacity: 1;
left: 0;
}
@@ -993,11 +999,11 @@
animation-name: lcms_fadeslide_n;
}
@keyframes lcms_fadeslide_n {
- 0% {
+ from {
opacity: 1;
left: 0;
}
- 100% {
+ to {
opacity: 0;
left: -100%;
}
@@ -1010,11 +1016,11 @@
animation-name: lcms_zoom-in_new_p;
}
@keyframes lcms_zoom-in_new_p {
- 0% {
+ from {
opacity: 0;
transform: scale(1.5);
}
- 100% {
+ to {
opacity: 1;
transform: scale(1);
}
@@ -1025,11 +1031,11 @@
animation-name: lcms_zoom-in_p;
}
@keyframes lcms_zoom-in_p {
- 0% {
+ from {
opacity: 1;
transform: scale(1);
}
- 100% {
+ to {
opacity: 0;
transform: scale(.5);
}
@@ -1040,11 +1046,11 @@
animation-name: lcms_zoom-in_new_n;
}
@keyframes lcms_zoom-in_new_n {
- 0% {
+ from {
opacity: 0;
transform: scale(.5);
}
- 100% {
+ to {
opacity: 1;
transform: scale(1);
}
@@ -1055,11 +1061,11 @@
animation-name: lcms_zoom-in_n;
}
@keyframes lcms_zoom-in_n {
- 0% {
+ from {
opacity: 1;
transform: scale(1);
}
- 100% {
+ to {
opacity: 0;
transform: scale(1.5);
}
@@ -1072,11 +1078,11 @@
animation-name: lcms_zoom-out_new_p;
}
@keyframes lcms_zoom-out_new_p {
- 0% {
+ from {
opacity: 0;
transform: scale(.5);
}
- 100% {
+ to {
opacity: 1;
transform: scale(1);
}
@@ -1087,11 +1093,11 @@
animation-name: lcms_zoom-out_p;
}
@keyframes lcms_zoom-out_p {
- 0% {
+ from {
opacity: 1;
transform: scale(1);
}
- 100% {
+ to {
opacity: 0;
transform: scale(1.5);
}
@@ -1102,11 +1108,11 @@
animation-name: lcms_zoom-out_new_n;
}
@keyframes lcms_zoom-out_new_n {
- 0% {
+ from {
opacity: 0;
transform: scale(1.5);
}
- 100% {
+ to {
opacity: 1;
transform: scale(1);
}
@@ -1117,11 +1123,11 @@
animation-name: lcms_zoom-out_n;
}
@keyframes lcms_zoom-out_n {
- 0% {
+ from {
opacity: 1;
transform: scale(1);
}
- 100% {
+ to {
opacity: 0;
transform: scale(.5);
}
diff --git a/lc-micro-slider.min.js b/lc-micro-slider.min.js
index 63fb110..fb16694 100644
--- a/lc-micro-slider.min.js
+++ b/lc-micro-slider.min.js
@@ -1,9 +1,9 @@
/**
- * lc_micro_slider.js - Light and modern vanilla javascript (ES6) contents slider
- * Version: 2.1.1
+ * lc_micro_slider.js - Light and modern vanilla javascript (ES6) contents slider
+ * Version: 2.1.2
* 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:'',addit_classes:[]},s={slides:[],shown_slide:0,uniqid:"",is_sliding:!1,is_playing:!1,paused_on_hover:!1};window.lc_micro_slider=function(c,_={}){return c?"object"!=typeof _?console.error("Options must be an object"):(_=Object.assign({},t,_),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='';const c=document.querySelector('.lcms_wrap[data-id="'+l+'"]');if(_.nav_arrows&&n.lcms_vars.slides.length>1){const n=_.carousel?"":"lcms_disabled_btn";c.classList.add("lcms_has_nav_arr"),c.insertAdjacentHTML("afterbegin",'
')}_.slideshow_cmd&&n.lcms_vars.slides.length>1&&(c.classList.add("lcms_has_ss_cmd"),c.insertAdjacentHTML("afterbegin",'
')),_.extra_cmd_code&&c.insertAdjacentHTML("afterbegin",_.extra_cmd_code),_.nav_dots&&n.lcms_vars.slides.length>1&&(c.classList.add("lcms_has_nav_dots"),c.insertAdjacentHTML("afterbegin",''),e.populate_dots(n));const o=new Event("lcms_ready",{bubbles:!0});n.dispatchEvent(o),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),_.slide_fx&&"none"!=_.slide_fx){const n=_.slide_easing&&"ease"!=_.slide_easing?"animation-timing-function: "+_.slide_easing+" !important;":"";document.head.insertAdjacentHTML("beforeend",``),c.classList.add("lcms_"+_.slide_fx+"_fx")}if(n.querySelector(".lcms_play")&&n.querySelector(".lcms_play").addEventListener("click",(t=>{const s=i(t.target,".lcms_wrap").parentNode;n.querySelector(".lcms_play").classList.contains("lcms_pause")?e.stop(s):e.play(s)})),n.querySelector(".lcms_prev")&&n.querySelector(".lcms_prev:not(.lcms_disabled)").addEventListener("click",(t=>{const s=i(t.target,".lcms_wrap").parentNode;e.slide(s,"prev"),n.lcms_vars.paused_on_hover=!1,e.stop(s)})),n.querySelector(".lcms_next")&&n.querySelector(".lcms_next:not(.lcms_disabled)").addEventListener("click",(n=>{const t=i(n.target,".lcms_wrap").parentNode;e.slide(t,"next"),e.stop(t)})),_.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))}))),_.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)})),_.autoplay&&e.play(n)}))},this.populate_dots=function(n){const e=this;let t="";for(let e=0;e'}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)}))}))},this.get_slide_type=function(n){return n.hasAttribute("data-type")?n.getAttribute("data-type"):_.fixed_slide_type?_.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||-1!==e.indexOf(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()})))},this.populate_slide=async function(n,e,t){const s=this,l=n.lcms_vars.slides[t],i=l.img?_.loader_code:"";let a;switch(e){case"init":a="lcms_active_slide";break;case"fade":a="lcms_fadein";break;case"prev":a="lcms_before";break;case"next":a="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")[t].classList.add("lcms_sel_dot"));const c=l.img?``:"",o=l.content.toString().trim()?''+l.content+"
":"",m='";n.querySelector(".lcms_container").insertAdjacentHTML("beforeend",m);const r=n.querySelector('.lcms_slide[data-index="'+t+'"]');if(l.img){if(r.classList.add("lcms_preload"),i&&r.insertAdjacentHTML("beforeend",i),await s.lazyload_img(l),r.classList.remove("lcms_preload"),i)for(const n of r.children)n.classList&&n.classList.contains("lcms_inner")||n.remove();const e=new CustomEvent("lcms_slide_shown",{bubbles:!0,detail:{slide_index:t,slide_data:l,silde_elem:r}});n.dispatchEvent(e)}if(n.lcms_vars.slides.length>1){const e=t2){const e=t?t-1:n.lcms_vars.slides.length-1;s.lazyload_img(n.lcms_vars.slides[e])}_.pause_on_video_play&&"video"==l.type&&r.querySelector("video")&&r.querySelector("video").addEventListener("play",(()=>{s.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(!_.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"==_.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),_.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.all("lcms_disabled_btn")})):n.querySelectorAll(".lcms_prev").forEach((function(n){n.classList.all("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)}),_.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")}),_.slideshow_time+_.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",'')},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}}();
\ No newline at end of file
+!function(){"use strict";if(void 0!==window.lc_micro_slider)return!1;let n=null,t=[];const e={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:'',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({},e,o),this.init=function(){const t=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 e=n.children[0].children;if(!e.length)return!1;for(const s of e){s.querySelectorAll("noscript").forEach((function(n){n.remove()}));let e=!1,l=!1;s.hasAttribute("data-srcset")?(e=s.getAttribute("data-srcset"),l=!0):s.hasAttribute("data-img")&&(e=s.getAttribute("data-img")),n.lcms_vars.slides.push({type:t.get_slide_type(s),content:s.innerHTML,img:e,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='';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",'
')}o.slideshow_cmd&&n.lcms_vars.slides.length>1&&(c.classList.add("lcms_has_ss_cmd"),c.insertAdjacentHTML("afterbegin",'
')),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",''),t.populate_dots(n));const _=new Event("lcms_ready",{bubbles:!0});n.dispatchEvent(_),n.lcms_vars.shown_slide=0,t.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",``),c.classList.add("lcms_"+o.slide_fx+"_fx")}if(n.querySelector(".lcms_play")&&n.querySelector(".lcms_play").addEventListener("click",(e=>{const s=i(e.target,".lcms_wrap").parentNode;n.querySelector(".lcms_play").classList.contains("lcms_pause")?t.stop(s):t.play(s)})),n.querySelector(".lcms_prev")&&n.querySelector(".lcms_prev:not(.lcms_disabled)").addEventListener("click",(e=>{const s=i(e.target,".lcms_wrap").parentNode;t.slide(s,"prev"),n.lcms_vars.paused_on_hover=!1,t.stop(s)})),n.querySelector(".lcms_next")&&n.querySelector(".lcms_next:not(.lcms_disabled)").addEventListener("click",(n=>{const e=i(n.target,".lcms_wrap").parentNode;t.slide(e,"next"),t.stop(e)})),o.pause_on_hover&&(n.addEventListener("mouseenter",(e=>{n.lcms_vars.is_playing&&(n.lcms_vars.paused_on_hover=!0,t.stop(n,!0))})),n.addEventListener("mouseleave",(e=>{n.lcms_vars.paused_on_hover&&(n.lcms_vars.paused_on_hover=!0,t.play(n))}))),o.touchswipe){const t=30;new a(c.querySelector(".lcms_container"),(function(e,s){e.left&&e.left>=t?lcms_slide(n,"next"):e.right&&e.right>=t&&lcms_slide(n,"prev")}))}n.addEventListener("mouseleave",(n=>{c.classList.contains("lcms_already_hovered")||c.classList.add("lcms_already_hovered")})),n.addEventListener("lcms_slide",(e=>{t.stop(n),t.slide(n,e.detail.direction)})),n.addEventListener("lcms_play",(()=>{t.play(n)})),n.addEventListener("lcms_stop",(()=>{t.stop(n)})),o.autoplay&&t.play(n)}))},this.populate_dots=function(n){const t=this;let e="";for(let t=0;t'}n.querySelector(".lcms_nav_dots").innerHTML=e,n.querySelectorAll(".lcms_nav_dots span").forEach((function(e){e.addEventListener("click",(s=>{if(e.classList.contains("lcms_sel_dot"))return!0;const l=i(e,".lcms_wrap").parentNode,a=parseInt(e.getAttribute("data-index"),10);t.slide(l,a),n.lcms_vars.paused_on_hover=!1,t.stop(l)}))}))},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 t=new Image;t.onload=()=>n({url:url,ratio:t.naturalWidth/t.naturalHeight}),t.src=url}))},this.lazyload_img=async function(n){if(!n.img)return!0;const e=new Image;if(n.using_srcset){const t=n=>new Promise((t=>setTimeout(t,n)));let s,l=document.createElement("IMG");l.srcset=n.img;for(let n=0;n<500&&(await t(20),s=l.currentSrc,!s);n++);if(!s)return console.error("LC micro slider - cannot find srcset image url for "+n.img),!1;e.src=s,l=null}else e.src=n.img;var s;await(s=e,new Promise((n=>{s.onload=()=>n()}))),t.push(n.img)},this.populate_slide=async function(n,e,s){const l=this,i=n.lcms_vars.slides[s],a=i.img?o.loader_code:"";let c;switch(e){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?``:"",m=i.content.toString().trim()?''+i.content+"
":"",r='";n.querySelector(".lcms_container").insertAdjacentHTML("beforeend",r);const d=n.querySelector('.lcms_slide[data-index="'+s+'"]');if(i.img){if(-1!==t.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 e=new CustomEvent("lcms_slide_shown",{bubbles:!0,detail:{slide_index:s,slide_data:i,silde_elem:d}});n.dispatchEvent(e)}if(n.lcms_vars.slides.length>1){const t=s2){const t=s?s-1:n.lcms_vars.slides.length-1;l.lazyload_img(n.lcms_vars.slides[t])}o.pause_on_video_play&&"video"==i.type&&d.querySelector("video")&&d.querySelector("video").addEventListener("play",(()=>{l.stop(n)}))},this.slide=function(n,t){const e=n.lcms_vars.shown_slide;if("prev"!=t&&"next"!=t&&"number"!=typeof t)return!1;if(!o.carousel&&("prev"==t&&!n.lcms_vars.shown_slide||"next"==t&&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 t&&(t<0||t>n.lcms_vars.slides.length-1))return!1;let s;"prev"==t?s=0===e?n.lcms_vars.slides.length-1:e-1:"next"==t?s=e==n.lcms_vars.slides.length-1?0:e+1:(s=t,t=s>e?"next":"prev"),n.lcms_vars.lcms_is_sliding=!0,n.classList.add("lcms_is_sliding","lcms_moving_"+t),n.querySelector(".lcms_active_slide").classList.add("lcms_prepare_for_"+t);const l="fade"==o.slide_fx?"fade":t;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:e}});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.all("lcms_disabled_btn")})):n.querySelectorAll(".lcms_prev").forEach((function(n){n.classList.all("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_"+t),n.querySelector(".lcms_slide").classList.remove("lcms_fadein","lcms_before","lcms_after"),n.querySelector(".lcms_slide").classList.add("lcms_active_slide");const e=new CustomEvent("lcms_new_active_slide",{bubbles:!0,detail:{new_index:s,slide_data:n.lcms_vars.slides[s]}});n.dispatchEvent(e)}),o.animation_time)},this.play=function(n){const t=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((()=>{t.slide(n,"next")}),o.slideshow_time+o.animation_time);const e=new Event("lcms_play_slideshow",{bubbles:!0});n.dispatchEvent(e)},this.stop=function(n,t=!1){if(n.querySelector(".lcms_play")&&!t&&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 e=new Event("lcms_stop_slideshow",{bubbles:!0});n.dispatchEvent(e)},this.generate_style=function(){document.head.insertAdjacentHTML("beforeend",'')},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 t=new Event("lcms_play");n.dispatchEvent(t)}))},window.lcms_stop=function(n){l(n).forEach((function(n){const t=new Event("lcms_stop");n.dispatchEvent(t)}))},window.lcms_slide=function(n,t){l(n).forEach((function(n){const e=new CustomEvent("lcms_slide",{detail:{direction:t}});n.dispatchEvent(e)}))};const l=n=>{if("string"!=typeof n){if(n instanceof Element)return[n];{let t=[];for(const e of n)e instanceof Element&&t.push(e);return t}}return(n.match(/(#[0-9][^\s:,]*)/g)||[]).forEach((function(t){n=n.replace(t,'[id="'+t.replace("#","")+'"]')})),document.querySelectorAll(n)},i=(n,t)=>{let e=n;for(;null!=e.parentNode&&!e.matches(t);)e=e.parentNode;return e},a=function(n,t){return this.$elements=[],this.uniqid=Math.random().toString(36).substr(2,9),this.init=function(){const e=this;this.$elements=l(n),this.$elements.forEach((function(n){void 0===n.lcswiper_cb&&(n.lcswiper_cb={}),n.lcswiper_cb[e.uniqid]=t,n.addEventListener("touchstart",(t=>{n.lcswiper_xDown=t.touches[0].clientX,n.lcswiper_yDown=t.touches[0].clientY})),n.addEventListener("touchend",(t=>{e.handleTouchDiff(n,t)}))}))},this.handleTouchDiff=function(n,t){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 e=t.changedTouches[0].clientX,s=t.changedTouches[0].clientY,l=parseInt(n.lcswiper_xDown-e,10),i=parseInt(n.lcswiper_yDown-s,10);if(0!==Math.abs(l)||0!==Math.abs(i)){const t={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,t,n)}n.lcswiper_xDown=0,n.lcswiper_yDown=0},this.init(),this}}();
\ No newline at end of file
diff --git a/package.json b/package.json
index eac2cf9..2b56a9d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"author": "LCweb",
"name": "lc-micro-slider",
- "version": "2.1.1",
+ "version": "2.1.0",
"description": "Lightweight vanilla javascript (ES6) media and contents slider",
"keywords": [
"javascript",
diff --git a/themes/demo_extra_theme.css b/themes/demo_extra_theme.css
index ef7b652..1bdfc99 100644
--- a/themes/demo_extra_theme.css
+++ b/themes/demo_extra_theme.css
@@ -155,12 +155,20 @@
.lcms_demo_theme .lcms_after {
top: -100%;
}
-.lcms_demo_theme .lcms_before,
+.lcms_demo_theme .lcms_before {
+ left: 0;
+ animation: custom_entrance_b .81s forwards ease; /* match animation_time + little extra */
+}
+@keyframes custom_entrance_b {
+ from {top: 100%;}
+ to {top: 0;}
+}
.lcms_demo_theme .lcms_after {
left: 0;
- animation: custom_entrance .81s normal ease; /* match animation_time + little extra */
+ animation: custom_entrance_a .81s forwards ease; /* match animation_time + little extra */
}
-@keyframes custom_entrance {
+@keyframes custom_entrance_a {
+ from {top: -100%;}
100% {top: 0;}
}
@@ -170,16 +178,18 @@
left: 0;
}
.lcms_demo_theme .lcms_prepare_for_prev {
- animation: custom_exit_p .81s normal ease; /* match animation_time + little extra */
+ animation: custom_exit_p .81s forwards ease; /* match animation_time + little extra */
+}
+@keyframes custom_exit_p {
+ from {top: 0;}
+ to {top: -100%;}
}
.lcms_demo_theme .lcms_prepare_for_next {
- animation: custom_exit_n .81s normal ease; /*match animation_time*/
+ animation: custom_exit_n .81s forwards ease; /*match animation_time*/
}
@keyframes custom_exit_n {
- 100% {top: 100%;}
-}
-@keyframes custom_exit_p {
- 100% {top: -100%;}
+ from {top: 0;}
+ to {top: 100%;}
}