swiffy-slider - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

dist/js/swiffy-slider-extensions.js

 const swiffysliderextensions = function() {
     return {
-        version: "1.4.1",
+        version: "1.5.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.4.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.5.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.4.1",
+        version: "1.5.0",
         init(rootElement = document.body) {
@@ -111,5 +111,7 @@ for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {
                 });
-                sliderElement.addEventListener("mouseout", function() {
-                    autoplayer();
-                }, { once: true, passive: true });
+                ["mouseout", "touchend"].forEach(function(event) {
+                    sliderElement.addEventListener(event, function() {
+                        autoplayer();
+                    }, { once: true, passive: true });
+                });
             }
@@ -116,0 +118,0 @@ return autoplayTimer;

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

@@ -1,2 +0,2 @@
-export const swiffyslider={version:"1.4.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 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})})),e.addEventListener("mouseout",(function(){l()}),{once:!0,passive:!0})),i},handleIndicators(e){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.5.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){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

dist/js/swiffy-slider.js

 const swiffyslider = function() {
     return {
-        version: "1.4.1",
+        version: "1.5.0",
         init(rootElement = document.body) {
@@ -111,5 +111,7 @@ for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {
                 });
-                sliderElement.addEventListener("mouseout", function() {
-                    autoplayer();
-                }, { once: true, passive: true });
+                ["mouseout", "touchend"].forEach(function(event) {
+                    sliderElement.addEventListener(event, function() {
+                        autoplayer();
+                    }, { once: true, passive: true });
+                });
             }
@@ -116,0 +118,0 @@ return autoplayTimer;

dist/js/swiffy-slider.min.js

@@ -1,2 +0,2 @@
-const swiffyslider={version:"1.4.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;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()});
+const swiffyslider={version:"1.5.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){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.4.1",
+    "version": "1.5.0",
     "config": {
-        "version_short": "1.3"
+        "version_short": "1.4"
     },
@@ -11,2 +11,3 @@ "type": "module",
     "style": "./src/swiffy-slider.css",
+    "browser": "./dist/js/swiffy-slider.min.js",
     "files": [
@@ -13,0 +14,0 @@ "dist/{css,js}/*.{css,js,map}",

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.4.1-green.svg)
+![version](https://img.shields.io/badge/Version-1.5.0-green.svg)
 [![npm version](https://img.shields.io/npm/v/swiffy-slider)](https://www.npmjs.com/package/swiffy-slider)
@@ -29,9 +29,2 @@ [![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)
 
-
-Please star this project if you find it useful, thanks!<br>
-  <a href="https://github.com/dynamicweb/swiffy-slider/stargazers">
-                            <img src="https://img.shields.io/github/stars/dynamicweb/swiffy-slider?style=social">
-                        </a>
-  
-
 <h2> Swiffy Slider</h2>
@@ -81,2 +74,3 @@
 - [Star gazers](#star-gazers)
+- [Examples of sites using Swiffy Slider](#examples-of-sites-using-swiffy-slider)
 - [Versioning](#versioning)
@@ -91,4 +85,4 @@ - [Creators](#creators)
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.1/dist/js/swiffy-slider.min.js" defer>
-<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.1/dist/css/swiffy-slider.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.0/dist/js/swiffy-slider.min.js" defer>
+<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.0/dist/css/swiffy-slider.min.css" rel="stylesheet">
 ```
@@ -622,5 +616,18 @@
 ### Javascript loading and binding
+
+Load Swiffy slider using webpack, ESBuild and other build tools. In your index.js (or whatever you call it).
+NOTE: Swiffy slider is an ES Module and you need a supported processing ECMAScript compiler - i.e. webpack 5+ etc.
+
+```javascript
+import { swiffyslider } from 'swiffy-slider'
+window.swiffyslider = swiffyslider;
+
+window.addEventListener("load", () => {
+    window.swiffyslider.init();
+});
+```
+
 Avoid autobinding by adding `data-noinit` attribute on the script tag and then attach the slider manually
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.1/dist/js/swiffy-slider.min.js" data-noinit defer>
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.0/dist/js/swiffy-slider.min.js" data-noinit defer>
 <script>
@@ -644,3 +651,3 @@ window.addEventListener('load', () => {
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.1/dist/js/swiffy-slider.min.js" data-noinit defer>
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.0/dist/js/swiffy-slider.min.js" data-noinit defer>
 <script>
@@ -667,3 +674,3 @@ window.addEventListener('load', () => {
 <script type="module">
-    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.1/dist/js/swiffy-slider.esm.min.js'; 
+    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.0/dist/js/swiffy-slider.esm.min.js'; 
     window.swiffyslider = swiffyslider; 
@@ -678,3 +685,3 @@ window.swiffyslider.init();
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.1/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.0/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
         swiffysliderModule.swiffyslider.init();
@@ -690,3 +697,3 @@ });
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.4.1/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.0/dist/js/swiffy-slider.esm.min.js').then((swiffysliderModule) => {
         window.swiffyslider = swiffysliderModule.swiffyslider;
@@ -810,2 +817,3 @@ window.swiffyslider.init();
 ### Safari smooth scrolling polyfill
+UPDATE: Safari 15.4 introduces smooth scrolling: [See release notes](https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes)
 Sliding the carousel on touch devices **using fingers are not affected** by this issue.
@@ -826,3 +834,3 @@
 - Does not support slides of uneven widths. The width is controlled by the width of the wrapper and can have 1-6 slides per page depending on configuration. 
-- Smooth scrolling is not supported out of the box in Safari (iOS + Mac) but can be fixed using a polyfill. [See polyfill](#safari-smooth-scrolling-polyfill)
+- Smooth scrolling is not supported out of the box in Safari (Before v 15.4) (iOS + Mac) but can be fixed using a polyfill. [See polyfill](#safari-smooth-scrolling-polyfill)
 - RTL is untested but as the entire slider is just markup, it should be supported very well
@@ -860,2 +868,10 @@ - Works in 'modern' browsers from the last ~3 years only. No IE support or anything funny.
 
+## Examples of sites using Swiffy Slider
+
+Send an email to https://github.com/nicped if you would like your site on this list.
+
+- [Ärzte ohne Grenzen Österreich](https://msf.at)
+- [Swiffy slider documentation](https://swiffyslider.com) 
+- [Dynamicweb Swift Ecommerce Starter](http://swiftdemo.dynamicweb-cms.com/) 
+
 ## Versioning
@@ -862,0 +878,0 @@

src/swiffy-slider-extensions.js

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

src/swiffy-slider.esm.js

 export const swiffyslider = function() {
     return {
-        version: "1.4.1",
+        version: "1.5.0",
         init(rootElement = document.body) {
@@ -111,5 +111,7 @@ for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {
                 });
-                sliderElement.addEventListener("mouseout", function() {
-                    autoplayer();
-                }, { once: true, passive: true });
+                ["mouseout", "touchend"].forEach(function(event) {
+                    sliderElement.addEventListener(event, function() {
+                        autoplayer();
+                    }, { once: true, passive: true });
+                });
             }
@@ -116,0 +118,0 @@ return autoplayTimer;

src/swiffy-slider.js

 const swiffyslider = function() {
     return {
-        version: "1.4.1",
+        version: "1.5.0",
         init(rootElement = document.body) {
@@ -111,5 +111,7 @@ for (let sliderElement of rootElement.querySelectorAll(".swiffy-slider")) {
                 });
-                sliderElement.addEventListener("mouseout", function() {
-                    autoplayer();
-                }, { once: true, passive: true });
+                ["mouseout", "touchend"].forEach(function(event) {
+                    sliderElement.addEventListener(event, function() {
+                        autoplayer();
+                    }, { once: true, passive: true });
+                });
             }
@@ -116,0 +118,0 @@ return autoplayTimer;

No alert changes

Improved metrics

Total package byte prevSize

158246

increased by1.26%

Lines of code

1753

increased by1.15%

Number of lines in readme file

883

increased by1.85%

No dependency changes