swiffy-slider - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

Changelog.md

@@ -0,1 +1,19 @@
+## [v1.2.0] - 03-12-2021
+
+## Bugfixes
+
+- None
+
+## Changed
+- Changed the use of <code>zoom</code> in css to <code>transform: scale()</code>
+- Changed javascript to use <code>"</code> instead <code>'</code> consistently
+- Changed all event listeners to be passive to increase performance even further
+
+## Added
+
+- Support for mouse drag option using the new swiffy-slider-extensions object
+- Added swiffy-slider-extensions for adding features not needed for core releases. Can be accessed on <code>swiffyslider.extensions.*</code>
+- Configure animation threshold for the intersection observer that sets <code>.slide-visible</code> when sliding. New attribute <code>data-slider-nav-animation-threshold</code>
+- <code>swiffyslider.setVisibleSlides</code> can now be called with a threshold overwriting the default 0.3
+
 ## [v1.1.0] - 16-11-2021
@@ -2,0 +20,0 @@

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

@@ -1,2 +0,2 @@
-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")}}}}();
+export const swiffyslider=function(){"use strict";return{version:"1.2.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),{passive:!0})}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"))}if(e.classList.contains("slider-nav-animation")){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){const s=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:t});for(const 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"),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,passive:!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.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()});
+const swiffyslider=function(){"use strict";return{version:"1.2.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),{passive:!0})}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"))}if(e.classList.contains("slider-nav-animation")){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){const s=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:t});for(const 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"),n=e.classList.contains("slider-nav-noloop"),o=e.classList.contains("slider-nav-nodelay"),r=s.children,l=parseInt(window.getComputedStyle(s).columnGap),a=r[0].offsetWidth+l;let d=t?s.scrollLeft+a:s.scrollLeft-a;if(i&&(d=t?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft+s.offsetWidth>s.scrollWidth-(l/2+1)&&t){if(n)return;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"),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,passive:!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.1.0",
+    "version": "1.2.0",
     "config": {
@@ -6,0 +6,0 @@ "version_short": "1.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.1.0-green.svg)
+![version](https://img.shields.io/badge/Version-1.2.0-green.svg)
 [![npm version](https://img.shields.io/npm/v/swiffy-slider)](https://www.npmjs.com/package/swiffy-slider)
@@ -73,2 +73,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)
 - [Contributing](#contributing)
+- [Star gazers](#star-gazers)
 - [Versioning](#versioning)
@@ -83,4 +84,4 @@ - [Creators](#creators)
 ```html
-<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">
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.2.0/dist/js/swiffy-slider.min.js" defer>
+<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.2.0/dist/css/swiffy-slider.min.css" rel="stylesheet">
 ```
@@ -110,3 +111,3 @@
 ## Additional installation options
-- [Download the latest release](https://github.com/dynamicweb/swiffy-slider/releases/download/v1.1.0/swiffy-slider-1.1.0-dist.zip)
+- [Download the latest release](https://github.com/dynamicweb/swiffy-slider/releases/latest)
 - Clone the repo: `git clone https://github.com/dynamicweb/swiffy-slider.git`
@@ -116,3 +117,3 @@ - Install with [npm](https://www.npmjs.com/): `npm install swiffy-slider`
 
-Read the [Getting started page](https://www.siffyslider.com/docs/) for examples, configuration options and a visual configurator.
+Read the [Getting started page](https://www.swiffyslider.com/docs/) for examples, configuration options and a visual configurator.
 
@@ -136,2 +137,5 @@ ## Features
 - Auto pause - Stop playing when mouse is hovering carousel or touch is used
+- Animation - Add animations when slides slide into view
+- Animation - Choose between 6 different animations
+- Animation - Use normal, fast or slow animations
 - Scripting - Automatic or manual initialization of slider instances using `swiffyslider.init` or `swiffyslider.initSlider`
@@ -366,3 +370,3 @@ - Scripting - Execute scripts when an item is done sliding using `swiffyslider.onSlideEnd`
       <td><code>slider-nav-nodelay</code></td>
-      <td>Disables smooth scrolling when sliding using navigation buttons, indicators and autoplay. Makes the new slide or page appear instantly with no scroll animation. Does not affect touch navigation</td>
+      <td>Disables smooth scrolling when sliding using navigation buttons, indicators and autoplay. Makes the new slide or page appear instantly with no scroll smoothing. Does not affect touch navigation</td>
     </tr>
@@ -487,2 +491,6 @@ <tr>
     </tr>
+    <tr>
+      <td><code>data-slider-nav-animation-threshold</code> attribute</td>
+      <td>Changes the default animation threshold - value is between 0-1. <code>data-slider-nav-animation-threshold="0.3"</code>. Default value is 0.3. This setting defines how many percent of a slide should be visible before the animation starts</td>
+    </tr>
   </tbody>
@@ -591,3 +599,3 @@ </table>
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.min.js" data-noinit defer>
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.2.0/dist/js/swiffy-slider.min.js" data-noinit defer>
 <script>
@@ -611,3 +619,3 @@ window.addEventListener('load', () => {
 ```html
-<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.min.js" data-noinit defer>
+<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.2.0/dist/js/swiffy-slider.min.js" data-noinit defer>
 <script>
@@ -634,3 +642,3 @@ window.addEventListener('load', () => {
 <script type="module">
-    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.ESM.min.js'; 
+    import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.2.0/dist/js/swiffy-slider.ESM.min.js'; 
     window.swiffyslider = swiffyslider; 
@@ -645,3 +653,3 @@ window.swiffyslider.init();
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.2.0/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
         swiffysliderModule.swiffyslider.init();
@@ -657,3 +665,3 @@ });
 window.addEventListener("load", () => {
-    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
+    import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.2.0/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
         window.swiffyslider = swiffysliderModule.swiffyslider;
@@ -719,4 +727,4 @@ window.swiffyslider.init();
             <td><code>--swiffy-slider-nav-zoom</code></td>
-            <td><code>--swiffy-slider-nav-zoom:125%;</code></td>
-            <td>Use to overrule the navigation arrow sizes. Default is 100% for normal sizes and 75% for small sized navigation. Set to i.e. 125% to make navigation arrows larger.</td>
+            <td><code>--swiffy-slider-nav-zoom:1.25;</code></td>
+            <td>Use to overrule the navigation arrow sizes. Default is 1 for normal sizes and .75 for small sized navigation. Set to i.e. 1.25 to make navigation arrows larger.</td>
         </tr>
@@ -758,3 +766,3 @@ <tr>
 --swiffy-slider-nav-dark:darkolivegreen;
---swiffy-slider-nav-zoom:85%;
+--swiffy-slider-nav-zoom:.85;
 --swiffy-slider-item-reveal:25%;">
@@ -781,3 +789,3 @@
 
-When sliding using buttons, indicators and javascript, the new slides are shown instantly with no animation or smoothing when using Safari.
+When sliding using buttons, indicators and javascript, the new slides are shown instantly with no smoothing when using Safari.
 
@@ -798,3 +806,2 @@ In Safari based browsers, smooth scrolling is not supported because it is still lacking browser support. [See Can I use](https://caniuse.com/css-scroll-behavior)
 - Works in 'modern' browsers from the last ~3 years only. No IE support or anything funny.
-- No animations are implemented except smooth scrolling
 
@@ -823,3 +830,9 @@ Use other sliders and carousels if these limitations is important in your project.
 
+## Star gazers
 
+Feel free to star this project and help spread the word.
+
+[![Stargazers repo roster for @dynamicweb/swiffy-slider](https://reporoster.com/stars/dynamicweb/swiffy-slider)](https://github.com/dynamicweb/swiffy-slider/stargazers)
+
+
 ## Versioning
@@ -826,0 +839,0 @@

No alert changes

Improved metrics

Total package byte prevSize

85600

increased by7.8%

Number of package files

12

increased by20%

Lines of code

91

increased by9.64%

Number of lines in readme file

838

increased by1.58%

No dependency changes