@evermade/overflow-slider 3.1.0 → 3.2.0

package/README.md

@@ -9,8 +9,9 @@ Overflow Slider aims to be lightweight, mobile-first and accessible. It is desig
 ## Demos
 
 * [Example and demos](https://evermade.github.io/overflow-slider/)
+* [RTL demos](https://evermade.github.io/overflow-slider/index-rtl.html)
 
-### Usage
+## Getting started
 
 Markup:
 
@@ -65,7 +66,7 @@ const slider = new OverflowSlider(
 const slider = new OverflowSlider(
 	document.querySelector( '.slider-container-here' ),
 	{
-		// options here
+		emulateScrollSnap: true,
 	},
 	[
 		ArrowsPlugin({
@@ -101,6 +102,55 @@ You can use the CSS variables to override some values easily.
 
 Note that you can easily write styles from scratch if you want to. See source code from `src/overflow-slider.scss` for reference.
 
+## Slides per view
+
+You control slides per view in CSS. Set gap between slides via `gap` to slider. Slide layout/size is controlled by `width` property. You can use others but `width` is the most stable.
+
+### A) Fixed width
+
+Set fixed width for slides: `width: 200px;`. Note you can freely change this with media queries.
+
+### B) Relative width
+
+Set relative width for slides: `width: 100vw;`. Note that you cannot use percentages because they are relative to the container and not the viewport.
+
+### C) Variable based width
+
+This is most practical approach if you want to make sure exactly 3 slides are visible at all times or so. Or you want to display like 1.5 slides in mobile per view.
+
+This is based on getting the container width and dividing it by the number of slides you want to show and subtracting the gap. It's recommended to add SCSS mixin for this in case you are using SCSS.
+
+Mixin:
+
+```scss
+@mixin slideWidth($slidesPerView: 3, $gap: var(--slide-gap, 1rem), $containerWidth: var(--slider-container-width, 90vw)) {
+	width: calc( ( #{$containerWidth} / #{$slidesPerView} ) - calc( #{$slidesPerView} - 1 ) / #{$slidesPerView} * #{$gap});
+}
+```
+
+Usage:
+
+```scss
+.overflow-slider {
+	--gap: 1.5rem;
+	gap: var(--gap);
+	> * {
+		--slidesPerView: 3;
+		@include slideWidth(
+			var(--slidesPerView),
+			var(--gap),
+			var(--slider-container-width)
+		);
+	}
+}
+```
+
+Note that if you are using FullWidthPlugin, you should use container width from `--slider-container-target-width` instead of `--slider-container-width`.
+
+## Plugins
+
+TBA
+
 ## Known issues
 
 ### CSS grids and Overflow Slider
@@ -117,10 +167,6 @@ If you are using `scroll-snap-type` CSS property, you might encounter some bugs
 
 The library is designed to work with horizontal scrolling. Vertical scrolling is not supported and likely never will because it is not a common use case for sliders.
 
-### RTL support
-
-RTL support is not implemented yet. In case need arises it can be implemented but requires changes to the core and plugins.
-
 ### Looping slides
 
 Looping slides is not supported and likely never will be. It is a feature that is not very common and it is not very accessible.
@@ -137,6 +183,13 @@ Auto-play is not supported at the moment but can probably be implemented as a pl
 
 ## Changelog
 
+### 3.2.0
+
+* Add: RTL support
+* Add: `--slider-container-target-width` for FullWidthPlugin to allow CSS based on target size
+* Add: Documentation how to set slides per view in CSS
+* Fix: Attach ThumbnailsPlugin to scrollEnd which skips in-between slides when multiple slides are scrolled at once
+
 ### 3.1.0
 
 * Add: slider.getInclusiveScrollWidth and slider.getInclusiveScrollHeight methods to get widths including outermost childs outermost margins

package/dist/core/details.esm.js

@@ -14,10 +14,10 @@ function details(slider) {
     containerWidth = slider.container.offsetWidth;
     scrollableAreaWidth = slider.getInclusiveScrollWidth();
     amountOfPages = Math.ceil(scrollableAreaWidth / containerWidth);
-    if (Math.floor(slider.container.scrollLeft) >= 0) {
-        currentPage = Math.floor(slider.container.scrollLeft / containerWidth);
+    if (Math.floor(slider.getScrollLeft()) >= 0) {
+        currentPage = Math.floor(slider.getScrollLeft() / containerWidth);
         // consider as last page if the scrollLeft + containerWidth is equal to scrollWidth
-        if (Math.floor(slider.container.scrollLeft + containerWidth) === Math.floor(scrollableAreaWidth)) {
+        if (Math.floor(slider.getScrollLeft() + containerWidth) === Math.floor(scrollableAreaWidth)) {
             currentPage = amountOfPages - 1;
         }
     }

package/dist/core/details.min.js

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

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

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

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

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

package/dist/core/slider.esm.js

@@ -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;
@@ -215,19 +218,48 @@ 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;
         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 (Math.floor(slideStart) >= Math.floor(scrollLeft)) {
-                activeSlideIdx = i;
-                break;
+        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;
             }
-            if (i === slides.length - 1) {
-                scrolledPastLastSlide = true;
+        }
+        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) {
@@ -235,6 +267,7 @@ function Slider(container, options, plugins) {
         }
         const oldActiveSlideIdx = slider.activeSlideIdx;
         slider.activeSlideIdx = activeSlideIdx;
+        // console.log('activeSlideIdx', activeSlideIdx);
         if (oldActiveSlideIdx !== activeSlideIdx) {
             slider.emit('activeSlideChanged');
         }
@@ -251,12 +284,18 @@ function Slider(container, options, plugins) {
     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 = Math.floor(secondSlideRect.left - firstSlideRect.right);
+            gapSize = slider.options.rtl ? Math.abs(Math.floor(secondSlideRect.right - firstSlideRect.left)) : Math.floor(secondSlideRect.left - firstSlideRect.right);
         }
         return gapSize;
     }
@@ -274,22 +313,23 @@ 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') {
+        else if (realDirection === 'next') {
             targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + slider.container.offsetWidth);
         }
         if (scrollStrategy === 'fullSlide') {
             let fullSlideTargetScrollPosition = null;
             // extend targetScrollPosition to include gap
-            if (direction === 'prev') {
+            if (realDirection === 'prev') {
                 fullSlideTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
             }
             else {
                 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();
@@ -347,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);
@@ -363,10 +403,14 @@ 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];
@@ -374,7 +418,7 @@ function Slider(container, options, plugins) {
                     snapTarget = 0;
                     break;
                 }
-                if (Math.floor(slider.container.scrollLeft) <= Math.floor(item.trigger)) {
+                if (Math.floor(getScrollLeft()) <= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
@@ -387,7 +431,7 @@ function Slider(container, options, plugins) {
                     snapTarget = item.start;
                     break;
                 }
-                if (Math.floor(slider.container.scrollLeft) >= Math.floor(item.trigger)) {
+                if (Math.floor(getScrollLeft()) >= Math.floor(item.trigger)) {
                     snapTarget = item.start;
                     break;
                 }
@@ -400,7 +444,7 @@ function Slider(container, options, plugins) {
             }
             const scrollBehavior = slider.options.scrollBehavior || 'smooth';
             slider.container.scrollTo({
-                left: snapTarget,
+                left: slider.options.rtl ? -snapTarget : snapTarget,
                 behavior: scrollBehavior
             });
         }
@@ -430,6 +474,8 @@ function Slider(container, options, plugins) {
         snapToClosestSlide,
         getInclusiveScrollWidth,
         getInclusiveClientWidth,
+        getScrollLeft,
+        setScrollLeft,
         on,
         options,
     };

package/dist/core/slider.min.js

@@ -1 +1 @@
-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};
+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/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/dist/plugins/arrows/arrows/index.esm.js

@@ -30,7 +30,7 @@ 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.innerHTML = slider.options.rtl ? options.icons.next : options.icons.prev;
         prev.addEventListener('click', () => {
             if (prev.getAttribute('data-has-content') === 'true') {
                 slider.moveToDirection('prev');
@@ -42,7 +42,7 @@ function ArrowsPlugin(args) {
         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.innerHTML = slider.options.rtl ? options.icons.prev : options.icons.next;
         next.addEventListener('click', () => {
             if (next.getAttribute('data-has-content') === 'true') {
                 slider.moveToDirection('next');
@@ -52,21 +52,24 @@ function ArrowsPlugin(args) {
         nav.appendChild(prev);
         nav.appendChild(next);
         const update = () => {
-            const scrollLeft = slider.container.scrollLeft;
+            const scrollLeft = slider.getScrollLeft();
             const scrollWidth = slider.getInclusiveScrollWidth();
             const clientWidth = slider.getInclusiveClientWidth();
+            const buffer = 1;
             if (Math.floor(scrollLeft) === 0) {
                 prev.setAttribute('data-has-content', 'false');
             }
             else {
                 prev.setAttribute('data-has-content', 'true');
             }
-            if (Math.floor(scrollLeft + clientWidth) >= Math.floor(scrollWidth)) {
+            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);

package/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 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};
+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/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/dist/plugins/fade/fade/index.esm.js

@@ -32,20 +32,20 @@ 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;
+            const position = slider.getScrollLeft();
             if (Math.floor(position) <= Math.floor(fadeItemStart.offsetWidth)) {
                 return position / Math.max(fadeItemStart.offsetWidth, 1);
             }
             return 1;
         };
         const hasFadeAtEnd = () => {
-            return Math.floor(slider.container.scrollLeft) < Math.floor(slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth);
+            return Math.floor(slider.getScrollLeft()) < Math.floor(slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth);
         };
         const fadeAtEndOpacity = () => {
-            const position = slider.container.scrollLeft;
+            const position = slider.getScrollLeft();
             const maxPosition = slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth();
             const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
             if (Math.floor(position) >= Math.floor(maxFadePosition)) {

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

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

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

@@ -32,9 +32,12 @@ function ScrollIndicatorPlugin(args) {
         setDataAttributes();
         const getScrollbarButtonLeftOffset = () => {
             const contentRatio = scrollbarButton.offsetWidth / slider.details.containerWidth;
-            return slider.container.scrollLeft * contentRatio;
+            const scrollAmount = slider.getScrollLeft() * contentRatio;
+            if (slider.options.rtl) {
+                return scrollbar.offsetWidth - scrollbarButton.offsetWidth - scrollAmount;
+            }
+            return scrollAmount;
         };
-        // scrollbarbutton width and position is calculated based on the scroll position and available width
         let requestId = 0;
         const update = () => {
             if (requestId) {
@@ -45,28 +48,24 @@ function ScrollIndicatorPlugin(args) {
                 const scrollLeftInPortion = getScrollbarButtonLeftOffset();
                 scrollbarButton.style.width = `${scrollbarButtonWidth}%`;
                 scrollbarButton.style.transform = `translateX(${scrollLeftInPortion}px)`;
-                // aria-valuenow
-                const scrollLeft = slider.container.scrollLeft;
+                const scrollLeft = slider.getScrollLeft();
                 const scrollWidth = slider.getInclusiveScrollWidth();
                 const containerWidth = slider.container.offsetWidth;
                 const scrollPercentage = (scrollLeft / (scrollWidth - containerWidth)) * 100;
                 scrollbarContainer.setAttribute('aria-valuenow', Math.round(Number.isNaN(scrollPercentage) ? 0 : scrollPercentage).toString());
             });
         };
-        // insert to DOM
         if (options.container) {
             options.container.appendChild(scrollbarContainer);
         }
         else {
             (_c = slider.container.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(scrollbarContainer, slider.container.nextSibling);
         }
-        // update the scrollbar when the slider is scrolled
         update();
         slider.on('scroll', update);
         slider.on('contentsChanged', update);
         slider.on('containerSizeChanged', update);
         slider.on('detailsChanged', setDataAttributes);
-        // handle arrow keys while focused
         scrollbarContainer.addEventListener('keydown', (e) => {
             if (e.key === 'ArrowLeft') {
                 slider.moveToDirection('prev');
@@ -75,29 +74,29 @@ function ScrollIndicatorPlugin(args) {
                 slider.moveToDirection('next');
             }
         });
-        // handle click to before or after the scrollbar button
+        let isInteractionDown = false;
+        let startX = 0;
+        let scrollLeft = slider.getScrollLeft();
         scrollbarContainer.addEventListener('click', (e) => {
+            if (e.target == scrollbarButton) {
+                return;
+            }
             const scrollbarButtonWidth = scrollbarButton.offsetWidth;
             const scrollbarButtonLeft = getScrollbarButtonLeftOffset();
             const scrollbarButtonRight = scrollbarButtonLeft + scrollbarButtonWidth;
-            const clickX = e.pageX - scrollbarContainer.offsetLeft;
+            const clickX = e.pageX - Math.abs(scrollbarContainer.offsetLeft);
             if (Math.floor(clickX) < Math.floor(scrollbarButtonLeft)) {
-                slider.moveToDirection('prev');
+                slider.moveToDirection(slider.options.rtl ? 'next' : 'prev');
             }
             else if (Math.floor(clickX) > Math.floor(scrollbarButtonRight)) {
-                slider.moveToDirection('next');
+                slider.moveToDirection(slider.options.rtl ? 'prev' : 'next');
             }
         });
-        // make scrollbar button draggable via mouse/touch and update the scroll position
-        let isInteractionDown = false;
-        let startX = 0;
-        let scrollLeft = 0;
         const onInteractionDown = (e) => {
             isInteractionDown = true;
             const pageX = e.pageX || e.touches[0].pageX;
             startX = pageX - scrollbarContainer.offsetLeft;
-            scrollLeft = slider.container.scrollLeft;
-            // change cursor to grabbing
+            scrollLeft = slider.getScrollLeft();
             scrollbarButton.style.cursor = 'grabbing';
             scrollbarButton.setAttribute('data-is-grabbed', 'true');
             e.preventDefault();
@@ -112,7 +111,8 @@ function ScrollIndicatorPlugin(args) {
             const x = pageX - scrollbarContainer.offsetLeft;
             const scrollingFactor = slider.details.scrollableAreaWidth / scrollbarContainer.offsetWidth;
             const walk = (x - startX) * scrollingFactor;
-            slider.container.scrollLeft = scrollLeft + walk;
+            const distance = slider.options.rtl ? scrollLeft - walk : scrollLeft + walk;
+            slider.setScrollLeft(distance);
         };
         const onInteractionUp = () => {
             isInteractionDown = false;