@evermade/overflow-slider 2.0.2 → 3.1.0

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

@@ -1,5 +1,5 @@
 import details from './details.esm.js';
-import { generateId, objectsAreEqual } from './utils.esm.js';
+import { generateId, objectsAreEqual, getOutermostChildrenEdgeMarginSum } from './utils.esm.js';
 
 function Slider(container, options, plugins) {
     let slider;
@@ -69,7 +69,87 @@ function Slider(container, options, plugins) {
         const resizeObserver = new ResizeObserver(() => slider.emit('containerSizeChanged'));
         resizeObserver.observe(slider.container);
         // scroll event with debouncing
-        slider.container.addEventListener('scroll', () => slider.emit('scroll'));
+        let scrollTimeout;
+        let nativeScrollTimeout;
+        let programmaticScrollTimeout;
+        let scrollLeft = slider.container.scrollLeft;
+        let nativeScrollLeft = slider.container.scrollLeft;
+        let programmaticScrollLeft = slider.container.scrollLeft;
+        let isScrolling = false;
+        let isUserScrolling = false;
+        let isProgrammaticScrolling = false;
+        // any scroll
+        slider.container.addEventListener('scroll', () => {
+            const newScrollLeft = slider.container.scrollLeft;
+            if (Math.floor(scrollLeft) !== Math.floor(newScrollLeft)) {
+                if (!isScrolling) {
+                    isScrolling = true;
+                    slider.emit('scrollStart');
+                }
+                scrollLeft = newScrollLeft;
+                clearTimeout(scrollTimeout);
+                scrollTimeout = setTimeout(() => {
+                    isScrolling = false;
+                    slider.emit('scrollEnd');
+                }, 50);
+                slider.emit('scroll');
+            }
+            // keep up nativeScrolling to take into account scroll-snap
+            if (isUserScrolling) {
+                nativeScrollHandler();
+            }
+        });
+        // user initted scroll (touchmove, mouse wheel, etc.)
+        const nativeScrollHandler = () => {
+            const newScrollLeft = slider.container.scrollLeft;
+            if (Math.floor(nativeScrollLeft) !== Math.floor(newScrollLeft) && !isProgrammaticScrolling) {
+                if (!isUserScrolling) {
+                    slider.emit('nativeScrollStart');
+                    isUserScrolling = true;
+                }
+                slider.emit('nativeScroll');
+                nativeScrollLeft = newScrollLeft;
+                clearTimeout(nativeScrollTimeout);
+                nativeScrollTimeout = setTimeout(() => {
+                    isUserScrolling = false;
+                    slider.emit('nativeScrollEnd');
+                    // update programmaticScrollLeft to match nativeScrollLeft
+                    // this prevents programmaticScroll triggering with no real change to scrollLeft
+                    programmaticScrollLeft = nativeScrollLeft;
+                }, 50);
+            }
+        };
+        slider.container.addEventListener('touchmove', nativeScrollHandler);
+        slider.container.addEventListener('mousewheel', nativeScrollHandler);
+        slider.container.addEventListener('wheel', nativeScrollHandler);
+        // programmatic scroll (scrollTo, etc.)
+        slider.on('programmaticScrollStart', () => {
+            isProgrammaticScrolling = true;
+        });
+        slider.container.addEventListener('scroll', () => {
+            const newScrollLeft = slider.container.scrollLeft;
+            if (Math.floor(programmaticScrollLeft) !== Math.floor(newScrollLeft) && !isUserScrolling && isProgrammaticScrolling) {
+                programmaticScrollLeft = newScrollLeft;
+                clearTimeout(programmaticScrollTimeout);
+                programmaticScrollTimeout = setTimeout(() => {
+                    isProgrammaticScrolling = false;
+                    slider.emit('programmaticScrollEnd');
+                    // update nativeScrollLeft to match programmaticScrollLeft
+                    // this prevents nativeScroll triggering with no real change to scrollLeft
+                    nativeScrollLeft = programmaticScrollLeft;
+                }, 50);
+                slider.emit('programmaticScroll');
+            }
+        });
+        // Fix issues on scroll snapping not working on programmatic scroll (it's not smooth)
+        // by disabling scroll snap if scrolling is programmatic
+        slider.on('programmaticScrollStart', () => {
+            slider.container.style.scrollSnapType = 'none';
+        });
+        // restore scroll snap if user scroll starts
+        slider.on('nativeScrollStart', () => {
+            slider.container.style.scrollSnapType = '';
+        });
         // Listen for mouse down and touch start events on the document
         // This handles both mouse clicks and touch interactions
         let wasInteractedWith = false;
@@ -114,27 +194,23 @@ function Slider(container, options, plugins) {
         const slideStart = slideRect.left - sliderRect.left + scrollLeft;
         const slideEnd = slideStart + slideRect.width;
         let scrollTarget = null;
-        if (slideStart < scrollLeft) {
+        if (Math.floor(slideStart) < Math.floor(scrollLeft)) {
             scrollTarget = slideStart;
         }
-        else if (slideEnd > scrollLeft + containerWidth) {
+        else if (Math.floor(slideEnd) > Math.floor(scrollLeft) + Math.floor(containerWidth)) {
             scrollTarget = slideEnd - containerWidth;
         }
-        else if (slideStart === 0) {
+        else if (Math.floor(slideStart) === 0) {
             scrollTarget = 0;
         }
+        else {
+            scrollTarget = slideStart;
+        }
         if (scrollTarget !== null) {
-            slider.container.style.scrollSnapType = 'none';
-            // seems like in order for scroll behavior: smooth to work, we need to wait a bit to disable scrollSnapType
             setTimeout((scrollTarget) => {
+                slider.emit('programmaticScrollStart');
                 slider.container.scrollTo({ left: scrollTarget, behavior: behavior });
             }, 50, scrollTarget);
-            setTimeout(() => {
-                // leave snapping off to fix issues with slide moving back on focus
-                if (behavior == 'smooth') {
-                    slider.container.style.scrollSnapType = '';
-                }
-            }, 500);
         }
     }
     function setActiveSlideIdx() {
@@ -142,13 +218,20 @@ function Slider(container, options, plugins) {
         const scrollLeft = slider.container.scrollLeft;
         const slides = slider.slides;
         let activeSlideIdx = 0;
+        let scrolledPastLastSlide = false;
         for (let i = 0; i < slides.length; i++) {
             const slideRect = slides[i].getBoundingClientRect();
             const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
-            if (slideStart > scrollLeft) {
+            if (Math.floor(slideStart) >= Math.floor(scrollLeft)) {
                 activeSlideIdx = i;
                 break;
             }
+            if (i === slides.length - 1) {
+                scrolledPastLastSlide = true;
+            }
+        }
+        if (scrolledPastLastSlide) {
+            activeSlideIdx = slides.length - 1;
         }
         const oldActiveSlideIdx = slider.activeSlideIdx;
         slider.activeSlideIdx = activeSlideIdx;
@@ -162,15 +245,29 @@ function Slider(container, options, plugins) {
             ensureSlideIsInView(slide);
         }
     }
+    function getInclusiveScrollWidth() {
+        return slider.container.scrollWidth + getOutermostChildrenEdgeMarginSum(slider.container);
+    }
+    function getInclusiveClientWidth() {
+        return slider.container.clientWidth + getOutermostChildrenEdgeMarginSum(slider.container);
+    }
     function getGapSize() {
         let gapSize = 0;
         if (slider.slides.length > 1) {
             const firstSlideRect = slider.slides[0].getBoundingClientRect();
             const secondSlideRect = slider.slides[1].getBoundingClientRect();
-            gapSize = secondSlideRect.left - firstSlideRect.right;
+            gapSize = Math.floor(secondSlideRect.left - firstSlideRect.right);
         }
         return gapSize;
     }
+    function getLeftOffset() {
+        let offset = 0;
+        const fullWidthOffset = slider.container.getAttribute('data-full-width-offset');
+        if (fullWidthOffset) {
+            offset = parseInt(fullWidthOffset);
+        }
+        return Math.floor(offset);
+    }
     function moveToDirection(direction = "prev") {
         const scrollStrategy = slider.options.scrollStrategy;
         const scrollLeft = slider.container.scrollLeft;
@@ -181,16 +278,16 @@ function Slider(container, options, plugins) {
             targetScrollPosition = Math.max(0, scrollLeft - slider.container.offsetWidth);
         }
         else if (direction === 'next') {
-            targetScrollPosition = Math.min(slider.container.scrollWidth, scrollLeft + slider.container.offsetWidth);
+            targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + slider.container.offsetWidth);
         }
         if (scrollStrategy === 'fullSlide') {
-            let fullSldeTargetScrollPosition = null;
+            let fullSlideTargetScrollPosition = null;
             // extend targetScrollPosition to include gap
             if (direction === 'prev') {
-                fullSldeTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
+                fullSlideTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
             }
             else {
-                fullSldeTargetScrollPosition = Math.min(slider.container.scrollWidth, targetScrollPosition + getGapSize());
+                fullSlideTargetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), targetScrollPosition + getGapSize());
             }
             if (direction === 'next') {
                 let partialSlideFound = false;
@@ -198,17 +295,25 @@ function Slider(container, options, plugins) {
                     const slideRect = slide.getBoundingClientRect();
                     const slideStart = slideRect.left - sliderRect.left + scrollLeft;
                     const slideEnd = slideStart + slideRect.width;
-                    if (slideStart < targetScrollPosition && slideEnd > targetScrollPosition) {
-                        fullSldeTargetScrollPosition = slideStart;
+                    if (Math.floor(slideStart) < Math.floor(targetScrollPosition) && Math.floor(slideEnd) > Math.floor(targetScrollPosition)) {
+                        fullSlideTargetScrollPosition = slideStart;
                         partialSlideFound = true;
                         break;
                     }
                 }
                 if (!partialSlideFound) {
-                    fullSldeTargetScrollPosition = Math.min(targetScrollPosition, slider.container.scrollWidth - slider.container.offsetWidth);
+                    fullSlideTargetScrollPosition = Math.min(targetScrollPosition, slider.getInclusiveScrollWidth() - slider.container.offsetWidth);
                 }
-                if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition > scrollLeft) {
-                    targetScrollPosition = fullSldeTargetScrollPosition;
+                if (fullSlideTargetScrollPosition) {
+                    if (Math.floor(fullSlideTargetScrollPosition) > Math.floor(scrollLeft)) {
+                        // make sure fullSlideTargetScrollPosition is possible considering the container width
+                        const maxScrollPosition = Math.floor(slider.getInclusiveScrollWidth()) - Math.floor(containerWidth);
+                        targetScrollPosition = Math.min(fullSlideTargetScrollPosition, maxScrollPosition);
+                    }
+                    else {
+                        // cannot snap to slide, move one page worth of distance
+                        targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + containerWidth);
+                    }
                 }
             }
             else {
@@ -217,24 +322,89 @@ function Slider(container, options, plugins) {
                     const slideRect = slide.getBoundingClientRect();
                     const slideStart = slideRect.left - sliderRect.left + scrollLeft;
                     const slideEnd = slideStart + slideRect.width;
-                    if (slideStart < scrollLeft && slideEnd > scrollLeft) {
-                        fullSldeTargetScrollPosition = slideEnd - containerWidth;
+                    if (Math.floor(slideStart) < Math.floor(scrollLeft) && Math.floor(slideEnd) > Math.floor(scrollLeft)) {
+                        fullSlideTargetScrollPosition = slideEnd - containerWidth;
                         partialSlideFound = true;
                         break;
                     }
                 }
                 if (!partialSlideFound) {
-                    fullSldeTargetScrollPosition = Math.max(0, scrollLeft - containerWidth);
+                    fullSlideTargetScrollPosition = Math.max(0, scrollLeft - containerWidth);
                 }
-                if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition < scrollLeft) {
-                    targetScrollPosition = fullSldeTargetScrollPosition;
+                if (fullSlideTargetScrollPosition && Math.floor(fullSlideTargetScrollPosition) < Math.floor(scrollLeft)) {
+                    targetScrollPosition = fullSlideTargetScrollPosition;
                 }
             }
         }
+        // add left offset
+        const offsettedTargetScrollPosition = targetScrollPosition - getLeftOffset();
+        if (Math.floor(offsettedTargetScrollPosition) >= 0) {
+            targetScrollPosition = offsettedTargetScrollPosition;
+        }
+        slider.emit('programmaticScrollStart');
         slider.container.style.scrollBehavior = slider.options.scrollBehavior;
         slider.container.scrollLeft = targetScrollPosition;
         setTimeout(() => slider.container.style.scrollBehavior = '', 50);
     }
+    function snapToClosestSlide(direction = "prev") {
+        const isMovingForward = direction === 'next';
+        const slideReference = [];
+        for (let i = 0; i < slider.slides.length; i++) {
+            const slide = slider.slides[i];
+            const slideWidth = slide.offsetWidth;
+            const slideStart = slide.offsetLeft;
+            const slideEnd = slideStart + slideWidth;
+            const slideMiddle = slideStart + slideWidth / 2;
+            const trigger = Math.min(slideMiddle, slideStart + slider.options.emulateScrollSnapMaxThreshold);
+            slideReference.push({
+                start: slideStart,
+                middle: slideMiddle,
+                end: slideEnd,
+                width: slideWidth,
+                trigger: trigger,
+                slide: slide,
+            });
+        }
+        let snapTarget = null;
+        const scrollPosition = slider.container.scrollLeft;
+        if (isMovingForward) {
+            for (let i = 0; i < slideReference.length; i++) {
+                const item = slideReference[i];
+                if (i === 0 && Math.floor(scrollPosition) <= Math.floor(item.trigger)) {
+                    snapTarget = 0;
+                    break;
+                }
+                if (Math.floor(slider.container.scrollLeft) <= Math.floor(item.trigger)) {
+                    snapTarget = item.start;
+                    break;
+                }
+            }
+        }
+        else {
+            for (let i = slideReference.length - 1; i >= 0; i--) {
+                const item = slideReference[i];
+                if (i === slideReference.length - 1 && Math.floor(scrollPosition) >= Math.floor(item.trigger)) {
+                    snapTarget = item.start;
+                    break;
+                }
+                if (Math.floor(slider.container.scrollLeft) >= Math.floor(item.trigger)) {
+                    snapTarget = item.start;
+                    break;
+                }
+            }
+        }
+        if (snapTarget !== null) {
+            const offsettedSnapTarget = snapTarget - getLeftOffset();
+            if (Math.floor(offsettedSnapTarget) >= 0) {
+                snapTarget = offsettedSnapTarget;
+            }
+            const scrollBehavior = slider.options.scrollBehavior || 'smooth';
+            slider.container.scrollTo({
+                left: snapTarget,
+                behavior: scrollBehavior
+            });
+        }
+    }
     function on(name, cb) {
         if (!subs[name]) {
             subs[name] = [];
@@ -257,6 +427,9 @@ function Slider(container, options, plugins) {
         emit,
         moveToDirection,
         moveToSlide,
+        snapToClosestSlide,
+        getInclusiveScrollWidth,
+        getInclusiveClientWidth,
         on,
         options,
     };

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

@@ -1 +1 @@
-import e from"./details.min.js";import{generateId as t,objectsAreEqual as n}from"./utils.min.js";function i(i,o,l){let r,s={};function a(t=!1){const i=r.details,o=e(r);r.details=o,t||n(i,o)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function c(){r.slides=Array.from(r.container.querySelectorAll(r.options.slidesSelector))}function d(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function f(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}function u(e,t=null){const n=t||r.options.scrollBehavior,i=e.getBoundingClientRect(),o=r.container.getBoundingClientRect(),l=r.container.offsetWidth,s=r.container.scrollLeft,a=i.left-o.left+s,c=a+i.width;let d=null;a<s?d=a:c>s+l?d=c-l:0===a&&(d=0),null!==d&&(r.container.style.scrollSnapType="none",setTimeout((e=>{r.container.scrollTo({left:e,behavior:n})}),50,d),setTimeout((()=>{"smooth"==n&&(r.container.style.scrollSnapType="")}),500))}function h(){const e=r.container.getBoundingClientRect(),t=r.container.scrollLeft,n=r.slides;let i=0;for(let o=0;o<n.length;o++){if(n[o].getBoundingClientRect().left-e.left+t+m()>t){i=o;break}}const o=r.activeSlideIdx;r.activeSlideIdx=i,o!==i&&r.emit("activeSlideChanged")}function m(){let e=0;if(r.slides.length>1){const t=r.slides[0].getBoundingClientRect();e=r.slides[1].getBoundingClientRect().left-t.right}return e}return r={emit:function(e){var t;s&&s[e]&&s[e].forEach((e=>{e(r)}));const n=null===(t=null==r?void 0:r.options)||void 0===t?void 0:t[e];"function"==typeof n&&n(r)},moveToDirection:function(e="prev"){const t=r.options.scrollStrategy,n=r.container.scrollLeft,i=r.container.getBoundingClientRect(),o=r.container.offsetWidth;let l=n;if("prev"===e?l=Math.max(0,n-r.container.offsetWidth):"next"===e&&(l=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===t){let t=null;if(t="prev"===e?Math.max(0,l-m()):Math.min(r.container.scrollWidth,l+m()),"next"===e){let e=!1;for(let o of r.slides){const r=o.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<l&&a>l){t=s,e=!0;break}}e||(t=Math.min(l,r.container.scrollWidth-r.container.offsetWidth)),t&&t>n&&(l=t)}else{let e=!1;for(let l of r.slides){const r=l.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<n&&a>n){t=a-o,e=!0;break}}e||(t=Math.max(0,n-o)),t&&t<n&&(l=t)}}r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=l,setTimeout((()=>r.container.style.scrollBehavior=""),50)},moveToSlide:function(e){const t=r.slides[e];t&&u(t)},on:function(e,t){s[e]||(s[e]=[]),s[e].push(t)},options:o},function(){r.container=i;let e=i.getAttribute("id");null===e&&(e=t("overflow-slider"),i.setAttribute("id",e)),c(),a(!0),h(),r.on("contentsChanged",(()=>{c(),a(),h()})),r.on("containerSizeChanged",(()=>a()));let n=0;if(r.on("scroll",(()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame((()=>{a(),h()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let e=!1;r.container.addEventListener("mousedown",(()=>{e=!0})),r.container.addEventListener("touchstart",(()=>{e=!0}),{passive:!0}),r.container.addEventListener("focusin",(t=>{if(!e){let e=t.target;for(;e.parentElement!==r.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}e=!1}))}(),f(),d(),l)for(const e of l)e(r);r.on("detailsChanged",(()=>{f(),d()})),r.emit("created"),r.container.setAttribute("data-ready","true")}(),r}export{i as default};
+import t from"./details.min.js";import{generateId as e,objectsAreEqual as o,getOutermostChildrenEdgeMarginSum as n}from"./utils.min.js";function l(l,i,r){let a,c={};function s(e=!1){const n=a.details,l=t(a);a.details=l,e||o(n,l)?e&&a.emit("detailsChanged"):a.emit("detailsChanged")}function f(){a.slides=Array.from(a.container.querySelectorAll(a.options.slidesSelector))}function d(){a.container.style.setProperty("--slider-container-width",`${a.details.containerWidth}px`),a.container.style.setProperty("--slider-scrollable-width",`${a.details.scrollableAreaWidth}px`),a.container.style.setProperty("--slider-slides-count",`${a.details.slideCount}`)}function h(){a.container.setAttribute("data-has-overflow",a.details.hasOverflow?"true":"false")}function u(t,e=null){const o=e||a.options.scrollBehavior,n=t.getBoundingClientRect(),l=a.container.getBoundingClientRect(),i=a.container.offsetWidth,r=a.container.scrollLeft,c=n.left-l.left+r,s=c+n.width;let f=null;f=Math.floor(c)<Math.floor(r)?c:Math.floor(s)>Math.floor(r)+Math.floor(i)?s-i:0===Math.floor(c)?0:c,null!==f&&setTimeout((t=>{a.emit("programmaticScrollStart"),a.container.scrollTo({left:t,behavior:o})}),50,f)}function m(){const t=a.container.getBoundingClientRect(),e=a.container.scrollLeft,o=a.slides;let n=0,l=!1;for(let i=0;i<o.length;i++){const r=o[i].getBoundingClientRect().left-t.left+e+g();if(Math.floor(r)>=Math.floor(e)){n=i;break}i===o.length-1&&(l=!0)}l&&(n=o.length-1);const i=a.activeSlideIdx;a.activeSlideIdx=n,i!==n&&a.emit("activeSlideChanged")}function g(){let t=0;if(a.slides.length>1){const e=a.slides[0].getBoundingClientRect(),o=a.slides[1].getBoundingClientRect();t=Math.floor(o.left-e.right)}return t}function M(){let t=0;const e=a.container.getAttribute("data-full-width-offset");return e&&(t=parseInt(e)),Math.floor(t)}return a={emit:function(t){var e;c&&c[t]&&c[t].forEach((t=>{t(a)}));const o=null===(e=null==a?void 0:a.options)||void 0===e?void 0:e[t];"function"==typeof o&&o(a)},moveToDirection:function(t="prev"){const e=a.options.scrollStrategy,o=a.container.scrollLeft,n=a.container.getBoundingClientRect(),l=a.container.offsetWidth;let i=o;if("prev"===t?i=Math.max(0,o-a.container.offsetWidth):"next"===t&&(i=Math.min(a.getInclusiveScrollWidth(),o+a.container.offsetWidth)),"fullSlide"===e){let e=null;if(e="prev"===t?Math.max(0,i-g()):Math.min(a.getInclusiveScrollWidth(),i+g()),"next"===t){let t=!1;for(let l of a.slides){const r=l.getBoundingClientRect(),a=r.left-n.left+o,c=a+r.width;if(Math.floor(a)<Math.floor(i)&&Math.floor(c)>Math.floor(i)){e=a,t=!0;break}}if(t||(e=Math.min(i,a.getInclusiveScrollWidth()-a.container.offsetWidth)),e)if(Math.floor(e)>Math.floor(o)){const t=Math.floor(a.getInclusiveScrollWidth())-Math.floor(l);i=Math.min(e,t)}else i=Math.min(a.getInclusiveScrollWidth(),o+l)}else{let t=!1;for(let i of a.slides){const r=i.getBoundingClientRect(),a=r.left-n.left+o,c=a+r.width;if(Math.floor(a)<Math.floor(o)&&Math.floor(c)>Math.floor(o)){e=c-l,t=!0;break}}t||(e=Math.max(0,o-l)),e&&Math.floor(e)<Math.floor(o)&&(i=e)}}const r=i-M();Math.floor(r)>=0&&(i=r),a.emit("programmaticScrollStart"),a.container.style.scrollBehavior=a.options.scrollBehavior,a.container.scrollLeft=i,setTimeout((()=>a.container.style.scrollBehavior=""),50)},moveToSlide:function(t){const e=a.slides[t];e&&u(e)},snapToClosestSlide:function(t="prev"){const e="next"===t,o=[];for(let t=0;t<a.slides.length;t++){const e=a.slides[t],n=e.offsetWidth,l=e.offsetLeft,i=l+n,r=l+n/2,c=Math.min(r,l+a.options.emulateScrollSnapMaxThreshold);o.push({start:l,middle:r,end:i,width:n,trigger:c,slide:e})}let n=null;const l=a.container.scrollLeft;if(e)for(let t=0;t<o.length;t++){const e=o[t];if(0===t&&Math.floor(l)<=Math.floor(e.trigger)){n=0;break}if(Math.floor(a.container.scrollLeft)<=Math.floor(e.trigger)){n=e.start;break}}else for(let t=o.length-1;t>=0;t--){const e=o[t];if(t===o.length-1&&Math.floor(l)>=Math.floor(e.trigger)){n=e.start;break}if(Math.floor(a.container.scrollLeft)>=Math.floor(e.trigger)){n=e.start;break}}if(null!==n){const t=n-M();Math.floor(t)>=0&&(n=t);const e=a.options.scrollBehavior||"smooth";a.container.scrollTo({left:n,behavior:e})}},getInclusiveScrollWidth:function(){return a.container.scrollWidth+n(a.container)},getInclusiveClientWidth:function(){return a.container.clientWidth+n(a.container)},on:function(t,e){c[t]||(c[t]=[]),c[t].push(e)},options:i},function(){a.container=l;let t=l.getAttribute("id");null===t&&(t=e("overflow-slider"),l.setAttribute("id",t)),f(),s(!0),m(),a.on("contentsChanged",(()=>{f(),s(),m()})),a.on("containerSizeChanged",(()=>s()));let o=0;if(a.on("scroll",(()=>{o&&window.cancelAnimationFrame(o),o=window.requestAnimationFrame((()=>{s(),m()}))})),function(){new MutationObserver((()=>a.emit("contentsChanged"))).observe(a.container,{childList:!0});let t,e,o;new ResizeObserver((()=>a.emit("containerSizeChanged"))).observe(a.container);let n=a.container.scrollLeft,l=a.container.scrollLeft,i=a.container.scrollLeft,r=!1,c=!1,s=!1;a.container.addEventListener("scroll",(()=>{const e=a.container.scrollLeft;Math.floor(n)!==Math.floor(e)&&(r||(r=!0,a.emit("scrollStart")),n=e,clearTimeout(t),t=setTimeout((()=>{r=!1,a.emit("scrollEnd")}),50),a.emit("scroll")),c&&f()}));const f=()=>{const t=a.container.scrollLeft;Math.floor(l)===Math.floor(t)||s||(c||(a.emit("nativeScrollStart"),c=!0),a.emit("nativeScroll"),l=t,clearTimeout(e),e=setTimeout((()=>{c=!1,a.emit("nativeScrollEnd"),i=l}),50))};a.container.addEventListener("touchmove",f),a.container.addEventListener("mousewheel",f),a.container.addEventListener("wheel",f),a.on("programmaticScrollStart",(()=>{s=!0})),a.container.addEventListener("scroll",(()=>{const t=a.container.scrollLeft;Math.floor(i)!==Math.floor(t)&&!c&&s&&(i=t,clearTimeout(o),o=setTimeout((()=>{s=!1,a.emit("programmaticScrollEnd"),l=i}),50),a.emit("programmaticScroll"))})),a.on("programmaticScrollStart",(()=>{a.container.style.scrollSnapType="none"})),a.on("nativeScrollStart",(()=>{a.container.style.scrollSnapType=""}));let d=!1;a.container.addEventListener("mousedown",(()=>{d=!0})),a.container.addEventListener("touchstart",(()=>{d=!0}),{passive:!0}),a.container.addEventListener("focusin",(t=>{if(!d){let e=t.target;for(;e.parentElement!==a.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}d=!1}))}(),h(),d(),r)for(const t of r)t(a);a.on("detailsChanged",(()=>{h(),d()})),a.emit("created"),a.container.setAttribute("data-ready","true")}(),a}export{l as default};

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

@@ -18,5 +18,19 @@ function objectsAreEqual(obj1, obj2) {
     }
     return true;
 }
+function getOutermostChildrenEdgeMarginSum(el) {
+    if (el.children.length === 0) {
+        return 0;
+    }
+    // get the first child and its left margin
+    const firstChild = el.children[0];
+    const firstChildStyle = getComputedStyle(firstChild);
+    const firstChildMarginLeft = parseFloat(firstChildStyle.marginLeft);
+    // Get the last child and its right margin
+    const lastChild = el.children[el.children.length - 1];
+    const lastChildStyle = getComputedStyle(lastChild);
+    const lastChildMarginRight = parseFloat(lastChildStyle.marginRight);
+    return firstChildMarginLeft + lastChildMarginRight;
+}
 
-export { generateId, objectsAreEqual };
+export { generateId, getOutermostChildrenEdgeMarginSum, objectsAreEqual };

package/docs/dist/core/utils.min.js

@@ -1 +1 @@
-function t(e,n=1){const r=`${e}-${n}`;return document.getElementById(r)?t(e,n+1):r}function e(t,e){const n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(let r of n)if(!1===e.hasOwnProperty(r)||t[r]!==e[r])return!1;return!0}export{t as generateId,e as objectsAreEqual};
+function e(t,n=1){const r=`${t}-${n}`;return document.getElementById(r)?e(t,n+1):r}function t(e,t){const n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(let r of n)if(!1===t.hasOwnProperty(r)||e[r]!==t[r])return!1;return!0}function n(e){if(0===e.children.length)return 0;const t=e.children[0],n=getComputedStyle(t),r=parseFloat(n.marginLeft),o=e.children[e.children.length-1],l=getComputedStyle(o);return r+parseFloat(l.marginRight)}export{e as generateId,n as getOutermostChildrenEdgeMarginSum,t as objectsAreEqual};

package/docs/dist/overflow-slider.css

@@ -1 +1 @@
-.overflow-slider{-ms-overflow-style:none;display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;scrollbar-width:none;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider>*{outline-offset:-2px;scroll-snap-align:start}:root{--overflow-slider-arrows-size:1.5rem;--overflow-slider-arrows-gap:.5rem;--overflow-slider-arrows-inactive-opacity:0.5}.overflow-slider__arrows{display:flex;gap:var(--overflow-slider-arrows-gap)}.overflow-slider__arrows-button{align-items:center;cursor:pointer;display:flex;outline-offset:-2px}.overflow-slider__arrows-button svg{height:var(--overflow-slider-arrows-size);width:var(--overflow-slider-arrows-size)}.overflow-slider__arrows-button[data-has-content=false]{opacity:var(--overflow-slider-arrows-inactive-opacity)}:root{--overflow-slider-dots-gap:0.5rem;--overflow-slider-dot-size:0.75rem;--overflow-slider-dot-inactive-color:rgba(0,0,0,.1);--overflow-slider-dot-active-color:rgba(0,0,0,.8)}.overflow-slider__dots{align-items:center;display:flex;justify-content:center}.overflow-slider__dots ul{display:flex;flex-wrap:wrap;gap:var(--overflow-slider-dots-gap);list-style:none;margin:0;padding:0}.overflow-slider__dots li{line-height:0;margin:0;padding:0}.overflow-slider__dot-item{background:var(--overflow-slider-dot-inactive-color);border-radius:50%;cursor:pointer;height:var(--overflow-slider-dot-size);margin:0;outline-offset:2px;padding:0;position:relative;width:var(--overflow-slider-dot-size)}.overflow-slider__dot-item:after{bottom:calc(var(--overflow-slider-dots-gap)*-1);content:"";display:block;left:calc(var(--overflow-slider-dots-gap)*-1);position:absolute;right:calc(var(--overflow-slider-dots-gap)*-1);top:calc(var(--overflow-slider-dots-gap)*-1)}.overflow-slider__dot-item:focus,.overflow-slider__dot-item:hover,.overflow-slider__dot-item[aria-pressed=true]{background:var(--overflow-slider-dot-active-color)}[data-has-drag-scrolling][data-has-overflow=true]{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--overflow-slider-scroll-indicator-button-height:4px;--overflow-slider-scroll-indicator-padding:1rem;--overflow-slider-scroll-indicator-button-color:rgba(0,0,0,.75);--overflow-slider-scroll-indicator-bar-color:rgba(0,0,0,.25)}.overflow-slider__scroll-indicator{cursor:pointer;outline:0;padding-block:var(--overflow-slider-scroll-indicator-padding);position:relative;width:100%}.overflow-slider__scroll-indicator[data-has-overflow=false]{display:none}.overflow-slider__scroll-indicator:focus-visible .overflow-slider__scroll-indicator-button{outline:2px solid;outline-offset:2px}.overflow-slider__scroll-indicator-bar{background:var(--overflow-slider-scroll-indicator-bar-color);border-radius:3px;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.overflow-slider__scroll-indicator-button{background:var(--overflow-slider-scroll-indicator-button-color);border-radius:3px;cursor:grab;height:var(--overflow-slider-scroll-indicator-button-height);left:0;position:absolute;top:calc(50% - var(--overflow-slider-scroll-indicator-button-height)/2)}.overflow-slider__scroll-indicator-button:hover,.overflow-slider__scroll-indicator-button[data-is-grabbed=true]{--overflow-slider-scroll-indicator-button-height:6px}.overflow-slider__scroll-indicator-button:after{bottom:calc(var(--overflow-slider-scroll-indicator-padding)*-1);content:"";display:block;position:absolute;top:calc(var(--overflow-slider-scroll-indicator-padding)*-1);width:100%}
+.overflow-slider{-ms-overflow-style:none;display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;position:relative;scrollbar-width:none;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider>*{outline-offset:-2px;scroll-snap-align:start}:root{--overflow-slider-arrows-size:1.5rem;--overflow-slider-arrows-gap:.5rem;--overflow-slider-arrows-inactive-opacity:0.5}.overflow-slider__arrows{display:flex;gap:var(--overflow-slider-arrows-gap)}.overflow-slider__arrows-button{align-items:center;cursor:pointer;display:flex;outline-offset:-2px}.overflow-slider__arrows-button svg{height:var(--overflow-slider-arrows-size);width:var(--overflow-slider-arrows-size)}.overflow-slider__arrows-button[data-has-content=false]{opacity:var(--overflow-slider-arrows-inactive-opacity)}:root{--overflow-slider-dots-gap:0.5rem;--overflow-slider-dot-size:0.75rem;--overflow-slider-dot-inactive-color:rgba(0,0,0,.1);--overflow-slider-dot-active-color:rgba(0,0,0,.8)}.overflow-slider__dots{align-items:center;display:flex;justify-content:center}.overflow-slider__dots ul{display:flex;flex-wrap:wrap;gap:var(--overflow-slider-dots-gap);list-style:none;margin:0;padding:0}.overflow-slider__dots li{line-height:0;margin:0;padding:0}.overflow-slider__dot-item{background:var(--overflow-slider-dot-inactive-color);border-radius:50%;cursor:pointer;height:var(--overflow-slider-dot-size);margin:0;outline-offset:2px;padding:0;position:relative;width:var(--overflow-slider-dot-size)}.overflow-slider__dot-item:after{bottom:calc(var(--overflow-slider-dots-gap)*-1);content:"";display:block;left:calc(var(--overflow-slider-dots-gap)*-1);position:absolute;right:calc(var(--overflow-slider-dots-gap)*-1);top:calc(var(--overflow-slider-dots-gap)*-1)}.overflow-slider__dot-item:focus,.overflow-slider__dot-item:hover,.overflow-slider__dot-item[aria-pressed=true]{background:var(--overflow-slider-dot-active-color)}:root{--overflow-slider-fade-color:#fff;--overflow-slider-fade-width:3rem}.overflow-slider-fade{height:100%;pointer-events:none;position:absolute;top:0;width:var(--overflow-slider-fade-width);z-index:1}.overflow-slider-fade--start{background:linear-gradient(to right,var(--overflow-slider-fade-color) 0,transparent 100%);left:0}.overflow-slider-fade--end{background:linear-gradient(to left,var(--overflow-slider-fade-color) 0,transparent 100%);right:0}[data-has-drag-scrolling][data-has-overflow=true]{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--overflow-slider-scroll-indicator-button-height:4px;--overflow-slider-scroll-indicator-padding:1rem;--overflow-slider-scroll-indicator-button-color:rgba(0,0,0,.75);--overflow-slider-scroll-indicator-bar-color:rgba(0,0,0,.25)}.overflow-slider__scroll-indicator{cursor:pointer;outline:0;padding-block:var(--overflow-slider-scroll-indicator-padding);position:relative;width:100%}.overflow-slider__scroll-indicator[data-has-overflow=false]{display:none}.overflow-slider__scroll-indicator:focus-visible .overflow-slider__scroll-indicator-button{outline:2px solid;outline-offset:2px}.overflow-slider__scroll-indicator-bar{background:var(--overflow-slider-scroll-indicator-bar-color);border-radius:3px;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.overflow-slider__scroll-indicator-button{background:var(--overflow-slider-scroll-indicator-button-color);border-radius:3px;cursor:grab;height:var(--overflow-slider-scroll-indicator-button-height);left:0;position:absolute;top:calc(50% - var(--overflow-slider-scroll-indicator-button-height)/2)}.overflow-slider__scroll-indicator-button:hover,.overflow-slider__scroll-indicator-button[data-is-grabbed=true]{--overflow-slider-scroll-indicator-button-height:6px}.overflow-slider__scroll-indicator-button:after{bottom:calc(var(--overflow-slider-scroll-indicator-padding)*-1);content:"";display:block;position:absolute;top:calc(var(--overflow-slider-scroll-indicator-padding)*-1);width:100%}

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

@@ -31,7 +31,11 @@ function ArrowsPlugin(args) {
         prev.setAttribute('aria-controls', (_d = slider.container.getAttribute('id')) !== null && _d !== void 0 ? _d : '');
         prev.setAttribute('data-type', 'prev');
         prev.innerHTML = options.icons.prev;
-        prev.addEventListener('click', () => slider.moveToDirection('prev'));
+        prev.addEventListener('click', () => {
+            if (prev.getAttribute('data-has-content') === 'true') {
+                slider.moveToDirection('prev');
+            }
+        });
         const next = document.createElement('button');
         next.setAttribute('class', options.classNames.nextButton);
         next.setAttribute('type', 'button');
@@ -39,22 +43,25 @@ function ArrowsPlugin(args) {
         next.setAttribute('aria-controls', (_e = slider.container.getAttribute('id')) !== null && _e !== void 0 ? _e : '');
         next.setAttribute('data-type', 'next');
         next.innerHTML = options.icons.next;
-        next.addEventListener('click', () => slider.moveToDirection('next'));
+        next.addEventListener('click', () => {
+            if (next.getAttribute('data-has-content') === 'true') {
+                slider.moveToDirection('next');
+            }
+        });
         // insert buttons to the nav
         nav.appendChild(prev);
         nav.appendChild(next);
         const update = () => {
             const scrollLeft = slider.container.scrollLeft;
-            const scrollWidth = slider.container.scrollWidth;
-            const clientWidth = slider.container.clientWidth;
-            const buffer = 1;
-            if (scrollLeft === 0) {
+            const scrollWidth = slider.getInclusiveScrollWidth();
+            const clientWidth = slider.getInclusiveClientWidth();
+            if (Math.floor(scrollLeft) === 0) {
                 prev.setAttribute('data-has-content', 'false');
             }
             else {
                 prev.setAttribute('data-has-content', 'true');
             }
-            if (scrollLeft + clientWidth >= scrollWidth - buffer) {
+            if (Math.floor(scrollLeft + clientWidth) >= Math.floor(scrollWidth)) {
                 next.setAttribute('data-has-content', 'false');
             }
             else {
@@ -74,7 +81,7 @@ function ArrowsPlugin(args) {
             }
         }
         update();
-        slider.on('scroll', update);
+        slider.on('scrollEnd', update);
         slider.on('contentsChanged', update);
         slider.on('containerSizeChanged', update);
     };

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

@@ -1 +1 @@
-const t={buttonPrevious:"Previous items",buttonNext:"Next items"},e={prev:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>'},n={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};function o(o){return i=>{var r,s,a,l,c,u;const d={texts:Object.assign(Object.assign({},t),(null==o?void 0:o.texts)||[]),icons:Object.assign(Object.assign({},e),(null==o?void 0:o.icons)||[]),classNames:Object.assign(Object.assign({},n),(null==o?void 0:o.classNames)||[]),container:null!==(r=null==o?void 0:o.container)&&void 0!==r?r:null,containerPrev:null!==(s=null==o?void 0:o.containerPrev)&&void 0!==s?s:null,containerNext:null!==(a=null==o?void 0:o.containerNext)&&void 0!==a?a:null},v=document.createElement("div");v.classList.add(d.classNames.navContainer);const b=document.createElement("button");b.setAttribute("class",d.classNames.prevButton),b.setAttribute("type","button"),b.setAttribute("aria-label",d.texts.buttonPrevious),b.setAttribute("aria-controls",null!==(l=i.container.getAttribute("id"))&&void 0!==l?l:""),b.setAttribute("data-type","prev"),b.innerHTML=d.icons.prev,b.addEventListener("click",(()=>i.moveToDirection("prev")));const p=document.createElement("button");p.setAttribute("class",d.classNames.nextButton),p.setAttribute("type","button"),p.setAttribute("aria-label",d.texts.buttonNext),p.setAttribute("aria-controls",null!==(c=i.container.getAttribute("id"))&&void 0!==c?c:""),p.setAttribute("data-type","next"),p.innerHTML=d.icons.next,p.addEventListener("click",(()=>i.moveToDirection("next"))),v.appendChild(b),v.appendChild(p);const x=()=>{const t=i.container.scrollLeft,e=i.container.scrollWidth,n=i.container.clientWidth;0===t?b.setAttribute("data-has-content","false"):b.setAttribute("data-has-content","true"),t+n>=e-1?p.setAttribute("data-has-content","false"):p.setAttribute("data-has-content","true")};d.containerNext&&d.containerPrev?(d.containerPrev.appendChild(b),d.containerNext.appendChild(p)):d.container?d.container.appendChild(v):null===(u=i.container.parentNode)||void 0===u||u.insertBefore(v,i.container.nextSibling),x(),i.on("scroll",x),i.on("contentsChanged",x),i.on("containerSizeChanged",x)}}export{o as default};
+const t={buttonPrevious:"Previous items",buttonNext:"Next items"},e={prev:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>'},n={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};function o(o){return r=>{var i,s,a,l,c,u;const d={texts:Object.assign(Object.assign({},t),(null==o?void 0:o.texts)||[]),icons:Object.assign(Object.assign({},e),(null==o?void 0:o.icons)||[]),classNames:Object.assign(Object.assign({},n),(null==o?void 0:o.classNames)||[]),container:null!==(i=null==o?void 0:o.container)&&void 0!==i?i:null,containerPrev:null!==(s=null==o?void 0:o.containerPrev)&&void 0!==s?s:null,containerNext:null!==(a=null==o?void 0:o.containerNext)&&void 0!==a?a:null},v=document.createElement("div");v.classList.add(d.classNames.navContainer);const b=document.createElement("button");b.setAttribute("class",d.classNames.prevButton),b.setAttribute("type","button"),b.setAttribute("aria-label",d.texts.buttonPrevious),b.setAttribute("aria-controls",null!==(l=r.container.getAttribute("id"))&&void 0!==l?l:""),b.setAttribute("data-type","prev"),b.innerHTML=d.icons.prev,b.addEventListener("click",(()=>{"true"===b.getAttribute("data-has-content")&&r.moveToDirection("prev")}));const p=document.createElement("button");p.setAttribute("class",d.classNames.nextButton),p.setAttribute("type","button"),p.setAttribute("aria-label",d.texts.buttonNext),p.setAttribute("aria-controls",null!==(c=r.container.getAttribute("id"))&&void 0!==c?c:""),p.setAttribute("data-type","next"),p.innerHTML=d.icons.next,p.addEventListener("click",(()=>{"true"===p.getAttribute("data-has-content")&&r.moveToDirection("next")})),v.appendChild(b),v.appendChild(p);const h=()=>{const t=r.container.scrollLeft,e=r.getInclusiveScrollWidth(),n=r.getInclusiveClientWidth();0===Math.floor(t)?b.setAttribute("data-has-content","false"):b.setAttribute("data-has-content","true"),Math.floor(t+n)>=Math.floor(e)?p.setAttribute("data-has-content","false"):p.setAttribute("data-has-content","true")};d.containerNext&&d.containerPrev?(d.containerPrev.appendChild(b),d.containerNext.appendChild(p)):d.container?d.container.appendChild(v):null===(u=r.container.parentNode)||void 0===u||u.insertBefore(v,r.container.nextSibling),h(),r.on("scrollEnd",h),r.on("contentsChanged",h),r.on("containerSizeChanged",h)}}export{o as default};

package/docs/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/docs/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};