diff --git a/Changelog.md b/Changelog.md index b784884..137a8c9 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,3 +1,14 @@ +# [v1.6.0] - 28-09-2022 + +## Added + +- Added support for .slider-item-show2-sm to support showing 2 slides on mobile no matter how many slides are shown on desktop [#52](https://github.com/dynamicweb/swiffy-slider/issues/52). + +## Bugfixes + +- Fixed the handleIndicators method to not execute if the indicators have been dismounted [[#50](https://github.com/dynamicweb/swiffy-slider/issues/50)] +- Fixed an issue in the extensions js handling dragging when first or last slide was dragged long distances [[#48](https://github.com/dynamicweb/swiffy-slider/issues/48)] + # [v1.5.3] - 08-043-2022 ## Bugfixes diff --git a/dist/js/swiffy-slider-extensions.js b/dist/js/swiffy-slider-extensions.js index fe1f859..b741138 100644 --- a/dist/js/swiffy-slider-extensions.js +++ b/dist/js/swiffy-slider-extensions.js @@ -1,6 +1,6 @@ const swiffysliderextensions = function() { return { - version: "1.5.3", + version: "1.6.0", draggingtimer: null, init(rootElement = document.body) { for (const sliderElement of rootElement.querySelectorAll(".swiffy-slider")) { diff --git a/dist/js/swiffy-slider-extensions.min.js b/dist/js/swiffy-slider-extensions.min.js index 51b3b55..4a28e4a 100644 --- a/dist/js/swiffy-slider-extensions.min.js +++ b/dist/js/swiffy-slider-extensions.min.js @@ -1,2 +1,2 @@ -const swiffysliderextensions={version:"1.5.3",draggingtimer:null,init(e=document.body){for(const s of e.querySelectorAll(".swiffy-slider"))this.initSlider(s)},initSlider(e){e.classList.contains("slider-nav-mousedrag")&&e.addEventListener("mousedown",s=>this.handleMouseDrag(s,e),{passive:!0})},handleMouseDrag(e,s){if(e.srcElement.classList.contains("slider-nav")||e.srcElement.parentElement.classList.contains("slider-indicators"))return;const t=s.querySelector(".slider-container");s.classList.contains("dragging")&&clearTimeout(this.draggingtimer),t.style.cursor="grabbing",s.classList.add("dragging");const i=t.scrollLeft,n=e.clientX,r=t.children[0].offsetWidth+parseInt(window.getComputedStyle(t).columnGap),o=r*(t.children.length-1),l=t.scrollLeft;let d=l;const a=e=>{const s=e.clientX-n,a=i-1.8*s;a>0&&a<=o&&(t.scrollLeft=a,s<0?d=o<=l?l:t.scrollLeft+(r+1.8*s):l>0&&(d=t.scrollLeft-(r-1.8*s)))};t.addEventListener("mousemove",a,{passive:!0}),document.addEventListener("mouseup",()=>{t.removeEventListener("mousemove",a),t.style.cursor=null,d<0&&(d=0),t.scroll({left:d,behavior:"smooth"}),this.draggingtimer=setTimeout(()=>{s.classList.remove("dragging")},550)},{once:!0,passive:!0})}};window.swiffyslider.extensions=swiffysliderextensions,document.currentScript.hasAttribute("data-noinit")||window.addEventListener("load",()=>{swiffyslider.extensions.init()}); +const swiffysliderextensions={version:"1.6.0",draggingtimer:null,init(e=document.body){for(const s of e.querySelectorAll(".swiffy-slider"))this.initSlider(s)},initSlider(e){e.classList.contains("slider-nav-mousedrag")&&e.addEventListener("mousedown",s=>this.handleMouseDrag(s,e),{passive:!0})},handleMouseDrag(e,s){if(e.srcElement.classList.contains("slider-nav")||e.srcElement.parentElement.classList.contains("slider-indicators"))return;const t=s.querySelector(".slider-container");s.classList.contains("dragging")&&clearTimeout(this.draggingtimer),t.style.cursor="grabbing",s.classList.add("dragging");const i=t.scrollLeft,n=e.clientX,r=t.children[0].offsetWidth+parseInt(window.getComputedStyle(t).columnGap),o=r*(t.children.length-1),l=t.scrollLeft;let d=l;const a=e=>{const s=e.clientX-n,a=i-1.8*s;a>0&&a<=o&&(t.scrollLeft=a,s<0?d=o<=l?l:t.scrollLeft+(r+1.8*s):l>0&&(d=t.scrollLeft-(r-1.8*s)))};t.addEventListener("mousemove",a,{passive:!0}),document.addEventListener("mouseup",()=>{t.removeEventListener("mousemove",a),t.style.cursor=null,d<0&&(d=0),t.scroll({left:d,behavior:"smooth"}),this.draggingtimer=setTimeout(()=>{s.classList.remove("dragging")},550)},{once:!0,passive:!0})}};window.swiffyslider.extensions=swiffysliderextensions,document.currentScript.hasAttribute("data-noinit")||window.addEventListener("load",()=>{swiffyslider.extensions.init()}); //# sourceMappingURL=swiffy-slider-extensions.min.js.map \ No newline at end of file diff --git a/dist/js/swiffy-slider.esm.js b/dist/js/swiffy-slider.esm.js index f296ab8..1a2a853 100644 --- a/dist/js/swiffy-slider.esm.js +++ b/dist/js/swiffy-slider.esm.js @@ -1,6 +1,6 @@ export const swiffyslider = function() { return { - version: "1.5.3", + version: "1.6.0", init(rootElement = document.body) { for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) { this.initSlider(sliderElement); diff --git a/dist/js/swiffy-slider.esm.min.js b/dist/js/swiffy-slider.esm.min.js index 81e6238..cc31046 100644 --- a/dist/js/swiffy-slider.esm.min.js +++ b/dist/js/swiffy-slider.esm.min.js @@ -1,2 +1,2 @@ -export const swiffyslider={version:"1.5.3",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let s=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,s),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let s=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))s.observe(t)},slide(e,t=!0){const s=e.querySelector(".slider-container"),i=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),o=e.classList.contains("slider-nav-nodelay"),r=s.children,n=parseInt(window.getComputedStyle(s).columnGap),a=r[0].offsetWidth+n;let d=t?s.scrollLeft+a:s.scrollLeft-a;i&&(d=t?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft<1&&!t&&!l&&(d=s.scrollWidth-s.offsetWidth),s.scrollLeft>=s.scrollWidth-s.offsetWidth&&t&&!l&&(d=0),s.scroll({left:d,behavior:o?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),s=e.parentElement.children.length,i=e.closest(".swiffy-slider"),l=i.querySelector(".slider-container").children.length/s*t;this.slideTo(i,l)},slideTo(e,t){const s=e.querySelector(".slider-container"),i=parseInt(window.getComputedStyle(s).columnGap),l=s.children[0].offsetWidth+i,o=e.classList.contains("slider-nav-nodelay");s.scroll({left:l*t,behavior:o?"auto":"smooth"})},onSlideEnd(e,t,s=125){let i;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(i),i=setTimeout(t,s)}),{capture:!1,passive:!0})},autoPlay(e,t,s){t=t<750?750:t;let i=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,s);return s&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(i)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),i},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),s=t.scrollWidth-t.offsetWidth,i=t.scrollLeft/s;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,s=Math.abs(Math.round((e.length-1)*i));for(let t of e)t.classList.remove("active");e[s].classList.add("active")}}}; +export const swiffyslider={version:"1.6.0",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let s=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,s),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let s=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))s.observe(t)},slide(e,t=!0){const s=e.querySelector(".slider-container"),i=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),o=e.classList.contains("slider-nav-nodelay"),r=s.children,n=parseInt(window.getComputedStyle(s).columnGap),a=r[0].offsetWidth+n;let d=t?s.scrollLeft+a:s.scrollLeft-a;i&&(d=t?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft<1&&!t&&!l&&(d=s.scrollWidth-s.offsetWidth),s.scrollLeft>=s.scrollWidth-s.offsetWidth&&t&&!l&&(d=0),s.scroll({left:d,behavior:o?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),s=e.parentElement.children.length,i=e.closest(".swiffy-slider"),l=i.querySelector(".slider-container").children.length/s*t;this.slideTo(i,l)},slideTo(e,t){const s=e.querySelector(".slider-container"),i=parseInt(window.getComputedStyle(s).columnGap),l=s.children[0].offsetWidth+i,o=e.classList.contains("slider-nav-nodelay");s.scroll({left:l*t,behavior:o?"auto":"smooth"})},onSlideEnd(e,t,s=125){let i;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(i),i=setTimeout(t,s)}),{capture:!1,passive:!0})},autoPlay(e,t,s){t=t<750?750:t;let i=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,s);return s&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(i)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),i},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),s=t.scrollWidth-t.offsetWidth,i=t.scrollLeft/s;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,s=Math.abs(Math.round((e.length-1)*i));for(let t of e)t.classList.remove("active");e[s].classList.add("active")}}}; //# sourceMappingURL=swiffy-slider.esm.min.js.map \ No newline at end of file diff --git a/dist/js/swiffy-slider.js b/dist/js/swiffy-slider.js index 505937d..8089a49 100644 --- a/dist/js/swiffy-slider.js +++ b/dist/js/swiffy-slider.js @@ -1,6 +1,6 @@ const swiffyslider = function() { return { - version: "1.5.3", + version: "1.6.0", init(rootElement = document.body) { for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) { this.initSlider(sliderElement); diff --git a/dist/js/swiffy-slider.min.js b/dist/js/swiffy-slider.min.js index 5ae4576..04e4103 100644 --- a/dist/js/swiffy-slider.min.js +++ b/dist/js/swiffy-slider.min.js @@ -1,2 +1,2 @@ -const swiffyslider={version:"1.5.3",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let i=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,i),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let i=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))i.observe(t)},slide(e,t=!0){const i=e.querySelector(".slider-container"),s=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),r=e.classList.contains("slider-nav-nodelay"),o=i.children,n=parseInt(window.getComputedStyle(i).columnGap),a=o[0].offsetWidth+n;let d=t?i.scrollLeft+a:i.scrollLeft-a;s&&(d=t?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft<1&&!t&&!l&&(d=i.scrollWidth-i.offsetWidth),i.scrollLeft>=i.scrollWidth-i.offsetWidth&&t&&!l&&(d=0),i.scroll({left:d,behavior:r?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),i=e.parentElement.children.length,s=e.closest(".swiffy-slider"),l=s.querySelector(".slider-container").children.length/i*t;this.slideTo(s,l)},slideTo(e,t){const i=e.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),l=i.children[0].offsetWidth+s,r=e.classList.contains("slider-nav-nodelay");i.scroll({left:l*t,behavior:r?"auto":"smooth"})},onSlideEnd(e,t,i=125){let s;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(t,i)}),{capture:!1,passive:!0})},autoPlay(e,t,i){t=t<750?750:t;let s=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,i);return i&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),s},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),i=t.scrollWidth-t.offsetWidth,s=t.scrollLeft/i;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,i=Math.abs(Math.round((e.length-1)*s));for(let t of e)t.classList.remove("active");e[i].classList.add("active")}}};window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||(document.currentScript.hasAttribute("defer")?swiffyslider.init():document.onreadystatechange=()=>{"interactive"===document.readyState&&swiffyslider.init()}); +const swiffyslider={version:"1.6.0",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let i=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,i),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let i=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))i.observe(t)},slide(e,t=!0){const i=e.querySelector(".slider-container"),s=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),r=e.classList.contains("slider-nav-nodelay"),o=i.children,n=parseInt(window.getComputedStyle(i).columnGap),a=o[0].offsetWidth+n;let d=t?i.scrollLeft+a:i.scrollLeft-a;s&&(d=t?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft<1&&!t&&!l&&(d=i.scrollWidth-i.offsetWidth),i.scrollLeft>=i.scrollWidth-i.offsetWidth&&t&&!l&&(d=0),i.scroll({left:d,behavior:r?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),i=e.parentElement.children.length,s=e.closest(".swiffy-slider"),l=s.querySelector(".slider-container").children.length/i*t;this.slideTo(s,l)},slideTo(e,t){const i=e.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),l=i.children[0].offsetWidth+s,r=e.classList.contains("slider-nav-nodelay");i.scroll({left:l*t,behavior:r?"auto":"smooth"})},onSlideEnd(e,t,i=125){let s;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(t,i)}),{capture:!1,passive:!0})},autoPlay(e,t,i){t=t<750?750:t;let s=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,i);return i&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),s},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),i=t.scrollWidth-t.offsetWidth,s=t.scrollLeft/i;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,i=Math.abs(Math.round((e.length-1)*s));for(let t of e)t.classList.remove("active");e[i].classList.add("active")}}};window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||(document.currentScript.hasAttribute("defer")?swiffyslider.init():document.onreadystatechange=()=>{"interactive"===document.readyState&&swiffyslider.init()}); //# sourceMappingURL=swiffy-slider.min.js.map \ No newline at end of file diff --git a/docs/assets/img/brandlogos/grunt-1.svg b/docs/assets/img/brandlogos/grunt-1.svg index dbec33d..065283e 100644 --- a/docs/assets/img/brandlogos/grunt-1.svg +++ b/docs/assets/img/brandlogos/grunt-1.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/assets/js/swiffy-slider-extensions.min.js b/docs/assets/js/swiffy-slider-extensions.min.js index 51b3b55..4a28e4a 100644 --- a/docs/assets/js/swiffy-slider-extensions.min.js +++ b/docs/assets/js/swiffy-slider-extensions.min.js @@ -1,2 +1,2 @@ -const swiffysliderextensions={version:"1.5.3",draggingtimer:null,init(e=document.body){for(const s of e.querySelectorAll(".swiffy-slider"))this.initSlider(s)},initSlider(e){e.classList.contains("slider-nav-mousedrag")&&e.addEventListener("mousedown",s=>this.handleMouseDrag(s,e),{passive:!0})},handleMouseDrag(e,s){if(e.srcElement.classList.contains("slider-nav")||e.srcElement.parentElement.classList.contains("slider-indicators"))return;const t=s.querySelector(".slider-container");s.classList.contains("dragging")&&clearTimeout(this.draggingtimer),t.style.cursor="grabbing",s.classList.add("dragging");const i=t.scrollLeft,n=e.clientX,r=t.children[0].offsetWidth+parseInt(window.getComputedStyle(t).columnGap),o=r*(t.children.length-1),l=t.scrollLeft;let d=l;const a=e=>{const s=e.clientX-n,a=i-1.8*s;a>0&&a<=o&&(t.scrollLeft=a,s<0?d=o<=l?l:t.scrollLeft+(r+1.8*s):l>0&&(d=t.scrollLeft-(r-1.8*s)))};t.addEventListener("mousemove",a,{passive:!0}),document.addEventListener("mouseup",()=>{t.removeEventListener("mousemove",a),t.style.cursor=null,d<0&&(d=0),t.scroll({left:d,behavior:"smooth"}),this.draggingtimer=setTimeout(()=>{s.classList.remove("dragging")},550)},{once:!0,passive:!0})}};window.swiffyslider.extensions=swiffysliderextensions,document.currentScript.hasAttribute("data-noinit")||window.addEventListener("load",()=>{swiffyslider.extensions.init()}); +const swiffysliderextensions={version:"1.6.0",draggingtimer:null,init(e=document.body){for(const s of e.querySelectorAll(".swiffy-slider"))this.initSlider(s)},initSlider(e){e.classList.contains("slider-nav-mousedrag")&&e.addEventListener("mousedown",s=>this.handleMouseDrag(s,e),{passive:!0})},handleMouseDrag(e,s){if(e.srcElement.classList.contains("slider-nav")||e.srcElement.parentElement.classList.contains("slider-indicators"))return;const t=s.querySelector(".slider-container");s.classList.contains("dragging")&&clearTimeout(this.draggingtimer),t.style.cursor="grabbing",s.classList.add("dragging");const i=t.scrollLeft,n=e.clientX,r=t.children[0].offsetWidth+parseInt(window.getComputedStyle(t).columnGap),o=r*(t.children.length-1),l=t.scrollLeft;let d=l;const a=e=>{const s=e.clientX-n,a=i-1.8*s;a>0&&a<=o&&(t.scrollLeft=a,s<0?d=o<=l?l:t.scrollLeft+(r+1.8*s):l>0&&(d=t.scrollLeft-(r-1.8*s)))};t.addEventListener("mousemove",a,{passive:!0}),document.addEventListener("mouseup",()=>{t.removeEventListener("mousemove",a),t.style.cursor=null,d<0&&(d=0),t.scroll({left:d,behavior:"smooth"}),this.draggingtimer=setTimeout(()=>{s.classList.remove("dragging")},550)},{once:!0,passive:!0})}};window.swiffyslider.extensions=swiffysliderextensions,document.currentScript.hasAttribute("data-noinit")||window.addEventListener("load",()=>{swiffyslider.extensions.init()}); //# sourceMappingURL=swiffy-slider-extensions.min.js.map \ No newline at end of file diff --git a/docs/assets/js/swiffy-slider.esm.min.js b/docs/assets/js/swiffy-slider.esm.min.js index 81e6238..cc31046 100644 --- a/docs/assets/js/swiffy-slider.esm.min.js +++ b/docs/assets/js/swiffy-slider.esm.min.js @@ -1,2 +1,2 @@ -export const swiffyslider={version:"1.5.3",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let s=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,s),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let s=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))s.observe(t)},slide(e,t=!0){const s=e.querySelector(".slider-container"),i=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),o=e.classList.contains("slider-nav-nodelay"),r=s.children,n=parseInt(window.getComputedStyle(s).columnGap),a=r[0].offsetWidth+n;let d=t?s.scrollLeft+a:s.scrollLeft-a;i&&(d=t?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft<1&&!t&&!l&&(d=s.scrollWidth-s.offsetWidth),s.scrollLeft>=s.scrollWidth-s.offsetWidth&&t&&!l&&(d=0),s.scroll({left:d,behavior:o?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),s=e.parentElement.children.length,i=e.closest(".swiffy-slider"),l=i.querySelector(".slider-container").children.length/s*t;this.slideTo(i,l)},slideTo(e,t){const s=e.querySelector(".slider-container"),i=parseInt(window.getComputedStyle(s).columnGap),l=s.children[0].offsetWidth+i,o=e.classList.contains("slider-nav-nodelay");s.scroll({left:l*t,behavior:o?"auto":"smooth"})},onSlideEnd(e,t,s=125){let i;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(i),i=setTimeout(t,s)}),{capture:!1,passive:!0})},autoPlay(e,t,s){t=t<750?750:t;let i=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,s);return s&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(i)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),i},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),s=t.scrollWidth-t.offsetWidth,i=t.scrollLeft/s;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,s=Math.abs(Math.round((e.length-1)*i));for(let t of e)t.classList.remove("active");e[s].classList.add("active")}}}; +export const swiffyslider={version:"1.6.0",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let s=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,s),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let s=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))s.observe(t)},slide(e,t=!0){const s=e.querySelector(".slider-container"),i=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),o=e.classList.contains("slider-nav-nodelay"),r=s.children,n=parseInt(window.getComputedStyle(s).columnGap),a=r[0].offsetWidth+n;let d=t?s.scrollLeft+a:s.scrollLeft-a;i&&(d=t?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft<1&&!t&&!l&&(d=s.scrollWidth-s.offsetWidth),s.scrollLeft>=s.scrollWidth-s.offsetWidth&&t&&!l&&(d=0),s.scroll({left:d,behavior:o?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),s=e.parentElement.children.length,i=e.closest(".swiffy-slider"),l=i.querySelector(".slider-container").children.length/s*t;this.slideTo(i,l)},slideTo(e,t){const s=e.querySelector(".slider-container"),i=parseInt(window.getComputedStyle(s).columnGap),l=s.children[0].offsetWidth+i,o=e.classList.contains("slider-nav-nodelay");s.scroll({left:l*t,behavior:o?"auto":"smooth"})},onSlideEnd(e,t,s=125){let i;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(i),i=setTimeout(t,s)}),{capture:!1,passive:!0})},autoPlay(e,t,s){t=t<750?750:t;let i=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,s);return s&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(i)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),i},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),s=t.scrollWidth-t.offsetWidth,i=t.scrollLeft/s;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,s=Math.abs(Math.round((e.length-1)*i));for(let t of e)t.classList.remove("active");e[s].classList.add("active")}}}; //# sourceMappingURL=swiffy-slider.esm.min.js.map \ No newline at end of file diff --git a/docs/assets/js/swiffy-slider.min.js b/docs/assets/js/swiffy-slider.min.js index 5ae4576..04e4103 100644 --- a/docs/assets/js/swiffy-slider.min.js +++ b/docs/assets/js/swiffy-slider.min.js @@ -1,2 +1,2 @@ -const swiffyslider={version:"1.5.3",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let i=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,i),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let i=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))i.observe(t)},slide(e,t=!0){const i=e.querySelector(".slider-container"),s=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),r=e.classList.contains("slider-nav-nodelay"),o=i.children,n=parseInt(window.getComputedStyle(i).columnGap),a=o[0].offsetWidth+n;let d=t?i.scrollLeft+a:i.scrollLeft-a;s&&(d=t?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft<1&&!t&&!l&&(d=i.scrollWidth-i.offsetWidth),i.scrollLeft>=i.scrollWidth-i.offsetWidth&&t&&!l&&(d=0),i.scroll({left:d,behavior:r?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),i=e.parentElement.children.length,s=e.closest(".swiffy-slider"),l=s.querySelector(".slider-container").children.length/i*t;this.slideTo(s,l)},slideTo(e,t){const i=e.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),l=i.children[0].offsetWidth+s,r=e.classList.contains("slider-nav-nodelay");i.scroll({left:l*t,behavior:r?"auto":"smooth"})},onSlideEnd(e,t,i=125){let s;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(t,i)}),{capture:!1,passive:!0})},autoPlay(e,t,i){t=t<750?750:t;let s=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,i);return i&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),s},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),i=t.scrollWidth-t.offsetWidth,s=t.scrollLeft/i;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,i=Math.abs(Math.round((e.length-1)*s));for(let t of e)t.classList.remove("active");e[i].classList.add("active")}}};window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||(document.currentScript.hasAttribute("defer")?swiffyslider.init():document.onreadystatechange=()=>{"interactive"===document.readyState&&swiffyslider.init()}); +const swiffyslider={version:"1.6.0",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let i=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,i),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let i=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))i.observe(t)},slide(e,t=!0){const i=e.querySelector(".slider-container"),s=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),r=e.classList.contains("slider-nav-nodelay"),o=i.children,n=parseInt(window.getComputedStyle(i).columnGap),a=o[0].offsetWidth+n;let d=t?i.scrollLeft+a:i.scrollLeft-a;s&&(d=t?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft<1&&!t&&!l&&(d=i.scrollWidth-i.offsetWidth),i.scrollLeft>=i.scrollWidth-i.offsetWidth&&t&&!l&&(d=0),i.scroll({left:d,behavior:r?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),i=e.parentElement.children.length,s=e.closest(".swiffy-slider"),l=s.querySelector(".slider-container").children.length/i*t;this.slideTo(s,l)},slideTo(e,t){const i=e.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),l=i.children[0].offsetWidth+s,r=e.classList.contains("slider-nav-nodelay");i.scroll({left:l*t,behavior:r?"auto":"smooth"})},onSlideEnd(e,t,i=125){let s;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(t,i)}),{capture:!1,passive:!0})},autoPlay(e,t,i){t=t<750?750:t;let s=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,i);return i&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),s},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),i=t.scrollWidth-t.offsetWidth,s=t.scrollLeft/i;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,i=Math.abs(Math.round((e.length-1)*s));for(let t of e)t.classList.remove("active");e[i].classList.add("active")}}};window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||(document.currentScript.hasAttribute("defer")?swiffyslider.init():document.onreadystatechange=()=>{"interactive"===document.readyState&&swiffyslider.init()}); //# sourceMappingURL=swiffy-slider.min.js.map \ No newline at end of file diff --git a/docs/configuration/index.html b/docs/configuration/index.html index 11018f3..6f5cd09 100644 --- a/docs/configuration/index.html +++ b/docs/configuration/index.html @@ -350,7 +350,7 @@ - Download + Download @@ -848,7 +848,7 @@
Configuration options
Dragging slides with mouse

