@evermade/overflow-slider 2.0.2 → 3.1.0

package/docs/dist/plugins/drag-scrolling/drag-scrolling/index.esm.js

@@ -8,9 +8,13 @@ function DragScrollingPlugin(args) {
         let isMouseDown = false;
         let startX = 0;
         let scrollLeft = 0;
+        let isMovingForward = false;
+        let programmaticScrollStarted = false;
+        let mayNeedToSnap = false;
         // add data attribute to container
         slider.container.setAttribute('data-has-drag-scrolling', 'true');
         const mouseDown = (e) => {
+            programmaticScrollStarted = false;
             if (!slider.details.hasOverflow) {
                 return;
             }
@@ -22,7 +26,6 @@ function DragScrollingPlugin(args) {
             scrollLeft = slider.container.scrollLeft;
             // change cursor to grabbing
             slider.container.style.cursor = 'grabbing';
-            slider.container.style.scrollSnapType = 'none';
             slider.container.style.scrollBehavior = 'auto';
             // prevent focus going to the slides
             e.preventDefault();
@@ -30,15 +33,26 @@ function DragScrollingPlugin(args) {
         };
         const mouseMove = (e) => {
             if (!slider.details.hasOverflow) {
+                programmaticScrollStarted = false;
                 return;
             }
             if (!isMouseDown) {
+                programmaticScrollStarted = false;
                 return;
             }
             e.preventDefault();
+            if (!programmaticScrollStarted) {
+                programmaticScrollStarted = true;
+                slider.emit('programmaticScrollStart');
+            }
             const x = e.pageX - slider.container.offsetLeft;
             const walk = (x - startX);
-            slider.container.scrollLeft = scrollLeft - walk;
+            const newScrollLeft = scrollLeft - walk;
+            mayNeedToSnap = true;
+            if (Math.floor(slider.container.scrollLeft) !== Math.floor(newScrollLeft)) {
+                isMovingForward = slider.container.scrollLeft < newScrollLeft;
+            }
+            slider.container.scrollLeft = newScrollLeft;
             const absWalk = Math.abs(walk);
             const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
             const pointerEvents = absWalk > options.draggedDistanceThatPreventsClick ? 'none' : '';
@@ -48,12 +62,13 @@ function DragScrollingPlugin(args) {
         };
         const mouseUp = () => {
             if (!slider.details.hasOverflow) {
+                programmaticScrollStarted = false;
                 return;
             }
             isMouseDown = false;
             slider.container.style.cursor = '';
             setTimeout(() => {
-                slider.container.style.scrollSnapType = '';
+                programmaticScrollStarted = false;
                 slider.container.style.scrollBehavior = '';
                 const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
                 slides.forEach((slide) => {
@@ -64,6 +79,18 @@ function DragScrollingPlugin(args) {
         window.addEventListener('mousedown', mouseDown);
         window.addEventListener('mousemove', mouseMove);
         window.addEventListener('mouseup', mouseUp);
+        // emulate scroll snapping
+        if (slider.options.emulateScrollSnap) {
+            const snap = () => {
+                if (!mayNeedToSnap || isMouseDown) {
+                    return;
+                }
+                mayNeedToSnap = false;
+                slider.snapToClosestSlide(isMovingForward ? 'next' : 'prev');
+            };
+            slider.on('programmaticScrollEnd', snap);
+            window.addEventListener('mouseup', snap);
+        }
     };
 }
 

package/docs/dist/plugins/drag-scrolling/drag-scrolling/index.min.js

@@ -1 +1 @@
-function e(e){var t;const n=null!==(t=null==e?void 0:e.draggedDistanceThatPreventsClick)&&void 0!==t?t:20;return e=>{let t=!1,o=0,r=0;e.container.setAttribute("data-has-drag-scrolling","true");window.addEventListener("mousedown",(n=>{e.details.hasOverflow&&e.container.contains(n.target)&&(t=!0,o=n.pageX-e.container.offsetLeft,r=e.container.scrollLeft,e.container.style.cursor="grabbing",e.container.style.scrollSnapType="none",e.container.style.scrollBehavior="auto",n.preventDefault(),n.stopPropagation())})),window.addEventListener("mousemove",(a=>{if(!e.details.hasOverflow)return;if(!t)return;a.preventDefault();const s=a.pageX-e.container.offsetLeft-o;e.container.scrollLeft=r-s;const l=Math.abs(s),i=e.container.querySelectorAll(e.options.slidesSelector),c=l>n?"none":"";i.forEach((e=>{e.style.pointerEvents=c}))})),window.addEventListener("mouseup",(()=>{e.details.hasOverflow&&(t=!1,e.container.style.cursor="",setTimeout((()=>{e.container.style.scrollSnapType="",e.container.style.scrollBehavior="";e.container.querySelectorAll(e.options.slidesSelector).forEach((e=>{e.style.pointerEvents=""}))}),50))}))}}export{e as default};
+function e(e){var t;const o=null!==(t=null==e?void 0:e.draggedDistanceThatPreventsClick)&&void 0!==t?t:20;return e=>{let t=!1,n=0,r=0,a=!1,l=!1,s=!1;e.container.setAttribute("data-has-drag-scrolling","true");if(window.addEventListener("mousedown",(o=>{l=!1,e.details.hasOverflow&&e.container.contains(o.target)&&(t=!0,n=o.pageX-e.container.offsetLeft,r=e.container.scrollLeft,e.container.style.cursor="grabbing",e.container.style.scrollBehavior="auto",o.preventDefault(),o.stopPropagation())})),window.addEventListener("mousemove",(i=>{if(!e.details.hasOverflow)return void(l=!1);if(!t)return void(l=!1);i.preventDefault(),l||(l=!0,e.emit("programmaticScrollStart"));const c=i.pageX-e.container.offsetLeft-n,d=r-c;s=!0,Math.floor(e.container.scrollLeft)!==Math.floor(d)&&(a=e.container.scrollLeft<d),e.container.scrollLeft=d;const f=Math.abs(c),u=e.container.querySelectorAll(e.options.slidesSelector),v=f>o?"none":"";u.forEach((e=>{e.style.pointerEvents=v}))})),window.addEventListener("mouseup",(()=>{e.details.hasOverflow?(t=!1,e.container.style.cursor="",setTimeout((()=>{l=!1,e.container.style.scrollBehavior="";e.container.querySelectorAll(e.options.slidesSelector).forEach((e=>{e.style.pointerEvents=""}))}),50)):l=!1})),e.options.emulateScrollSnap){const o=()=>{s&&!t&&(s=!1,e.snapToClosestSlide(a?"next":"prev"))};e.on("programmaticScrollEnd",o),window.addEventListener("mouseup",o)}}}export{e as default};

package/docs/dist/plugins/fade/fade/index.esm.js

@@ -0,0 +1,81 @@
+function FadePlugin(args) {
+    return (slider) => {
+        var _a, _b, _c;
+        const options = {
+            classNames: {
+                fadeItem: 'overflow-slider-fade',
+                fadeItemStart: 'overflow-slider-fade--start',
+                fadeItemEnd: 'overflow-slider-fade--end',
+            },
+            container: (_a = args === null || args === void 0 ? void 0 : args.container) !== null && _a !== void 0 ? _a : null,
+            containerStart: (_b = args === null || args === void 0 ? void 0 : args.containerStart) !== null && _b !== void 0 ? _b : null,
+            containerEnd: (_c = args === null || args === void 0 ? void 0 : args.containerEnd) !== null && _c !== void 0 ? _c : null,
+        };
+        const fadeItemStart = document.createElement('div');
+        fadeItemStart.classList.add(options.classNames.fadeItem, options.classNames.fadeItemStart);
+        fadeItemStart.setAttribute('aria-hidden', 'true');
+        fadeItemStart.setAttribute('tabindex', '-1');
+        const fadeItemEnd = document.createElement('div');
+        fadeItemEnd.classList.add(options.classNames.fadeItem, options.classNames.fadeItemEnd);
+        fadeItemEnd.setAttribute('aria-hidden', 'true');
+        fadeItemEnd.setAttribute('tabindex', '-1');
+        if (options.containerStart) {
+            options.containerStart.appendChild(fadeItemStart);
+        }
+        else if (options.container) {
+            options.container.appendChild(fadeItemStart);
+        }
+        if (options.containerEnd) {
+            options.containerEnd.appendChild(fadeItemEnd);
+        }
+        else if (options.container) {
+            options.container.appendChild(fadeItemEnd);
+        }
+        const hasFadeAtStart = () => {
+            return slider.container.scrollLeft > fadeItemStart.offsetWidth;
+        };
+        const fadeAtStartOpacity = () => {
+            const position = slider.container.scrollLeft;
+            if (Math.floor(position) <= Math.floor(fadeItemStart.offsetWidth)) {
+                return position / Math.max(fadeItemStart.offsetWidth, 1);
+            }
+            return 1;
+        };
+        const hasFadeAtEnd = () => {
+            return Math.floor(slider.container.scrollLeft) < Math.floor(slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth);
+        };
+        const fadeAtEndOpacity = () => {
+            const position = slider.container.scrollLeft;
+            const maxPosition = slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth();
+            const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
+            if (Math.floor(position) >= Math.floor(maxFadePosition)) {
+                return ((maxFadePosition - position) / Math.max(fadeItemEnd.offsetWidth, 1)) + 1;
+            }
+            return 1;
+        };
+        const update = () => {
+            fadeItemStart.setAttribute('data-has-fade', hasFadeAtStart().toString());
+            fadeItemStart.style.opacity = fadeAtStartOpacity().toString();
+            fadeItemEnd.setAttribute('data-has-fade', hasFadeAtEnd().toString());
+            fadeItemEnd.style.opacity = fadeAtEndOpacity().toString();
+        };
+        update();
+        slider.on('created', update);
+        slider.on('contentsChanged', update);
+        slider.on('containerSizeChanged', update);
+        slider.on('scrollEnd', update);
+        slider.on('scrollStart', update);
+        let requestId = 0;
+        const debouncedUpdate = () => {
+            if (requestId) {
+                window.cancelAnimationFrame(requestId);
+            }
+            requestId = window.requestAnimationFrame(() => {
+                update();
+            });
+        };
+        slider.on('scroll', debouncedUpdate);
+    };
+}
+
+export { FadePlugin as default };

package/docs/dist/plugins/fade/fade/index.min.js

@@ -0,0 +1 @@
+function t(t){return e=>{var n,a,o;const i={classNames:{fadeItem:"overflow-slider-fade",fadeItemStart:"overflow-slider-fade--start",fadeItemEnd:"overflow-slider-fade--end"},container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null,containerStart:null!==(a=null==t?void 0:t.containerStart)&&void 0!==a?a:null,containerEnd:null!==(o=null==t?void 0:t.containerEnd)&&void 0!==o?o:null},r=document.createElement("div");r.classList.add(i.classNames.fadeItem,i.classNames.fadeItemStart),r.setAttribute("aria-hidden","true"),r.setAttribute("tabindex","-1");const l=document.createElement("div");l.classList.add(i.classNames.fadeItem,i.classNames.fadeItemEnd),l.setAttribute("aria-hidden","true"),l.setAttribute("tabindex","-1"),i.containerStart?i.containerStart.appendChild(r):i.container&&i.container.appendChild(r),i.containerEnd?i.containerEnd.appendChild(l):i.container&&i.container.appendChild(l);const d=()=>{r.setAttribute("data-has-fade",(e.container.scrollLeft>r.offsetWidth).toString()),r.style.opacity=(()=>{const t=e.container.scrollLeft;return Math.floor(t)<=Math.floor(r.offsetWidth)?t/Math.max(r.offsetWidth,1):1})().toString(),l.setAttribute("data-has-fade",(Math.floor(e.container.scrollLeft)<Math.floor(e.getInclusiveScrollWidth()-e.getInclusiveClientWidth()-l.offsetWidth)).toString()),l.style.opacity=(()=>{const t=e.container.scrollLeft,n=e.getInclusiveScrollWidth()-e.getInclusiveClientWidth()-l.offsetWidth;return Math.floor(t)>=Math.floor(n)?(n-t)/Math.max(l.offsetWidth,1)+1:1})().toString()};d(),e.on("created",d),e.on("contentsChanged",d),e.on("containerSizeChanged",d),e.on("scrollEnd",d),e.on("scrollStart",d);let s=0;e.on("scroll",(()=>{s&&window.cancelAnimationFrame(s),s=window.requestAnimationFrame((()=>{d()}))}))}}export{t as default};

package/docs/dist/plugins/full-width/full-width/index.esm.js

@@ -21,6 +21,7 @@ function FullWidthPlugin(args) {
             if (options.addMarginAfter) {
                 lastSlide.style.marginRight = `${marginAmount}px`;
             }
+            slider.container.setAttribute('data-full-width-offset', marginAmount.toString());
         };
         update();
         slider.on('contentsChanged', update);

package/docs/dist/plugins/full-width/full-width/index.min.js

@@ -1 +1 @@
-const n=n=>{var t,e;return null!==(e=null===(t=n.container.parentElement)||void 0===t?void 0:t.offsetWidth)&&void 0!==e?e:window.innerWidth};function t(t){return e=>{var i,r,d;const o={targetWidth:null!==(i=null==t?void 0:t.targetWidth)&&void 0!==i?i:n,addMarginBefore:null===(r=null==t?void 0:t.addMarginBefore)||void 0===r||r,addMarginAfter:null===(d=null==t?void 0:t.addMarginAfter)||void 0===d||d},a=()=>{const n=e.container.querySelectorAll(e.options.slidesSelector);if(!n.length)return;const t=n[0],i=n[n.length-1],r=Math.floor((window.innerWidth-o.targetWidth(e))/2);o.addMarginBefore&&(t.style.marginLeft=`${r}px`),o.addMarginAfter&&(i.style.marginRight=`${r}px`)};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a)}}export{t as default};
+const t=t=>{var n,e;return null!==(e=null===(n=t.container.parentElement)||void 0===n?void 0:n.offsetWidth)&&void 0!==e?e:window.innerWidth};function n(n){return e=>{var i,r,o;const d={targetWidth:null!==(i=null==n?void 0:n.targetWidth)&&void 0!==i?i:t,addMarginBefore:null===(r=null==n?void 0:n.addMarginBefore)||void 0===r||r,addMarginAfter:null===(o=null==n?void 0:n.addMarginAfter)||void 0===o||o},a=()=>{const t=e.container.querySelectorAll(e.options.slidesSelector);if(!t.length)return;const n=t[0],i=t[t.length-1],r=Math.floor((window.innerWidth-d.targetWidth(e))/2);d.addMarginBefore&&(n.style.marginLeft=`${r}px`),d.addMarginAfter&&(i.style.marginRight=`${r}px`),e.container.setAttribute("data-full-width-offset",r.toString())};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a)}}export{n as default};

package/docs/dist/plugins/scroll-indicator/scroll-indicator/index.esm.js

@@ -41,13 +41,13 @@ function ScrollIndicatorPlugin(args) {
                 window.cancelAnimationFrame(requestId);
             }
             requestId = window.requestAnimationFrame(() => {
-                const scrollbarButtonWidth = (slider.details.containerWidth / slider.details.scrollableAreaWidth) * 100;
+                const scrollbarButtonWidth = (slider.details.containerWidth / slider.container.scrollWidth) * 100;
                 const scrollLeftInPortion = getScrollbarButtonLeftOffset();
                 scrollbarButton.style.width = `${scrollbarButtonWidth}%`;
                 scrollbarButton.style.transform = `translateX(${scrollLeftInPortion}px)`;
                 // aria-valuenow
                 const scrollLeft = slider.container.scrollLeft;
-                const scrollWidth = slider.container.scrollWidth;
+                const scrollWidth = slider.getInclusiveScrollWidth();
                 const containerWidth = slider.container.offsetWidth;
                 const scrollPercentage = (scrollLeft / (scrollWidth - containerWidth)) * 100;
                 scrollbarContainer.setAttribute('aria-valuenow', Math.round(Number.isNaN(scrollPercentage) ? 0 : scrollPercentage).toString());
@@ -81,10 +81,10 @@ function ScrollIndicatorPlugin(args) {
             const scrollbarButtonLeft = getScrollbarButtonLeftOffset();
             const scrollbarButtonRight = scrollbarButtonLeft + scrollbarButtonWidth;
             const clickX = e.pageX - scrollbarContainer.offsetLeft;
-            if (clickX < scrollbarButtonLeft) {
+            if (Math.floor(clickX) < Math.floor(scrollbarButtonLeft)) {
                 slider.moveToDirection('prev');
             }
-            else if (clickX > scrollbarButtonRight) {
+            else if (Math.floor(clickX) > Math.floor(scrollbarButtonRight)) {
                 slider.moveToDirection('next');
             }
         });
@@ -99,7 +99,6 @@ function ScrollIndicatorPlugin(args) {
             scrollLeft = slider.container.scrollLeft;
             // change cursor to grabbing
             scrollbarButton.style.cursor = 'grabbing';
-            slider.container.style.scrollSnapType = 'none';
             scrollbarButton.setAttribute('data-is-grabbed', 'true');
             e.preventDefault();
             e.stopPropagation();
@@ -118,7 +117,6 @@ function ScrollIndicatorPlugin(args) {
         const onInteractionUp = () => {
             isInteractionDown = false;
             scrollbarButton.style.cursor = '';
-            slider.container.style.scrollSnapType = '';
             scrollbarButton.setAttribute('data-is-grabbed', 'false');
         };
         scrollbarButton.addEventListener('mousedown', onInteractionDown);

package/docs/dist/plugins/scroll-indicator/scroll-indicator/index.min.js

@@ -1 +1 @@
-const t={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function e(e){return n=>{var o,r,a;const i={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(o=null==e?void 0:e.container)&&void 0!==o?o:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(r=n.container.getAttribute("id"))&&void 0!==r?r:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const l=document.createElement("div");l.setAttribute("class",i.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",i.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",n.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/n.details.containerWidth;return n.container.scrollLeft*t};let v=0;const f=()=>{v&&window.cancelAnimationFrame(v),v=window.requestAnimationFrame((()=>{const t=n.details.containerWidth/n.details.scrollableAreaWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const o=n.container.scrollLeft/(n.container.scrollWidth-n.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(a=n.container.parentNode)||void 0===a||a.insertBefore(s,n.container.nextSibling),f(),n.on("scroll",f),n.on("contentsChanged",f),n.on("containerSizeChanged",f),n.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?n.moveToDirection("prev"):"ArrowRight"===t.key&&n.moveToDirection("next")})),s.addEventListener("click",(t=>{const e=c.offsetWidth,o=u(),r=o+e,a=t.pageX-s.offsetLeft;a<o?n.moveToDirection("prev"):a>r&&n.moveToDirection("next")}));let b=!1,m=0,h=0;const p=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;m=e-s.offsetLeft,h=n.container.scrollLeft,c.style.cursor="grabbing",n.container.style.scrollSnapType="none",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},w=t=>{if(!b)return;t.preventDefault();const e=(t.pageX||t.touches[0].pageX)-s.offsetLeft,o=n.details.scrollableAreaWidth/s.offsetWidth,r=(e-m)*o;n.container.scrollLeft=h+r},A=()=>{b=!1,c.style.cursor="",n.container.style.scrollSnapType="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",p),c.addEventListener("touchstart",p),window.addEventListener("mousemove",w),window.addEventListener("touchmove",w,{passive:!1}),window.addEventListener("mouseup",A),window.addEventListener("touchend",A)}}export{e as default};
+const t={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function e(e){return o=>{var n,r,a;const i={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(n=null==e?void 0:e.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(r=o.container.getAttribute("id"))&&void 0!==r?r:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const l=document.createElement("div");l.setAttribute("class",i.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",i.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",o.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/o.details.containerWidth;return o.container.scrollLeft*t};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame((()=>{const t=o.details.containerWidth/o.container.scrollWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const n=o.container.scrollLeft/(o.getInclusiveScrollWidth()-o.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(n)?0:n).toString())}))};i.container?i.container.appendChild(s):null===(a=o.container.parentNode)||void 0===a||a.insertBefore(s,o.container.nextSibling),v(),o.on("scroll",v),o.on("contentsChanged",v),o.on("containerSizeChanged",v),o.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?o.moveToDirection("prev"):"ArrowRight"===t.key&&o.moveToDirection("next")})),s.addEventListener("click",(t=>{const e=c.offsetWidth,n=u(),r=n+e,a=t.pageX-s.offsetLeft;Math.floor(a)<Math.floor(n)?o.moveToDirection("prev"):Math.floor(a)>Math.floor(r)&&o.moveToDirection("next")}));let b=!1,h=0,m=0;const w=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;h=e-s.offsetLeft,m=o.container.scrollLeft,c.style.cursor="grabbing",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},g=t=>{if(!b)return;t.preventDefault();const e=(t.pageX||t.touches[0].pageX)-s.offsetLeft,n=o.details.scrollableAreaWidth/s.offsetWidth,r=(e-h)*n;o.container.scrollLeft=m+r},p=()=>{b=!1,c.style.cursor="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",w),c.addEventListener("touchstart",w),window.addEventListener("mousemove",g),window.addEventListener("touchmove",g,{passive:!1}),window.addEventListener("mouseup",p),window.addEventListener("touchend",p)}}export{e as default};

package/docs/dist/plugins/thumbnails/thumbnails/index.esm.js

@@ -27,6 +27,7 @@ function FullWidthPlugin(args) {
         };
         setActiveThumbnail();
         addClickListeners();
+        // @todo debounce on scroll
         mainSlider.on('activeSlideChanged', () => {
             setTimeout(() => {
                 const activeSlideIdx = mainSlider.activeSlideIdx;

package/docs/index.html

@@ -69,7 +69,7 @@
 									<a href="#12" class="example-item example-item--12">12</a>
 									<a href="#13" class="example-item example-item--13">13</a>
 								</div>
-								<p style="margin-top:1.5rem;">These slides are not clickable</p>
+								<p style="margin-top:1.5rem;">These slides are not clickable.</p>
 								<div class="overflow-slider example-container example-container-1-drag-scrolling-not-clickable">
 									<div class="example-item example-item--1">1</div>
 									<div class="example-item example-item--2">2</div>
@@ -85,6 +85,22 @@
 									<div class="example-item example-item--12">12</div>
 									<div class="example-item example-item--13">13</div>
 								</div>
+								<p style="margin-top:1.5rem;">Scroll-snap emulation enabled.</p>
+								<div class="overflow-slider example-container example-container-1-drag-scrolling-scroll-snap">
+									<div class="example-item example-item--1">1</div>
+									<div class="example-item example-item--2">2</div>
+									<div class="example-item example-item--3">3</div>
+									<div class="example-item example-item--4">4</div>
+									<div class="example-item example-item--5">5</div>
+									<div class="example-item example-item--6">6</div>
+									<div class="example-item example-item--7">7</div>
+									<div class="example-item example-item--8">8</div>
+									<div class="example-item example-item--9">9</div>
+									<div class="example-item example-item--10">10</div>
+									<div class="example-item example-item--11">11</div>
+									<div class="example-item example-item--12">12</div>
+									<div class="example-item example-item--13">13</div>
+								</div>
 							</div>
 
 							<div class="entry__item">
@@ -134,13 +150,29 @@
 									<a href="#4" class="example-item example-item--4">4</a>
 									<a href="#5" class="example-item example-item--5">5</a>
 									<a href="#6" class="example-item example-item--6">6</a>
-									<a href="#7" class="example-item example-item--7">7</a>
-									<a href="#8" class="example-item example-item--8">8</a>
-									<a href="#9" class="example-item example-item--9">9</a>
-									<a href="#10" class="example-item example-item--10">10</a>
 								</div>
 							</div>
 
+							<div class="entry__item">
+								<h3>Fade</h3>
+								<p>Display fade. Uses FadePlugin. Fade can be on both sides but having it only at end is more usable.</p>
+								<div class="example-container-1-fade-wrap">
+									<div class="example-container-1-fade__start"></div>
+									<div class="overflow-slider example-container example-container-1-fade">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+										<a href="#5" class="example-item example-item--5">5</a>
+										<a href="#6" class="example-item example-item--6">6</a>
+										<a href="#7" class="example-item example-item--7">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<a href="#9" class="example-item example-item--9">9</a>
+										<a href="#10" class="example-item example-item--10">10</a>
+									</div>
+									<div class="example-container-1-fade__end"></div>
+								</div>
+							</div>
 
 						</section>
 
@@ -231,8 +263,8 @@
 							</div>
 
 							<div class="entry__item">
-								<h3>Entrance and Exit Animations</h3>
-								<p>Animate slides when they appear and disappear.</p>
+								<h3>Entrance and Exit Animations (experimental)</h3>
+								<p>Animate slides when they appear and disappear. Seem to only work on Chrome.</p>
 								<div class="overflow-slider example-container example-container-3-entrance-animation">
 									<a href="#1" class="example-item example-item--1">1</a>
 									<a href="#2" class="example-item example-item--2">2</a>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "2.0.2",
+	"version": "3.1.0",
 	"description": "Accessible slider tha works with overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",
@@ -39,6 +39,10 @@
 			"import": "./dist/plugins/thumbnails/thumbnails/index.esm.js",
 			"require": "./dist/plugins/thumbnails/thumbnails/index.min.js"
 		},
+		"./plugins/fade": {
+			"import": "./dist/plugins/fade/fade/index.esm.js",
+			"require": "./dist/plugins/fade/fade/index.min.js"
+		},
 		"./style.css": "./dist/overflow-slider.css"
 	},
 	"repository": {

package/src/core/details.ts

@@ -11,7 +11,7 @@ export default function details( slider: Slider) {
 	let amountOfPages = 0;
 	let currentPage = 1;
 
-	if (slider.container.scrollWidth > slider.container.clientWidth) {
+	if ( Math.floor( slider.getInclusiveScrollWidth() ) > Math.floor( slider.getInclusiveClientWidth() ) ) {
 		hasOverflow = true;
 	}
 
@@ -19,14 +19,14 @@ export default function details( slider: Slider) {
 
 	containerWidth = slider.container.offsetWidth;
 
-	scrollableAreaWidth = slider.container.scrollWidth;
+	scrollableAreaWidth = slider.getInclusiveScrollWidth();
 
 	amountOfPages = Math.ceil(scrollableAreaWidth / containerWidth);
 
-	if (slider.container.scrollLeft >= 0) {
+	if ( Math.floor( slider.container.scrollLeft ) >= 0) {
 		currentPage = Math.floor(slider.container.scrollLeft / containerWidth);
 		// consider as last page if the scrollLeft + containerWidth is equal to scrollWidth
-		if (slider.container.scrollLeft + containerWidth === scrollableAreaWidth) {
+		if (Math.floor( slider.container.scrollLeft + containerWidth ) === Math.floor( scrollableAreaWidth ) ) {
 			currentPage = amountOfPages - 1;
 		}
 	}

package/src/core/overflow-slider.ts

@@ -21,6 +21,8 @@ export default function OverflowSlider (
 			scrollBehavior: "smooth",
 			scrollStrategy: "fullSlide",
 			slidesSelector: ":scope > *",
+			emulateScrollSnap: false,
+			emulateScrollSnapMaxThreshold: 64,
 		};
 
 		const sliderOptions = { ...defaults, ...options };