swiffy-slider - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

Changelog.md

@@ -0,1 +1,18 @@
+## [v1.1.0] - 16-11-2021
+
+## Bugfixes
+
+- Configurator did not start autuplay when enabled
+- Navigation in docs fixed
+
+## Added
+
+- Slide animation
+- Javascript can now set visible-slide class using intersection observer
+- Different animation styles in css
+
+## Removed
+
+- BREAKING slider-item-shadow has been removed since it uses ::after which disables touch sliding on mobile devices
+
 ## [v1.0.2] - 08-11-2021
@@ -2,0 +19,0 @@

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

@@ -1,2 +0,2 @@
-export const swiffyslider=function(){"use strict";return{version:"1.0.2",init(t=document.body){for(const e of t.querySelectorAll(".swiffy-slider"))this.initSlider(e)},initSlider(t){for(const e of t.querySelectorAll(".slider-nav")){const s=e.classList.contains("slider-nav-next");e.addEventListener("click",()=>this.slide(t,s))}for(const e of t.querySelectorAll(".slider-indicators"))e.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(t,()=>this.handleIndicators(t),60);if(t.classList.contains("slider-nav-autoplay")){const e=t.getAttribute("data-slider-nav-autoplay-interval")?t.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(t,e,t.classList.contains("slider-nav-autopause"))}},slide(t,e=!0){const s=t.querySelector(".slider-container"),i=t.classList.contains("slider-nav-page"),o=t.classList.contains("slider-nav-noloop"),n=t.classList.contains("slider-nav-nodelay"),l=s.children,r=parseInt(window.getComputedStyle(s).columnGap),a=l[0].offsetWidth+r;let c=e?s.scrollLeft+a:s.scrollLeft-a;if(i&&(c=e?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft+s.offsetWidth>s.scrollWidth-(r/2+1)&&e){if(o)return;c=0}s.scroll({left:c,behavior:n?"auto":"smooth"})},slideToByIndicator(){const t=window.event.target,e=Array.from(t.parentElement.children).indexOf(t),s=t.parentElement.children.length,i=t.closest(".swiffy-slider"),o=i.querySelector(".slider-container").children.length/s*e;this.slideTo(i,o)},slideTo(t,e){const s=t.querySelector(".slider-container"),i=parseInt(window.getComputedStyle(s).columnGap),o=s.children[0].offsetWidth+i,n=t.classList.contains("slider-nav-nodelay");s.scroll({left:o*e,behavior:n?"auto":"smooth"})},onSlideEnd(t,e,s=125){let i;t.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(i),i=setTimeout(e,s)}),{capture:!1,passive:!0})},autoPlay(t,e,s){e=e<750?750:e;let i=setInterval(()=>this.slide(t),e);const o=()=>this.autoPlay(t,e,s);return s&&(["mouseover","touchstart"].forEach((function(e){t.addEventListener(e,(function(){window.clearTimeout(i)}),{once:!0,passive:!0})})),t.addEventListener("mouseout",(function(){o()}),{once:!0})),i},handleIndicators(t){const e=t.querySelector(".slider-container"),s=e.scrollWidth-e.offsetWidth,i=e.scrollLeft/s;for(const e of t.querySelectorAll(".slider-indicators")){const t=e.children,s=Math.round((t.length-1)*i);for(const e of t)e.removeAttribute("class");t[s].classList.add("active")}}}}();
+export const swiffyslider=function(){"use strict";return{version:"1.1.0",init(e=document.body){for(const t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(const t of e.querySelectorAll(".slider-nav")){const s=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,s))}for(const 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"))}e.classList.contains("slider-nav-animation")&&this.setVisibleSlides(e)},setVisibleSlides(e){const t=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?e.target.parentElement.classList.add("slide-visible"):e.target.parentElement.classList.remove("slide-visible")})},{root:e.querySelector(".slider-container"),threshold:.3});for(const s of e.querySelectorAll(".slider-container>*>*"))t.observe(s)},slide(e,t=!0){const s=e.querySelector(".slider-container"),i=e.classList.contains("slider-nav-page"),o=e.classList.contains("slider-nav-noloop"),n=e.classList.contains("slider-nav-nodelay"),l=s.children,r=parseInt(window.getComputedStyle(s).columnGap),a=l[0].offsetWidth-r;let c=t?s.scrollLeft+a:s.scrollLeft-a;if(i&&(c=t?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft+s.offsetWidth>s.scrollWidth-(r/2+1)&&t){if(o)return;c=0}s.scroll({left:c,behavior:n?"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"),o=i.querySelector(".slider-container").children.length/s*t;this.slideTo(i,o)},slideTo(e,t){const s=e.querySelector(".slider-container"),i=parseInt(window.getComputedStyle(s).columnGap),o=s.children[0].offsetWidth+i,n=e.classList.contains("slider-nav-nodelay");s.scroll({left:o*t,behavior:n?"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 o=()=>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(){o()}),{once:!0})),i},handleIndicators(e){const t=e.querySelector(".slider-container"),s=t.scrollWidth-t.offsetWidth,i=t.scrollLeft/s;for(const t of e.querySelectorAll(".slider-indicators")){const e=t.children,s=Math.round((e.length-1)*i);for(const t of e)t.removeAttribute("class");e[s].classList.add("active")}}}}();
 //# sourceMappingURL=swiffy-slider.ESM.min.js.map