WARNINGRequires swiffy-slider-extensions.min.js to be included.

- https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider-extensions.min.js + https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider-extensions.min.js
diff --git a/docs/docs/index.html b/docs/docs/index.html index 1a50b4d..7f16f22 100644 --- a/docs/docs/index.html +++ b/docs/docs/index.html @@ -121,7 +121,7 @@ - Download + Download
@@ -168,8 +168,8 @@

Quick start

Installation options, configuration options and scripting of the Swiffy Slider

CSS and Javascript

Copy-paste the stylesheet <link> and javascript <script> into your <head> section.

- 
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
-<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">
+                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
+<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">
 

 
                                 
HTML

@@ -208,7 +208,7 @@ 
Safari smooth scrolling polyfill

 
                             

                                 
Additional installation options

-                                Download the latest release
+                                Download the latest release
                                 
Clone the repo: 

                                 
git clone https://github.com/dynamicweb/swiffy-slider.git

 
@@ -323,7 +323,8 @@ 
Slider options

                                         
                                             slider-item-show2-sm
                                             Shows 2 slides at a time in the slider wrapper when in small viewport. By default show2-5 will show only one slide when in viewports less than 62rem (992px in most cases). With this option it shows 2 in small
-                                                viewports
+                                                viewports
+                                            
                                         
                                         
                                             slider-item-reveal
