@evermade/overflow-slider 2.0.2 → 3.1.0

package/dist/plugins/dots/dots/index.esm.js

@@ -20,8 +20,8 @@ function DotsPlugin(args) {
             dots.setAttribute('data-has-content', slider.details.hasOverflow.toString());
             dots.innerHTML = '';
             const dotsList = document.createElement('ul');
-            const pages = slider.details.amountOfPages;
-            const currentPage = slider.details.currentPage;
+            const pages = slider.details.slideCount;
+            const currentItem = slider.activeSlideIdx;
             if (pages <= 1) {
                 return;
             }
@@ -31,23 +31,23 @@ function DotsPlugin(args) {
                 dot.setAttribute('type', 'button');
                 dot.setAttribute('class', options.classNames.dotsItem);
                 dot.setAttribute('aria-label', options.texts.dotDescription.replace('%d', (i + 1).toString()).replace('%d', pages.toString()));
-                dot.setAttribute('aria-pressed', (i === currentPage).toString());
-                dot.setAttribute('data-page', (i + 1).toString());
+                dot.setAttribute('aria-pressed', (i === currentItem).toString());
+                dot.setAttribute('data-item', (i + 1).toString());
                 dotListItem.appendChild(dot);
                 dotsList.appendChild(dotListItem);
                 dot.addEventListener('click', () => activateDot(i + 1));
                 dot.addEventListener('focus', () => pageFocused = i + 1);
                 dot.addEventListener('keydown', (e) => {
                     var _a;
-                    const currentPageItem = dots.querySelector(`[aria-pressed="true"]`);
-                    if (!currentPageItem) {
+                    const currentItemItem = dots.querySelector(`[aria-pressed="true"]`);
+                    if (!currentItemItem) {
                         return;
                     }
-                    const currentPage = parseInt((_a = currentPageItem.getAttribute('data-page')) !== null && _a !== void 0 ? _a : '1');
+                    const currentItem = parseInt((_a = currentItemItem.getAttribute('data-item')) !== null && _a !== void 0 ? _a : '1');
                     if (e.key === 'ArrowLeft') {
-                        const previousPage = currentPage - 1;
+                        const previousPage = currentItem - 1;
                         if (previousPage > 0) {
-                            const matchingDot = dots.querySelector(`[data-page="${previousPage}"]`);
+                            const matchingDot = dots.querySelector(`[data-item="${previousPage}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
@@ -55,9 +55,9 @@ function DotsPlugin(args) {
                         }
                     }
                     if (e.key === 'ArrowRight') {
-                        const nextPage = currentPage + 1;
+                        const nextPage = currentItem + 1;
                         if (nextPage <= pages) {
-                            const matchingDot = dots.querySelector(`[data-page="${nextPage}"]`);
+                            const matchingDot = dots.querySelector(`[data-item="${nextPage}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
@@ -69,19 +69,18 @@ function DotsPlugin(args) {
             dots.appendChild(dotsList);
             // return focus to same page after rebuild
             if (pageFocused) {
-                const matchingDot = dots.querySelector(`[data-page="${pageFocused}"]`);
+                const matchingDot = dots.querySelector(`[data-item="${pageFocused}"]`);
                 if (matchingDot) {
                     matchingDot.focus();
                 }
             }
         };
-        const activateDot = (page) => {
-            const scrollTargetPosition = slider.details.containerWidth * (page - 1);
-            slider.container.style.scrollBehavior = slider.options.scrollBehavior;
-            slider.container.style.scrollSnapType = 'none';
-            slider.container.scrollLeft = scrollTargetPosition;
-            slider.container.style.scrollBehavior = '';
-            slider.container.style.scrollSnapType = '';
+        const activateDot = (item) => {
+            // const scrollTargetPosition = slider.details.containerWidth * ( page - 1 );
+            // slider.container.style.scrollBehavior = slider.options.scrollBehavior;
+            // slider.container.scrollLeft = scrollTargetPosition;
+            // slider.container.style.scrollBehavior = '';
+            slider.moveToSlide(item - 1);
         };
         buildDots();
         if (options.container) {
@@ -90,9 +89,9 @@ function DotsPlugin(args) {
         else {
             (_b = slider.container.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(dots, slider.container.nextSibling);
         }
-        slider.on('detailsChanged', () => {
-            buildDots();
-        });
+        slider.on('scrollEnd', buildDots);
+        slider.on('contentsChanged', buildDots);
+        slider.on('containerSizeChanged', buildDots);
     };
 }
 

package/dist/plugins/dots/dots/index.min.js

@@ -1 +1 @@
-const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return o=>{var a,s;const r={texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(a=null==n?void 0:n.container)&&void 0!==a?a:null},i=document.createElement("div");i.classList.add(r.classNames.dotsContainer);let l=null;const c=()=>{i.setAttribute("data-has-content",o.details.hasOverflow.toString()),i.innerHTML="";const t=document.createElement("ul"),e=o.details.amountOfPages,n=o.details.currentPage;if(!(e<=1)){for(let o=0;o<e;o++){const a=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",r.classNames.dotsItem),s.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-page",(o+1).toString()),a.appendChild(s),t.appendChild(a),s.addEventListener("click",(()=>d(o+1))),s.addEventListener("focus",(()=>l=o+1)),s.addEventListener("keydown",(t=>{var n;const o=i.querySelector('[aria-pressed="true"]');if(!o)return;const a=parseInt(null!==(n=o.getAttribute("data-page"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=a-1;if(t>0){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),d(t)}}if("ArrowRight"===t.key){const t=a+1;if(t<=e){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),d(t)}}}))}if(i.appendChild(t),l){const t=i.querySelector(`[data-page="${l}"]`);t&&t.focus()}}},d=t=>{const e=o.details.containerWidth*(t-1);o.container.style.scrollBehavior=o.options.scrollBehavior,o.container.style.scrollSnapType="none",o.container.scrollLeft=e,o.container.style.scrollBehavior="",o.container.style.scrollSnapType=""};c(),r.container?r.container.appendChild(i):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(i,o.container.nextSibling),o.on("detailsChanged",(()=>{c()}))}}export{n as default};
+const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return o=>{var i,s;const a={texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(i=null==n?void 0:n.container)&&void 0!==i?i:null},r=document.createElement("div");r.classList.add(a.classNames.dotsContainer);let d=null;const l=()=>{r.setAttribute("data-has-content",o.details.hasOverflow.toString()),r.innerHTML="";const t=document.createElement("ul"),e=o.details.slideCount,n=o.activeSlideIdx;if(!(e<=1)){for(let o=0;o<e;o++){const i=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",a.classNames.dotsItem),s.setAttribute("aria-label",a.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-item",(o+1).toString()),i.appendChild(s),t.appendChild(i),s.addEventListener("click",(()=>c(o+1))),s.addEventListener("focus",(()=>d=o+1)),s.addEventListener("keydown",(t=>{var n;const o=r.querySelector('[aria-pressed="true"]');if(!o)return;const i=parseInt(null!==(n=o.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=i-1;if(t>0){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}if("ArrowRight"===t.key){const t=i+1;if(t<=e){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}}))}if(r.appendChild(t),d){const t=r.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},c=t=>{o.moveToSlide(t-1)};l(),a.container?a.container.appendChild(r):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(r,o.container.nextSibling),o.on("scrollEnd",l),o.on("contentsChanged",l),o.on("containerSizeChanged",l)}}export{n as default};

package/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/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/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/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/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/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/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/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/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/assets/demo.css

@@ -446,6 +446,21 @@ h3:before {
 .example-container-2-perfect-fit {
 	grid-template-columns: repeat(var(--slider-slides-count, 1), calc( ( var(--slider-container-width, 900px) / 3 ) - 2/3 * var(--slide-gap, 1rem)));
 }
+.example-container-1-dots {
+	scroll-snap-type: x mandatory;
+	grid-template-columns: repeat(var(--slider-slides-count, 1), var(--slider-container-width, 900px));
+}
+
+.example-container-1-dots .example-item {
+	aspect-ratio: 16/7;
+	width: 100%;
+}
+
+.example-container-1-fade-wrap {
+	position: relative;
+}
+
+
 .example-container-2-perfect-fit .example-item {
 	aspect-ratio: 1/1;
 	width: 100%;
@@ -557,6 +572,7 @@ h3:before {
 	align-items: center;
 	background: #fff;
 	padding-inline: .5rem;
+	z-index: 1;
 }
 
 .example-4-filters-previous {

package/docs/assets/demo.js

@@ -18,6 +18,7 @@ import ScrollIndicatorPlugin from '../dist/plugins/scroll-indicator/scroll-indic
 import DotsPlugin from '../dist/plugins/dots/dots/index.esm.js';
 import FullWidthPlugin from '../dist/plugins/full-width/full-width/index.esm.js';
 import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js';
+import FadePlugin from '../dist/plugins/fade/fade/index.esm.js';
 
 (function () {
 	const init = () => {
@@ -45,7 +46,17 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 				SkipLinksPlugin(),
 			]
 		);
-		console.log( '1-drag-scrolling-not-clickable', example1DragScrollingNotClickable );
+
+		const example1DragScrollingScrollSnap = new OverflowSlider(
+			document.querySelector( '.example-container-1-drag-scrolling-scroll-snap' ),
+			{
+				emulateScrollSnap: true,
+			},
+			[
+				DragScrollingPlugin(),
+			]
+		);
+		console.log( '1-drag-scrolling-scroll-snap', example1DragScrollingScrollSnap );
 
 		const example1Arrows = new OverflowSlider(
 			document.querySelector( '.example-container-1-arrows' ),
@@ -71,7 +82,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example1Dots = new OverflowSlider(
 			document.querySelector( '.example-container-1-dots' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				SkipLinksPlugin(),
@@ -80,6 +93,20 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 		);
 		console.log( '1-dots', example1Dots );
 
+		const example1Fade = new OverflowSlider(
+			document.querySelector( '.example-container-1-fade' ),
+			{
+				emulateScrollSnap: true,
+			},
+			[
+				DragScrollingPlugin(),
+				FadePlugin({
+					containerEnd: document.querySelector( '.example-container-1-fade__end' ),
+				}),
+			]
+		);
+		console.log( '1-fade', example1Fade );
+
 		const example2PerfectFit = new OverflowSlider(
 			document.querySelector( '.example-container-2-perfect-fit' ),
 			{},
@@ -112,7 +139,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example3ScrollSnappingMandatory = new OverflowSlider(
 			document.querySelector( '.example-container-3-scroll-snapping-mandatory' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				ScrollIndicatorPlugin(),
@@ -122,7 +151,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example3ScrollSnappingProximity = new OverflowSlider(
 			document.querySelector( '.example-container-3-scroll-snapping-proximity' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				ScrollIndicatorPlugin(),
@@ -155,7 +186,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example4GridOrSliders = new OverflowSlider(
 			document.querySelector( '.example-container-4-grid-or-slider' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				ScrollIndicatorPlugin(),
@@ -183,7 +216,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example4SyncedMain = new OverflowSlider(
 			document.querySelector( '.example-container-4-synced-main' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 			]
@@ -192,7 +227,9 @@ import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js
 
 		const example4SyncedThumbnails = new OverflowSlider(
 			document.querySelector( '.example-container-4-synced-thumbnails' ),
-			{},
+			{
+				emulateScrollSnap: true,
+			},
 			[
 				DragScrollingPlugin(),
 				ThumbnailsPlugin({

package/docs/dist/core/details.esm.js

@@ -7,17 +7,17 @@ function details(slider) {
     let scrollableAreaWidth = 0;
     let amountOfPages = 0;
     let currentPage = 1;
-    if (slider.container.scrollWidth > slider.container.clientWidth) {
+    if (Math.floor(slider.getInclusiveScrollWidth()) > Math.floor(slider.getInclusiveClientWidth())) {
         hasOverflow = true;
     }
     slideCount = (_a = slider.slides.length) !== null && _a !== void 0 ? _a : 0;
     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/docs/dist/core/details.min.js

@@ -1 +1 @@
-function t(t){var e;let n,l=!1,o=0,r=0,i=0,a=0,c=1;return t.container.scrollWidth>t.container.clientWidth&&(l=!0),o=null!==(e=t.slides.length)&&void 0!==e?e:0,r=t.container.offsetWidth,i=t.container.scrollWidth,a=Math.ceil(i/r),t.container.scrollLeft>=0&&(c=Math.floor(t.container.scrollLeft/r),t.container.scrollLeft+r===i&&(c=a-1)),n={hasOverflow:l,slideCount:o,containerWidth:r,scrollableAreaWidth:i,amountOfPages:a,currentPage:c},n}export{t as default};
+function t(t){var l;let e,o=!1,r=0,n=0,a=0,i=0,c=1;return Math.floor(t.getInclusiveScrollWidth())>Math.floor(t.getInclusiveClientWidth())&&(o=!0),r=null!==(l=t.slides.length)&&void 0!==l?l:0,n=t.container.offsetWidth,a=t.getInclusiveScrollWidth(),i=Math.ceil(a/n),Math.floor(t.container.scrollLeft)>=0&&(c=Math.floor(t.container.scrollLeft/n),Math.floor(t.container.scrollLeft+n)===Math.floor(a)&&(c=i-1)),e={hasOverflow:o,slideCount:r,containerWidth:n,scrollableAreaWidth:a,amountOfPages:i,currentPage:c},e}export{t as default};

package/docs/dist/core/overflow-slider.esm.js

@@ -10,6 +10,8 @@ function OverflowSlider(container, options, plugins) {
             scrollBehavior: "smooth",
             scrollStrategy: "fullSlide",
             slidesSelector: ":scope > *",
+            emulateScrollSnap: false,
+            emulateScrollSnapMaxThreshold: 64,
         };
         const sliderOptions = Object.assign(Object.assign({}, defaults), options);
         // disable smooth scrolling if user prefers reduced motion

package/docs/dist/core/overflow-slider.min.js

@@ -1 +1 @@
-import e from"./slider.min.js";function o(o,r,t){try{if(!(o instanceof Element))throw new Error("Container must be HTML element, found "+typeof o);const s={scrollBehavior:"smooth",scrollStrategy:"fullSlide",slidesSelector:":scope > *"},n=Object.assign(Object.assign({},s),r);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(n.scrollBehavior="auto"),e(o,n,t)}catch(e){console.error(e)}}export{o as default};
+import e from"./slider.min.js";function o(o,r,t){try{if(!(o instanceof Element))throw new Error("Container must be HTML element, found "+typeof o);const l={scrollBehavior:"smooth",scrollStrategy:"fullSlide",slidesSelector:":scope > *",emulateScrollSnap:!1,emulateScrollSnapMaxThreshold:64},s=Object.assign(Object.assign({},l),r);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(s.scrollBehavior="auto"),e(o,s,t)}catch(e){console.error(e)}}export{o as default};