dist/js/swiffy-slider.min.js

@@ -1,2 +0,2 @@
-const swiffyslider=function(){"use strict";return{version:"1.0.2",init(t=document.body){for(const e of t.querySelectorAll(".swiffy-slider"))this.initSlider(e)},initSlider(t){for(const e of t.querySelectorAll(".slider-nav")){const i=e.classList.contains("slider-nav-next");e.addEventListener("click",()=>this.slide(t,i))}for(const e of t.querySelectorAll(".slider-indicators"))e.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(t,()=>this.handleIndicators(t),60);if(t.classList.contains("slider-nav-autoplay")){const e=t.getAttribute("data-slider-nav-autoplay-interval")?t.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(t,e,t.classList.contains("slider-nav-autopause"))}},slide(t,e=!0){const i=t.querySelector(".slider-container"),s=t.classList.contains("slider-nav-page"),n=t.classList.contains("slider-nav-noloop"),o=t.classList.contains("slider-nav-nodelay"),l=i.children,r=parseInt(window.getComputedStyle(i).columnGap),a=l[0].offsetWidth+r;let c=e?i.scrollLeft+a:i.scrollLeft-a;if(s&&(c=e?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft+i.offsetWidth>i.scrollWidth-(r/2+1)&&e){if(n)return;c=0}i.scroll({left:c,behavior:o?"auto":"smooth"})},slideToByIndicator(){const t=window.event.target,e=Array.from(t.parentElement.children).indexOf(t),i=t.parentElement.children.length,s=t.closest(".swiffy-slider"),n=s.querySelector(".slider-container").children.length/i*e;this.slideTo(s,n)},slideTo(t,e){const i=t.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),n=i.children[0].offsetWidth+s,o=t.classList.contains("slider-nav-nodelay");i.scroll({left:n*e,behavior:o?"auto":"smooth"})},onSlideEnd(t,e,i=125){let s;t.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(e,i)}),{capture:!1,passive:!0})},autoPlay(t,e,i){e=e<750?750:e;let s=setInterval(()=>this.slide(t),e);const n=()=>this.autoPlay(t,e,i);return i&&(["mouseover","touchstart"].forEach((function(e){t.addEventListener(e,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),t.addEventListener("mouseout",(function(){n()}),{once:!0})),s},handleIndicators(t){const e=t.querySelector(".slider-container"),i=e.scrollWidth-e.offsetWidth,s=e.scrollLeft/i;for(const e of t.querySelectorAll(".slider-indicators")){const t=e.children,i=Math.round((t.length-1)*s);for(const e of t)e.removeAttribute("class");t[i].classList.add("active")}}}}();window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||window.addEventListener("load",()=>{"use strict";swiffyslider.init()});
+const swiffyslider=function(){"use strict";return{version:"1.1.0",init(e=document.body){for(const t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(const t of e.querySelectorAll(".slider-nav")){const s=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,s))}for(const 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"))}e.classList.contains("slider-nav-animation")&&this.setVisibleSlides(e)},setVisibleSlides(e){const t=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?e.target.parentElement.classList.add("slide-visible"):e.target.parentElement.classList.remove("slide-visible")})},{root:e.querySelector(".slider-container"),threshold:.3});for(const s of e.querySelectorAll(".slider-container>*>*"))t.observe(s)},slide(e,t=!0){const s=e.querySelector(".slider-container"),i=e.classList.contains("slider-nav-page"),n=e.classList.contains("slider-nav-noloop"),o=e.classList.contains("slider-nav-nodelay"),l=s.children,r=parseInt(window.getComputedStyle(s).columnGap),a=l[0].offsetWidth-r;let c=t?s.scrollLeft+a:s.scrollLeft-a;if(i&&(c=t?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft+s.offsetWidth>s.scrollWidth-(r/2+1)&&t){if(n)return;c=0}s.scroll({left:c,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"),n=i.querySelector(".slider-container").children.length/s*t;this.slideTo(i,n)},slideTo(e,t){const s=e.querySelector(".slider-container"),i=parseInt(window.getComputedStyle(s).columnGap),n=s.children[0].offsetWidth+i,o=e.classList.contains("slider-nav-nodelay");s.scroll({left:n*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 n=()=>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(){n()}),{once:!0})),i},handleIndicators(e){const t=e.querySelector(".slider-container"),s=t.scrollWidth-t.offsetWidth,i=t.scrollLeft/s;for(const t of e.querySelectorAll(".slider-indicators")){const e=t.children,s=Math.round((e.length-1)*i);for(const t of e)t.removeAttribute("class");e[s].classList.add("active")}}}}();window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||window.addEventListener("load",()=>{"use strict";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.0.2",
+    "version": "1.1.0",
     "config": {
@@ -25,2 +25,3 @@ "version_short": "1.0"
         "slider",
+        "front-end",
         "vanilla",
@@ -48,4 +49,4 @@ "css",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 0"
     }
 }

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.0.2-green.svg)
+![version](https://img.shields.io/badge/Version-1.1.0-green.svg)
 [![npm version](https://img.shields.io/npm/v/swiffy-slider)](https://www.npmjs.com/package/swiffy-slider)
@@ -66,2 +66,3 @@ [![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)
     - [Indicator options](#indicator-options)
+    - [Animation options](#animation-options)
   - [Javascript](#javascript)
@@ -82,4 +83,4 @@ - [Javascript loading and binding](#javascript-loading-and-binding)
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.min.js" defer>
-<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/css/swiffy-slider.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.min.js" defer>
+<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/css/swiffy-slider.min.css" rel="stylesheet">
 ```
@@ -109,3 +110,3 @@
 ## Additional installation options
-- [Download the latest release](https://github.com/dynamicweb/swiffy-slider/releases/download/v1.0.2/swiffy-slider-1.0.2-dist.zip)
+- [Download the latest release](https://github.com/dynamicweb/swiffy-slider/releases/download/v1.1.0/swiffy-slider-1.1.0-dist.zip)
 - Clone the repo: `git clone https://github.com/dynamicweb/swiffy-slider.git`
@@ -337,6 +338,2 @@ - Install with [npm](https://www.npmjs.com/): `npm install swiffy-slider`
     <tr>
-      <td><code>slider-item-shadow</code></td>
-      <td>Adds a dark shadow to both sides of the slider wrapper</td>
-    </tr>
-    <tr>
       <td><code>slider-item-helper</code></td>
@@ -450,2 +447,43 @@ <td>For debugging: Adds a test layout to slide items; minimum height, background color, centers content and background. Meant for testing and should be removed in real code</td>
 
+#### Animation options
+For the <code>swiffy-slider</code> wrapper. The <code>slider-nav-animation-*</code> option classes affects the animation of slides when they slide into view.
+<table>
+  <thead>
+    <tr>
+      <th>CSS class<br>_______________________________</th>
+      <th>Description<br>_______________________________</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>slider-nav-animation</code></td>
+      <td>Enables animation on slides. An animation effect class is also required for animation to be enabled</td>
+    </tr>
+    <tr>
+      <td><code>slider-nav-animation-appear</code></td>
+      <td>Apear animation using opacity and scale - starting from 30% opacity and a 90% scale</td>
+    </tr>
+    <tr>
+      <td><code>slider-nav-animation-fadein</code></td>
+      <td>Fade in animation using opacity - starting from 50% opacity. Can be combined with <code>.slider-nav-animation-scale/scaleup</code></td>
+    </tr>
+    <tr>
+      <td><code>slider-nav-animation-scale</code></td>
+      <td>Scale up animation using scale - starts with 90% size. Can be combined with <code>.slider-nav-animation-fadein</code></td>
+    </tr>
+     <tr>
+      <td><code>slider-nav-animation-scaleup</code></td>
+      <td>Scale up animation using scale - starts with 25% size. Can be combined with <code>.slider-nav-animation-fadein</code></td>
+    </tr>
+    <tr>
+      <td><code>slider-nav-animation-turn</code></td>
+      <td>Turn animation using rotateY - starts with 70deg ratotation</td>
+    </tr>
+     <tr>
+      <td><code>slider-nav-animation-slideup</code></td>
+      <td>Slide up animation using translateY - starts at 60% of the height</td>
+    </tr>
+  </tbody>
+</table>
+
 ### Javascript
@@ -551,3 +589,3 @@ The Swiffy Slider script can be accessed using `window.swiffyslider` or simply `swiffyslider`
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.min.js" data-noinit defer>
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.min.js" data-noinit defer>
 <script>
@@ -571,3 +609,3 @@ window.addEventListener('load', () => {
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.min.js" data-noinit defer>
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.min.js" data-noinit defer>
 <script>
@@ -594,3 +632,3 @@ window.addEventListener('load', () => {
 <script type="module">
-    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.ESM.min.js'; 
+    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.ESM.min.js'; 
     window.swiffyslider = swiffyslider; 
@@ -605,3 +643,3 @@ window.swiffyslider.init();
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
         swiffysliderModule.swiffyslider.init();
@@ -617,3 +655,3 @@ });
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
         window.swiffyslider = swiffysliderModule.swiffyslider;
@@ -692,2 +730,17 @@ window.swiffyslider.init();
         </tr>
+        <tr>
+            <td><code>--swiffy-slider-animation-duration</code></td>
+            <td><code>--swiffy-slider-animation-duration:0.75s</code></td>
+            <td>Sets the animation duration. Default is 0.75s. Using <code>.swiffy-slider-animation-fast</code> sets the duration to .25s. Using <code>.swiffy-slider-animation-slow</code> sets the duration to 1.25s</td>
+        </tr>
+        <tr>
+            <td><code>--swiffy-slider-animation-delay</code></td>
+            <td><code>--swiffy-slider-animation-delay:0.5s;</code></td>
+            <td>Sets the delay before animation begins when a new slide scrolls into view. Default is 0s (no delay).</td>
+        </tr>
+        <tr>
+            <td><code>--swiffy-slider-animation-timing</code></td>
+            <td><code>--swiffy-slider-animation-timing:ease-in-out;</code></td>
+            <td>Sets the animation timing method, default is ease-in-out.</td>
+        </tr>
     </tbody>
@@ -694,0 +747,0 @@ </table>

New alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79404

increased by8.22%

Lines of code

83

increased by9.21%

Number of lines in readme file

825

increased by6.87%

No dependency changes