@@ -701,7 +702,7 @@ 
Javascript loading and binding

Avoid autobinding by adding data-noinit attribute on the script tag and then attach the slider manually

- 
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.min.js" data-noinit defer>
+                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" data-noinit defer>
 <script>
     window.addEventListener('load', () => {
         //Use only one of the loading options below!
@@ -719,7 +720,7 @@ 
Javascript loading and binding

 </div>
 

 
-                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.min.js" data-noinit defer>
+                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" data-noinit defer>
     <script>
         window.addEventListener('load', () => {
             //loads all sliders in main and skip header and footer search for increased init performance.
@@ -739,7 +740,7 @@ 
Javascript loading and binding

 
                                 
Load as module using ES version of the script

                                 
<script type="module">
-    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.esm.min.js'; 
+    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.esm.min.js'; 
     window.swiffyslider = swiffyslider; 
     window.swiffyslider.init(); 
 </script>
@@ -747,7 +748,7 @@ 
Javascript loading and binding

                                 
Load as ES module on demand, here using load - could be when slider scrolls into view or navigation arrow is clicked the first time. Load module and initialize sliders. 

                                 
<script>
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
         swiffysliderModule.swiffyslider.init();
     });
 });
@@ -756,7 +757,7 @@ 
Javascript loading and binding

                                 
Load as ES module on demand. Load module and assign to window for later script manipulation of slides

                                 
<script>
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
         window.swiffyslider = swiffysliderModule.swiffyslider;
         window.swiffyslider.init();
     });
