swiffy-slider - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

dist/js/swiffy-slider-extensions.js

 const swiffysliderextensions = function() {
     return {
-        version: "1.3.1",
+        version: "1.4.0",
         draggingtimer: null,
@@ -5,0 +5,0 @@ init(rootElement = document.body) {

dist/js/swiffy-slider-extensions.min.js

@@ -1,2 +0,2 @@
-const swiffysliderextensions={version:"1.3.1",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){const i=s.querySelector(".slider-container");i.classList.contains("dragging")&&clearTimeout(this.draggingtimer),i.style.cursor="grabbing",i.classList.add("dragging");const t=i.scrollLeft,n=e.clientX,o=i.children[0].offsetWidth+parseInt(window.getComputedStyle(i).columnGap);let r=0;const l=e=>{const s=e.clientX-n;i.scrollLeft=t-1.8*s,r=s<0?i.scrollLeft+(o+1.8*s):i.scrollLeft-(o-1.8*s)};i.addEventListener("mousemove",l,{passive:!0}),document.addEventListener("mouseup",()=>{i.removeEventListener("mousemove",l),i.style.cursor=null,0!=r&&i.scroll({left:r,behavior:"smooth"}),this.draggingtimer=setTimeout(()=>{i.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.4.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){const i=s.querySelector(".slider-container");i.classList.contains("dragging")&&clearTimeout(this.draggingtimer),i.style.cursor="grabbing",i.classList.add("dragging");const t=i.scrollLeft,n=e.clientX,o=i.children[0].offsetWidth+parseInt(window.getComputedStyle(i).columnGap);let r=0;const l=e=>{const s=e.clientX-n;i.scrollLeft=t-1.8*s,r=s<0?i.scrollLeft+(o+1.8*s):i.scrollLeft-(o-1.8*s)};i.addEventListener("mousemove",l,{passive:!0}),document.addEventListener("mouseup",()=>{i.removeEventListener("mousemove",l),i.style.cursor=null,0!=r&&i.scroll({left:r,behavior:"smooth"}),this.draggingtimer=setTimeout(()=>{i.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

dist/js/swiffy-slider.esm.js

 export const swiffyslider = function() {
     return {
-        version: "1.3.1",
+        version: "1.4.0",
         init(rootElement = document.body) {
@@ -60,4 +60,6 @@ for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {
             }
-            if ((container.scrollLeft + container.offsetWidth) > (container.scrollWidth - ((gapWidth / 2) + 1)) && next) {
-                if (noloop) return;
+            if (container.scrollLeft < 1 && !next && !noloop) {
+                scrollLeftPosition = (container.scrollWidth - container.offsetWidth);
+            }
+            if (container.scrollLeft >= (container.scrollWidth - container.offsetWidth) && next && !noloop) {
                 scrollLeftPosition = 0;
@@ -123,3 +125,3 @@ }
                 let scrollIndicators = scrollIndicatorContainers.children;
-                let activeIndicator = Math.round((scrollIndicators.length - 1) * percentSlide);
+                let activeIndicator = Math.abs(Math.round((scrollIndicators.length - 1) * percentSlide));
                 for (let element of scrollIndicators)
@@ -126,0 +128,0 @@ element.classList.remove("active");

dist/js/swiffy-slider.js

 const swiffyslider = function() {
     return {
-        version: "1.3.1",
+        version: "1.4.0",
         init(rootElement = document.body) {
@@ -60,4 +60,6 @@ for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {
             }
-            if ((container.scrollLeft + container.offsetWidth) > (container.scrollWidth - ((gapWidth / 2) + 1)) && next) {
-                if (noloop) return;
+            if (container.scrollLeft < 1 && !next && !noloop) {
+                scrollLeftPosition = (container.scrollWidth - container.offsetWidth);
+            }
+            if (container.scrollLeft >= (container.scrollWidth - container.offsetWidth) && next && !noloop) {
                 scrollLeftPosition = 0;
@@ -123,3 +125,3 @@ }
                 let scrollIndicators = scrollIndicatorContainers.children;
-                let activeIndicator = Math.round((scrollIndicators.length - 1) * percentSlide);
+                let activeIndicator = Math.abs(Math.round((scrollIndicators.length - 1) * percentSlide));
                 for (let element of scrollIndicators)
@@ -126,0 +128,0 @@ element.classList.remove("active");

dist/js/swiffy-slider.min.js

@@ -1,2 +0,2 @@
-const swiffyslider={version:"1.3.1",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;if(s&&(d=t?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft+i.offsetWidth>i.scrollWidth-(n/2+1)&&t){if(l)return;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})})),e.addEventListener("mouseout",(function(){l()}),{once:!0,passive:!0})),s},handleIndicators(e){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.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")||window.addEventListener("load",()=>{swiffyslider.init()});
+const swiffyslider={version:"1.4.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})})),e.addEventListener("mouseout",(function(){l()}),{once:!0,passive:!0})),s},handleIndicators(e){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")||window.addEventListener("load",()=>{swiffyslider.init()});
 //# sourceMappingURL=swiffy-slider.min.js.map

package.json

 {
     "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.3.1",
+    "version": "1.4.0",
     "config": {
@@ -6,0 +6,0 @@ "version_short": "1.3"

readme.md

@@ -21,3 +21,3 @@ <p align="center">
 [![](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.3.1-green.svg)
+![version](https://img.shields.io/badge/Version-1.4.0-green.svg)
 [![npm version](https://img.shields.io/npm/v/swiffy-slider)](https://www.npmjs.com/package/swiffy-slider)
@@ -83,4 +83,4 @@ [![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)
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.3.1/dist/js/swiffy-slider.min.js" defer>
-<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.3.1/dist/css/swiffy-slider.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.0/dist/js/swiffy-slider.min.js" defer>
+<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.0/dist/css/swiffy-slider.min.css" rel="stylesheet">
 ```
@@ -381,3 +381,3 @@
       <td><code>slider-nav-noloop</code></td>
-      <td>Disables slider loop - so when on last slide navigate next does not take the user to the first slide</td>
+      <td>Disables slider loop - so when on first/last slide navigate previous/next does not take the user to the last/first slide</td>
     </tr>
@@ -617,3 +617,3 @@ <tr>
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.3.1/dist/js/swiffy-slider.min.js" data-noinit defer>
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.0/dist/js/swiffy-slider.min.js" data-noinit defer>
 <script>
@@ -637,3 +637,3 @@ window.addEventListener('load', () => {
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.3.1/dist/js/swiffy-slider.min.js" data-noinit defer>
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.0/dist/js/swiffy-slider.min.js" data-noinit defer>
 <script>
@@ -660,3 +660,3 @@ window.addEventListener('load', () => {
 <script type="module">
-    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.3.1/dist/js/swiffy-slider.esm.min.js'; 
+    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.0/dist/js/swiffy-slider.esm.min.js'; 
     window.swiffyslider = swiffyslider; 
@@ -671,3 +671,3 @@ window.swiffyslider.init();
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.3.1/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.0/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
         swiffysliderModule.swiffyslider.init();
@@ -683,3 +683,3 @@ });
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.3.1/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.0/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
         window.swiffyslider = swiffysliderModule.swiffyslider;
@@ -686,0 +686,0 @@ window.swiffyslider.init();

src/swiffy-slider-extensions.js

 const swiffysliderextensions = function() {
     return {
-        version: "1.3.1",
+        version: "1.4.0",
         draggingtimer: null,
@@ -5,0 +5,0 @@ init(rootElement = document.body) {

src/swiffy-slider.esm.js

 export const swiffyslider = function() {
     return {
-        version: "1.3.1",
+        version: "1.4.0",
         init(rootElement = document.body) {
@@ -60,4 +60,6 @@ for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {
             }
-            if ((container.scrollLeft + container.offsetWidth) > (container.scrollWidth - ((gapWidth / 2) + 1)) && next) {
-                if (noloop) return;
+            if (container.scrollLeft < 1 && !next && !noloop) {
+                scrollLeftPosition = (container.scrollWidth - container.offsetWidth);
+            }
+            if (container.scrollLeft >= (container.scrollWidth - container.offsetWidth) && next && !noloop) {
                 scrollLeftPosition = 0;
@@ -123,3 +125,3 @@ }
                 let scrollIndicators = scrollIndicatorContainers.children;
-                let activeIndicator = Math.round((scrollIndicators.length - 1) * percentSlide);
+                let activeIndicator = Math.abs(Math.round((scrollIndicators.length - 1) * percentSlide));
                 for (let element of scrollIndicators)
@@ -126,0 +128,0 @@ element.classList.remove("active");

src/swiffy-slider.js

 const swiffyslider = function() {
     return {
-        version: "1.3.1",
+        version: "1.4.0",
         init(rootElement = document.body) {
@@ -60,4 +60,6 @@ for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {
             }
-            if ((container.scrollLeft + container.offsetWidth) > (container.scrollWidth - ((gapWidth / 2) + 1)) && next) {
-                if (noloop) return;
+            if (container.scrollLeft < 1 && !next && !noloop) {
+                scrollLeftPosition = (container.scrollWidth - container.offsetWidth);
+            }
+            if (container.scrollLeft >= (container.scrollWidth - container.offsetWidth) && next && !noloop) {
                 scrollLeftPosition = 0;
@@ -123,3 +125,3 @@ }
                 let scrollIndicators = scrollIndicatorContainers.children;
-                let activeIndicator = Math.round((scrollIndicators.length - 1) * percentSlide);
+                let activeIndicator = Math.abs(Math.round((scrollIndicators.length - 1) * percentSlide));
                 for (let element of scrollIndicators)
@@ -126,0 +128,0 @@ element.classList.remove("active");

No alert changes

Improved metrics

Total package byte prevSize

156062

increased by0.68%

Lines of code

1729

increased by0.76%

No dependency changes