@evermade/overflow-slider 3.0.0 → 3.2.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;
@@ -81,7 +81,7 @@ function Slider(container, options, plugins) {
         // any scroll
         slider.container.addEventListener('scroll', () => {
             const newScrollLeft = slider.container.scrollLeft;
-            if (scrollLeft !== newScrollLeft) {
+            if (Math.floor(scrollLeft) !== Math.floor(newScrollLeft)) {
                 if (!isScrolling) {
                     isScrolling = true;
                     slider.emit('scrollStart');
@@ -102,7 +102,7 @@ function Slider(container, options, plugins) {
         // user initted scroll (touchmove, mouse wheel, etc.)
         const nativeScrollHandler = () => {
             const newScrollLeft = slider.container.scrollLeft;
-            if (nativeScrollLeft !== newScrollLeft && !isProgrammaticScrolling) {
+            if (Math.floor(nativeScrollLeft) !== Math.floor(newScrollLeft) && !isProgrammaticScrolling) {
                 if (!isUserScrolling) {
                     slider.emit('nativeScrollStart');
                     isUserScrolling = true;
@@ -128,7 +128,7 @@ function Slider(container, options, plugins) {
         });
         slider.container.addEventListener('scroll', () => {
             const newScrollLeft = slider.container.scrollLeft;
-            if (programmaticScrollLeft !== newScrollLeft && !isUserScrolling && isProgrammaticScrolling) {
+            if (Math.floor(programmaticScrollLeft) !== Math.floor(newScrollLeft) && !isUserScrolling && isProgrammaticScrolling) {
                 programmaticScrollLeft = newScrollLeft;
                 clearTimeout(programmaticScrollTimeout);
                 programmaticScrollTimeout = setTimeout(() => {
@@ -184,6 +184,9 @@ function Slider(container, options, plugins) {
     }
     function setDataAttributes() {
         slider.container.setAttribute('data-has-overflow', slider.details.hasOverflow ? 'true' : 'false');
+        if (slider.options.rtl) {
+            slider.container.setAttribute('dir', 'rtl');
+        }
     }
     function ensureSlideIsInView(slide, scrollBehavior = null) {
         const behavior = scrollBehavior || slider.options.scrollBehavior;
@@ -194,13 +197,13 @@ 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 {
@@ -215,19 +218,56 @@ function Slider(container, options, plugins) {
     }
     function setActiveSlideIdx() {
         const sliderRect = slider.container.getBoundingClientRect();
-        const scrollLeft = slider.container.scrollLeft;
+        const scrollLeft = slider.getScrollLeft();
         const slides = slider.slides;
         let activeSlideIdx = 0;
-        for (let i = 0; i < slides.length; i++) {
-            const slideRect = slides[i].getBoundingClientRect();
-            const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
-            if (slideStart > scrollLeft) {
-                activeSlideIdx = i;
-                break;
+        let scrolledPastLastSlide = false;
+        if (slider.options.rtl) {
+            const scrolledDistance = slider.getInclusiveScrollWidth() - scrollLeft - slider.getInclusiveClientWidth();
+            const slidePositions = [];
+            for (let i = slides.length - 1; i >= 0; i--) {
+                const slideRect = slides[i].getBoundingClientRect();
+                const slideEnd = Math.abs(slideRect.left) - Math.abs(sliderRect.left) + scrolledDistance;
+                slidePositions.push({
+                    slide: slides[i],
+                    slideEnd: slideEnd,
+                });
+            }
+            let closestSlide = null;
+            let closestDistance = null;
+            for (let i = 0; i < slidePositions.length; i++) {
+                const distance = Math.abs(slidePositions[i].slideEnd - scrolledDistance);
+                if (closestDistance === null || distance < closestDistance) {
+                    closestDistance = distance;
+                    closestSlide = slidePositions[i].slide;
+                }
+            }
+            if (closestSlide) {
+                activeSlideIdx = slides.indexOf(closestSlide);
+            }
+            else {
+                activeSlideIdx = slides.length - 1;
             }
         }
+        else {
+            for (let i = 0; i < slides.length; i++) {
+                const slideRect = slides[i].getBoundingClientRect();
+                const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
+                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;
+        // console.log('activeSlideIdx', activeSlideIdx);
         if (oldActiveSlideIdx !== activeSlideIdx) {
             slider.emit('activeSlideChanged');
         }
@@ -238,12 +278,24 @@ 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 getScrollLeft() {
+        return slider.options.rtl ? Math.abs(slider.container.scrollLeft) : slider.container.scrollLeft;
+    }
+    function setScrollLeft(value) {
+        slider.container.scrollLeft = slider.options.rtl ? -value : value;
+    }
     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 = slider.options.rtl ? Math.abs(Math.floor(secondSlideRect.right - firstSlideRect.left)) : Math.floor(secondSlideRect.left - firstSlideRect.right);
         }
         return gapSize;
     }
@@ -253,7 +305,7 @@ function Slider(container, options, plugins) {
         if (fullWidthOffset) {
             offset = parseInt(fullWidthOffset);
         }
-        return offset;
+        return Math.floor(offset);
     }
     function moveToDirection(direction = "prev") {
         const scrollStrategy = slider.options.scrollStrategy;
@@ -261,38 +313,47 @@ function Slider(container, options, plugins) {
         const sliderRect = slider.container.getBoundingClientRect();
         const containerWidth = slider.container.offsetWidth;
         let targetScrollPosition = scrollLeft;
-        if (direction === 'prev') {
+        const realDirection = slider.options.rtl ? (direction === 'prev' ? 'next' : 'prev') : direction;
+        if (realDirection === 'prev') {
             targetScrollPosition = Math.max(0, scrollLeft - slider.container.offsetWidth);
         }
-        else if (direction === 'next') {
-            targetScrollPosition = Math.min(slider.container.scrollWidth, scrollLeft + slider.container.offsetWidth);
+        else if (realDirection === 'next') {
+            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());
+            if (realDirection === 'prev') {
+                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') {
+            if (realDirection === 'next') {
                 let partialSlideFound = false;
                 for (let slide of slider.slides) {
                     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 {
@@ -301,23 +362,23 @@ 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 (offsettedTargetScrollPosition >= 0) {
+        if (Math.floor(offsettedTargetScrollPosition) >= 0) {
             targetScrollPosition = offsettedTargetScrollPosition;
         }
         slider.emit('programmaticScrollStart');
@@ -326,12 +387,12 @@ function Slider(container, options, plugins) {
         setTimeout(() => slider.container.style.scrollBehavior = '', 50);
     }
     function snapToClosestSlide(direction = "prev") {
-        const isMovingForward = direction === 'next';
+        const isMovingForward = slider.options.rtl ? direction === 'prev' : 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 slideStart = slider.options.rtl ? Math.abs(slide.offsetLeft + slideWidth - slider.details.containerWidth) : slide.offsetLeft;
             const slideEnd = slideStart + slideWidth;
             const slideMiddle = slideStart + slideWidth / 2;
             const trigger = Math.min(slideMiddle, slideStart + slider.options.emulateScrollSnapMaxThreshold);
@@ -342,18 +403,22 @@ function Slider(container, options, plugins) {
                 width: slideWidth,
                 trigger: trigger,
                 slide: slide,
+                // debug
+                offSetleft: slide.offsetLeft,
+                rect: slide.getBoundingClientRect(),
             });
         }
+        console.log('slideReference', slideReference);
         let snapTarget = null;
-        const scrollPosition = slider.container.scrollLeft;
+        const scrollPosition = getScrollLeft();
         if (isMovingForward) {
             for (let i = 0; i < slideReference.length; i++) {
                 const item = slideReference[i];
-                if (i === 0 && scrollPosition <= item.trigger) {
+                if (i === 0 && Math.floor(scrollPosition) <= Math.floor(item.trigger)) {
                     snapTarget = 0;
                     break;
                 }
-                if (slider.container.scrollLeft <= item.trigger) {
+                if (Math.floor(getScrollLeft()) <= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
@@ -362,11 +427,11 @@ function Slider(container, options, plugins) {
         else {
             for (let i = slideReference.length - 1; i >= 0; i--) {
                 const item = slideReference[i];
-                if (i === slideReference.length - 1 && scrollPosition >= item.trigger) {
+                if (i === slideReference.length - 1 && Math.floor(scrollPosition) >= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
-                if (slider.container.scrollLeft >= item.trigger) {
+                if (Math.floor(getScrollLeft()) >= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
@@ -374,12 +439,12 @@ function Slider(container, options, plugins) {
         }
         if (snapTarget !== null) {
             const offsettedSnapTarget = snapTarget - getLeftOffset();
-            if (offsettedSnapTarget >= 0) {
+            if (Math.floor(offsettedSnapTarget) >= 0) {
                 snapTarget = offsettedSnapTarget;
             }
             const scrollBehavior = slider.options.scrollBehavior || 'smooth';
             slider.container.scrollTo({
-                left: snapTarget,
+                left: slider.options.rtl ? -snapTarget : snapTarget,
                 behavior: scrollBehavior
             });
         }
@@ -407,6 +472,10 @@ function Slider(container, options, plugins) {
         moveToDirection,
         moveToSlide,
         snapToClosestSlide,
+        getInclusiveScrollWidth,
+        getInclusiveClientWidth,
+        getScrollLeft,
+        setScrollLeft,
         on,
         options,
     };

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

@@ -1 +1 @@
-import t from"./details.min.js";import{generateId as e,objectsAreEqual as n}from"./utils.min.js";function o(o,i,l){let r,a={};function s(e=!1){const o=r.details,i=t(r);r.details=i,e||n(o,i)?e&&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(t,e=null){const n=e||r.options.scrollBehavior,o=t.getBoundingClientRect(),i=r.container.getBoundingClientRect(),l=r.container.offsetWidth,a=r.container.scrollLeft,s=o.left-i.left+a,c=s+o.width;let d=null;d=s<a?s:c>a+l?c-l:0===s?0:s,null!==d&&setTimeout((t=>{r.emit("programmaticScrollStart"),r.container.scrollTo({left:t,behavior:n})}),50,d)}function m(){const t=r.container.getBoundingClientRect(),e=r.container.scrollLeft,n=r.slides;let o=0;for(let i=0;i<n.length;i++){if(n[i].getBoundingClientRect().left-t.left+e+h()>e){o=i;break}}const i=r.activeSlideIdx;r.activeSlideIdx=o,i!==o&&r.emit("activeSlideChanged")}function h(){let t=0;if(r.slides.length>1){const e=r.slides[0].getBoundingClientRect();t=r.slides[1].getBoundingClientRect().left-e.right}return t}function g(){let t=0;const e=r.container.getAttribute("data-full-width-offset");return e&&(t=parseInt(e)),t}return r={emit:function(t){var e;a&&a[t]&&a[t].forEach((t=>{t(r)}));const n=null===(e=null==r?void 0:r.options)||void 0===e?void 0:e[t];"function"==typeof n&&n(r)},moveToDirection:function(t="prev"){const e=r.options.scrollStrategy,n=r.container.scrollLeft,o=r.container.getBoundingClientRect(),i=r.container.offsetWidth;let l=n;if("prev"===t?l=Math.max(0,n-r.container.offsetWidth):"next"===t&&(l=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===e){let e=null;if(e="prev"===t?Math.max(0,l-h()):Math.min(r.container.scrollWidth,l+h()),"next"===t){let t=!1;for(let i of r.slides){const r=i.getBoundingClientRect(),a=r.left-o.left+n,s=a+r.width;if(a<l&&s>l){e=a,t=!0;break}}t||(e=Math.min(l,r.container.scrollWidth-r.container.offsetWidth)),e&&e>n&&(l=e)}else{let t=!1;for(let l of r.slides){const r=l.getBoundingClientRect(),a=r.left-o.left+n,s=a+r.width;if(a<n&&s>n){e=s-i,t=!0;break}}t||(e=Math.max(0,n-i)),e&&e<n&&(l=e)}}const a=l-g();a>=0&&(l=a),r.emit("programmaticScrollStart"),r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=l,setTimeout((()=>r.container.style.scrollBehavior=""),50)},moveToSlide:function(t){const e=r.slides[t];e&&u(e)},snapToClosestSlide:function(t="prev"){const e="next"===t,n=[];for(let t=0;t<r.slides.length;t++){const e=r.slides[t],o=e.offsetWidth,i=e.offsetLeft,l=i+o,a=i+o/2,s=Math.min(a,i+r.options.emulateScrollSnapMaxThreshold);n.push({start:i,middle:a,end:l,width:o,trigger:s,slide:e})}let o=null;const i=r.container.scrollLeft;if(e)for(let t=0;t<n.length;t++){const e=n[t];if(0===t&&i<=e.trigger){o=0;break}if(r.container.scrollLeft<=e.trigger){o=e.start;break}}else for(let t=n.length-1;t>=0;t--){const e=n[t];if(t===n.length-1&&i>=e.trigger){o=e.start;break}if(r.container.scrollLeft>=e.trigger){o=e.start;break}}if(null!==o){const t=o-g();t>=0&&(o=t);const e=r.options.scrollBehavior||"smooth";r.container.scrollTo({left:o,behavior:e})}},on:function(t,e){a[t]||(a[t]=[]),a[t].push(e)},options:i},function(){r.container=o;let t=o.getAttribute("id");null===t&&(t=e("overflow-slider"),o.setAttribute("id",t)),c(),s(!0),m(),r.on("contentsChanged",(()=>{c(),s(),m()})),r.on("containerSizeChanged",(()=>s()));let n=0;if(r.on("scroll",(()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame((()=>{s(),m()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});let t,e,n;new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container);let o=r.container.scrollLeft,i=r.container.scrollLeft,l=r.container.scrollLeft,a=!1,s=!1,c=!1;r.container.addEventListener("scroll",(()=>{const e=r.container.scrollLeft;o!==e&&(a||(a=!0,r.emit("scrollStart")),o=e,clearTimeout(t),t=setTimeout((()=>{a=!1,r.emit("scrollEnd")}),50),r.emit("scroll")),s&&d()}));const d=()=>{const t=r.container.scrollLeft;i===t||c||(s||(r.emit("nativeScrollStart"),s=!0),r.emit("nativeScroll"),i=t,clearTimeout(e),e=setTimeout((()=>{s=!1,r.emit("nativeScrollEnd"),l=i}),50))};r.container.addEventListener("touchmove",d),r.container.addEventListener("mousewheel",d),r.container.addEventListener("wheel",d),r.on("programmaticScrollStart",(()=>{c=!0})),r.container.addEventListener("scroll",(()=>{const t=r.container.scrollLeft;l!==t&&!s&&c&&(l=t,clearTimeout(n),n=setTimeout((()=>{c=!1,r.emit("programmaticScrollEnd"),i=l}),50),r.emit("programmaticScroll"))})),r.on("programmaticScrollStart",(()=>{r.container.style.scrollSnapType="none"})),r.on("nativeScrollStart",(()=>{r.container.style.scrollSnapType=""}));let f=!1;r.container.addEventListener("mousedown",(()=>{f=!0})),r.container.addEventListener("touchstart",(()=>{f=!0}),{passive:!0}),r.container.addEventListener("focusin",(t=>{if(!f){let e=t.target;for(;e.parentElement!==r.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}f=!1}))}(),f(),d(),l)for(const t of l)t(r);r.on("detailsChanged",(()=>{f(),d()})),r.emit("created"),r.container.setAttribute("data-ready","true")}(),r}export{o 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,s={};function c(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"),a.options.rtl&&a.container.setAttribute("dir","rtl")}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,s=n.left-l.left+r,c=s+n.width;let f=null;f=Math.floor(s)<Math.floor(r)?s:Math.floor(c)>Math.floor(r)+Math.floor(i)?c-i:0===Math.floor(s)?0:s,null!==f&&setTimeout((t=>{a.emit("programmaticScrollStart"),a.container.scrollTo({left:t,behavior:o})}),50,f)}function g(){const t=a.container.getBoundingClientRect(),e=a.getScrollLeft(),o=a.slides;let n=0,l=!1;if(a.options.rtl){const l=a.getInclusiveScrollWidth()-e-a.getInclusiveClientWidth(),i=[];for(let e=o.length-1;e>=0;e--){const n=o[e].getBoundingClientRect(),r=Math.abs(n.left)-Math.abs(t.left)+l;i.push({slide:o[e],slideEnd:r})}let r=null,s=null;for(let t=0;t<i.length;t++){const e=Math.abs(i[t].slideEnd-l);(null===s||e<s)&&(s=e,r=i[t].slide)}n=r?o.indexOf(r):o.length-1}else for(let i=0;i<o.length;i++){const r=o[i].getBoundingClientRect().left-t.left+e+M();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 m(){return a.options.rtl?Math.abs(a.container.scrollLeft):a.container.scrollLeft}function M(){let t=0;if(a.slides.length>1){const e=a.slides[0].getBoundingClientRect(),o=a.slides[1].getBoundingClientRect();t=a.options.rtl?Math.abs(Math.floor(o.right-e.left)):Math.floor(o.left-e.right)}return t}function p(){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;s&&s[t]&&s[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;const r=a.options.rtl?"prev"===t?"next":"prev":t;if("prev"===r?i=Math.max(0,o-a.container.offsetWidth):"next"===r&&(i=Math.min(a.getInclusiveScrollWidth(),o+a.container.offsetWidth)),"fullSlide"===e){let t=null;if(t="prev"===r?Math.max(0,i-M()):Math.min(a.getInclusiveScrollWidth(),i+M()),"next"===r){let e=!1;for(let l of a.slides){const r=l.getBoundingClientRect(),a=r.left-n.left+o,s=a+r.width;if(Math.floor(a)<Math.floor(i)&&Math.floor(s)>Math.floor(i)){t=a,e=!0;break}}if(e||(t=Math.min(i,a.getInclusiveScrollWidth()-a.container.offsetWidth)),t)if(Math.floor(t)>Math.floor(o)){const e=Math.floor(a.getInclusiveScrollWidth())-Math.floor(l);i=Math.min(t,e)}else i=Math.min(a.getInclusiveScrollWidth(),o+l)}else{let e=!1;for(let i of a.slides){const r=i.getBoundingClientRect(),a=r.left-n.left+o,s=a+r.width;if(Math.floor(a)<Math.floor(o)&&Math.floor(s)>Math.floor(o)){t=s-l,e=!0;break}}e||(t=Math.max(0,o-l)),t&&Math.floor(t)<Math.floor(o)&&(i=t)}}const s=i-p();Math.floor(s)>=0&&(i=s),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=a.options.rtl?"prev"===t:"next"===t,o=[];for(let t=0;t<a.slides.length;t++){const e=a.slides[t],n=e.offsetWidth,l=a.options.rtl?Math.abs(e.offsetLeft+n-a.details.containerWidth):e.offsetLeft,i=l+n,r=l+n/2,s=Math.min(r,l+a.options.emulateScrollSnapMaxThreshold);o.push({start:l,middle:r,end:i,width:n,trigger:s,slide:e,offSetleft:e.offsetLeft,rect:e.getBoundingClientRect()})}console.log("slideReference",o);let n=null;const l=m();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(m())<=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(m())>=Math.floor(e.trigger)){n=e.start;break}}if(null!==n){const t=n-p();Math.floor(t)>=0&&(n=t);const e=a.options.scrollBehavior||"smooth";a.container.scrollTo({left:a.options.rtl?-n:n,behavior:e})}},getInclusiveScrollWidth:function(){return a.container.scrollWidth+n(a.container)},getInclusiveClientWidth:function(){return a.container.clientWidth+n(a.container)},getScrollLeft:m,setScrollLeft:function(t){a.container.scrollLeft=a.options.rtl?-t:t},on:function(t,e){s[t]||(s[t]=[]),s[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(),c(!0),g(),a.on("contentsChanged",(()=>{f(),c(),g()})),a.on("containerSizeChanged",(()=>c()));let o=0;if(a.on("scroll",(()=>{o&&window.cancelAnimationFrame(o),o=window.requestAnimationFrame((()=>{c(),g()}))})),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,s=!1,c=!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")),s&&f()}));const f=()=>{const t=a.container.scrollLeft;Math.floor(l)===Math.floor(t)||c||(s||(a.emit("nativeScrollStart"),s=!0),a.emit("nativeScroll"),l=t,clearTimeout(e),e=setTimeout((()=>{s=!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",(()=>{c=!0})),a.container.addEventListener("scroll",(()=>{const t=a.container.scrollLeft;Math.floor(i)!==Math.floor(t)&&!s&&c&&(i=t,clearTimeout(o),o=setTimeout((()=>{c=!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;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%}
+.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}[dir=rtl] .overflow-slider-fade--start{left:auto}.overflow-slider-fade--end,[dir=rtl] .overflow-slider-fade--start{background:linear-gradient(to left,var(--overflow-slider-fade-color) 0,transparent 100%);right:0}[dir=rtl] .overflow-slider-fade--end{background:linear-gradient(to right,var(--overflow-slider-fade-color) 0,transparent 100%);left:0;right:auto}[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

@@ -30,36 +30,46 @@ function ArrowsPlugin(args) {
         prev.setAttribute('aria-label', options.texts.buttonPrevious);
         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.innerHTML = slider.options.rtl ? options.icons.next : options.icons.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');
         next.setAttribute('aria-label', options.texts.buttonNext);
         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.innerHTML = slider.options.rtl ? options.icons.prev : options.icons.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 scrollLeft = slider.getScrollLeft();
+            const scrollWidth = slider.getInclusiveScrollWidth();
+            const clientWidth = slider.getInclusiveClientWidth();
             const buffer = 1;
-            if (scrollLeft === 0) {
+            if (Math.floor(scrollLeft) === 0) {
                 prev.setAttribute('data-has-content', 'false');
             }
             else {
                 prev.setAttribute('data-has-content', 'true');
             }
-            if (scrollLeft + clientWidth >= scrollWidth - buffer) {
+            const maxWidthDifference = Math.abs(Math.floor(scrollLeft + clientWidth) - Math.floor(scrollWidth));
+            if (maxWidthDifference <= buffer) {
                 next.setAttribute('data-has-content', 'false');
             }
             else {
                 next.setAttribute('data-has-content', 'true');
             }
+            console.log('next', scrollLeft + clientWidth, scrollWidth);
         };
         if (options.containerNext && options.containerPrev) {
             options.containerPrev.appendChild(prev);
@@ -74,7 +84,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 s=>{var i,r,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!==(r=null==o?void 0:o.containerPrev)&&void 0!==r?r: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=s.container.getAttribute("id"))&&void 0!==l?l:""),b.setAttribute("data-type","prev"),b.innerHTML=s.options.rtl?d.icons.next:d.icons.prev,b.addEventListener("click",(()=>{"true"===b.getAttribute("data-has-content")&&s.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=s.container.getAttribute("id"))&&void 0!==c?c:""),p.setAttribute("data-type","next"),p.innerHTML=s.options.rtl?d.icons.prev:d.icons.next,p.addEventListener("click",(()=>{"true"===p.getAttribute("data-has-content")&&s.moveToDirection("next")})),v.appendChild(b),v.appendChild(p);const h=()=>{const t=s.getScrollLeft(),e=s.getInclusiveScrollWidth(),n=s.getInclusiveClientWidth();0===Math.floor(t)?b.setAttribute("data-has-content","false"):b.setAttribute("data-has-content","true");Math.abs(Math.floor(t+n)-Math.floor(e))<=1?p.setAttribute("data-has-content","false"):p.setAttribute("data-has-content","true"),console.log("next",t+n,e)};d.containerNext&&d.containerPrev?(d.containerPrev.appendChild(b),d.containerNext.appendChild(p)):d.container?d.container.appendChild(v):null===(u=s.container.parentNode)||void 0===u||u.insertBefore(v,s.container.nextSibling),h(),s.on("scrollEnd",h),s.on("contentsChanged",h),s.on("containerSizeChanged",h)}}export{o as default};

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

@@ -76,10 +76,6 @@ function DotsPlugin(args) {
             }
         };
         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();

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

@@ -49,7 +49,7 @@ function DragScrollingPlugin(args) {
             const walk = (x - startX);
             const newScrollLeft = scrollLeft - walk;
             mayNeedToSnap = true;
-            if (slider.container.scrollLeft !== newScrollLeft) {
+            if (Math.floor(slider.container.scrollLeft) !== Math.floor(newScrollLeft)) {
                 isMovingForward = slider.container.scrollLeft < newScrollLeft;
             }
             slider.container.scrollLeft = newScrollLeft;

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

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

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

@@ -32,23 +32,23 @@ function FadePlugin(args) {
             options.container.appendChild(fadeItemEnd);
         }
         const hasFadeAtStart = () => {
-            return slider.container.scrollLeft > fadeItemStart.offsetWidth;
+            return slider.getScrollLeft() > fadeItemStart.offsetWidth;
         };
         const fadeAtStartOpacity = () => {
-            const position = slider.container.scrollLeft;
-            if (position <= fadeItemStart.offsetWidth) {
+            const position = slider.getScrollLeft();
+            if (Math.floor(position) <= Math.floor(fadeItemStart.offsetWidth)) {
                 return position / Math.max(fadeItemStart.offsetWidth, 1);
             }
             return 1;
         };
         const hasFadeAtEnd = () => {
-            return slider.container.scrollLeft < (slider.container.scrollWidth - slider.container.clientWidth - fadeItemEnd.offsetWidth);
+            return Math.floor(slider.getScrollLeft()) < Math.floor(slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth);
         };
         const fadeAtEndOpacity = () => {
-            const position = slider.container.scrollLeft;
-            const maxPosition = slider.container.scrollWidth - slider.container.clientWidth;
+            const position = slider.getScrollLeft();
+            const maxPosition = slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth();
             const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
-            if (position >= maxFadePosition) {
+            if (Math.floor(position) >= Math.floor(maxFadePosition)) {
                 return ((maxFadePosition - position) / Math.max(fadeItemEnd.offsetWidth, 1)) + 1;
             }
             return 1;

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

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

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

@@ -16,16 +16,21 @@ function FullWidthPlugin(args) {
             const lastSlide = slides[slides.length - 1];
             const marginAmount = Math.floor((window.innerWidth - options.targetWidth(slider)) / 2);
             if (options.addMarginBefore) {
-                firstSlide.style.marginLeft = `${marginAmount}px`;
+                firstSlide.style.marginInlineStart = `${marginAmount}px`;
             }
             if (options.addMarginAfter) {
-                lastSlide.style.marginRight = `${marginAmount}px`;
+                lastSlide.style.marginInlineEnd = `${marginAmount}px`;
             }
             slider.container.setAttribute('data-full-width-offset', marginAmount.toString());
+            setCSS();
+        };
+        const setCSS = () => {
+            slider.container.style.setProperty('--slider-container-target-width', `${options.targetWidth(slider)}px`);
         };
         update();
         slider.on('contentsChanged', update);
         slider.on('containerSizeChanged', update);
+        window.addEventListener('resize', setCSS);
     };
 }
 

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

@@ -1 +1 @@
-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};
+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,d;const o={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===(d=null==n?void 0:n.addMarginAfter)||void 0===d||d},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-o.targetWidth(e))/2);o.addMarginBefore&&(n.style.marginInlineStart=`${r}px`),o.addMarginAfter&&(i.style.marginInlineEnd=`${r}px`),e.container.setAttribute("data-full-width-offset",r.toString()),l()},l=()=>{e.container.style.setProperty("--slider-container-target-width",`${o.targetWidth(e)}px`)};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a),window.addEventListener("resize",l)}}export{n as default};