@@ -769,11 +770,11 @@ 
 Optimized loading

                                     is the recommended approach.
                                 

 
-                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.min.js" defer>
 If the script is loaded without defer attribute,
+                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" defer>
 If the script is loaded without defer attribute,
                                 the initialization will happen when document.readyState === 'interactive' using a document.onreadystatechange event listener. The script will load and run before the Dom is loaded, but has been
                                 parsed.
 
-                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.min.js">

+                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js">

 
 
                                 
The above approach ensures the sliders are initialized as soon as possible and earlier in the page life cycle compared to using load or DOMContentLoaded events. This might not always be optimal
@@ -813,9 +814,9 @@ 
Javascript extensions

                                 
 
                                 Load Swiffy slider main script, css and extensions script
-                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider-extensions.min.js" crossorigin="anonymous" defer></script>
-<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">

+                                
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider-extensions.min.js" crossorigin="anonymous" defer></script>
+<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">

                             
 
                             

diff --git a/docs/docs/slider-animation/index.html b/docs/docs/slider-animation/index.html
index 3d36890..800fc87 100644
--- a/docs/docs/slider-animation/index.html
+++ b/docs/docs/slider-animation/index.html
@@ -111,7 +111,7 @@
                                 
                                         
                                     
-                            Download
+                            Download
                         
                     
                 
diff --git a/docs/docs/slider-indicators/index.html b/docs/docs/slider-indicators/index.html
index 0bf9beb..7ac4a00 100644
--- a/docs/docs/slider-indicators/index.html
+++ b/docs/docs/slider-indicators/index.html
@@ -147,7 +147,7 @@
                                 
                                         
                                     
-                            Download
+                            Download
                         
                     
                 
diff --git a/docs/docs/slider-navigation/index.html b/docs/docs/slider-navigation/index.html
index 1f9350e..f5e7485 100644
--- a/docs/docs/slider-navigation/index.html
+++ b/docs/docs/slider-navigation/index.html
@@ -147,7 +147,7 @@
                                 
                                         
                                     
-                            Download
+                            Download
                         
                     
                 
diff --git a/docs/docs/slider-options/index.html b/docs/docs/slider-options/index.html
index d2a8bd9..474bd28 100644
--- a/docs/docs/slider-options/index.html
+++ b/docs/docs/slider-options/index.html
@@ -147,7 +147,7 @@
                                 
                                         
                                     
-                            Download
+                            Download
                         
                     
                 
diff --git a/docs/docs/slider-sizes/index.html b/docs/docs/slider-sizes/index.html
index 1226ec9..192d89a 100644
--- a/docs/docs/slider-sizes/index.html
+++ b/docs/docs/slider-sizes/index.html
@@ -162,7 +162,7 @@
                                 
                                         
                                     
-                            Download
+                            Download
                         
                     
                 
diff --git a/docs/examples/index.html b/docs/examples/index.html
index e19eb7f..243dbbb 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -193,7 +193,7 @@
                             
                                         
                                     
-                        Download
+                        Download
                     
                 
             
diff --git a/docs/index.html b/docs/index.html
index f6454ec..af80244 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -135,7 +135,7 @@
                         
                         
                             
-                        Download
+                        Download
                     
                 
             
@@ -163,7 +163,7 @@ 
Super fast and lightweight slider and carousel

                             Configurator
                         

                         

-                            Currently: v1.5.3·Docs·Examples
+                            Currently: v1.6.0·Docs·Examples
                         

 
                     
@@ -283,8 +283,8 @@ 
Visual configurator

                         
Quick start

                         
CSS and Javascript

                         
Copy-paste the stylesheet <link> and javascript <script> into your <head> section.

-                        
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
-<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">
+                        
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
+<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">
 

 
                         
HTML

diff --git a/package-lock.json b/package-lock.json
index bfa5c7e..11b8c43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
     "name": "swiffy-slider",
-    "version": "1.5.3",
+    "version": "1.6.0",
     "lockfileVersion": 1
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 346182d..e0daefa 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "swiffy-slider",
     "description": "Swiffy slider is a touch enabled super lightweight html slider and carousel using browser scroll, css grid and scroll snap align and less than 1.5 kb javascript. Comes in css mode only version",
-    "version": "1.5.3",
+    "version": "1.6.0",
     "config": {
         "version_short": "1.5"
     },
diff --git a/readme.md b/readme.md
index 4188858..51e90c1 100644
--- a/readme.md
+++ b/readme.md
@@ -20,7 +20,7 @@
 

 
 [![](https://data.jsdelivr.com/v1/package/npm/swiffy-slider/badge?style=rounded)](https://www.jsdelivr.com/package/npm/swiffy-slider)
-![version](https://img.shields.io/badge/Version-1.5.3-green.svg)
+![version](https://img.shields.io/badge/Version-1.6.0-green.svg)
 [![npm version](https://img.shields.io/npm/v/swiffy-slider)](https://www.npmjs.com/package/swiffy-slider)
 [![CSS gzip size](https://img.badgesize.io/dynamicweb/swiffy-slider/main/dist/css/swiffy-slider.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/dynamicweb/swiffy-slider/blob/main/dist/css/swiffy-slider.min.css)
 [![CSS Brotli size](https://img.badgesize.io/dynamicweb/swiffy-slider/main/dist/css/swiffy-slider.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/dynamicweb/swiffy-slider/blob/main/dist/css/swiffy-slider.min.css)
@@ -82,8 +82,8 @@ This project utilizes what is available in modern browsers resulting in a super
 
 #### 1. Add CSS and JS to website head section
 ```html
-
@@ -707,7 +707,7 @@ Load as ES module on demand, here using load - could be when slider scrolls into
 ```html