@evermade/overflow-slider 1.0.0 → 1.1.0

package/README.md

@@ -12,6 +12,18 @@ Overflow Slider aims to be lightweight, mobile-first and accessible. It is desig
 
 ### Usage
 
+Markup:
+
+```html
+<div class="overflow-slider">
+	<div>Slide 1</div>
+	<div>Slide 2</div>
+	<div>Slide 3</div>
+</div>
+```
+
+You don't have to use even class `overflow-slider` and slides can be whatever elements like `<a>`, `<li>`, or `article`.
+
 If you’re using a bundler (such as Webpack or Rollup), you can install through npm:
 
 ```bash
@@ -91,6 +103,40 @@ 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.
 
+## Known issues
+
+### Drag Scrolling and Firefox
+
+Drag scrolling does not work very well in Firefox when slides are clikable. We are working on a fix for this if that is possible.
+
+## Limitations
+
+### Vertical scrolling
+
+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.
+
+### Auto-play
+
+Auto-play is not supported at the moment but can probably be implemented as a plugin. It is not very accessible and should be avoided if possible.
+
+## Changelog
+
+### 1.1.0
+
+* Add: Grab cursor when hovering slider that has DragScrollingPlugin
+* Add: Example of using entrance and exit animations for slides
+* Fix: ScrollIndicatorPlugin dragging works now with touch
+* Fix: Hide native scrollbar also in Firefox + Edge
+* Docs: Add more info on required markup and limitations
+
 ## Development
 
 Install tools `npm install` and build `npm run build` or develop with `npm run watch`.

package/dist/index.esm.js

@@ -234,7 +234,7 @@ function Slider(container, options, plugins) {
                 }
             }
         }
-        slider.container.style.scrollBehavior = 'smooth';
+        slider.container.style.scrollBehavior = slider.options.scrollBehavior;
         slider.container.scrollLeft = targetScrollPosition;
         setTimeout(() => slider.container.style.scrollBehavior = '', 50);
     }
@@ -491,12 +491,13 @@ function ScrollIndicatorPlugin(args) {
             }
         });
         // make scrollbar button draggable via mouse/touch and update the scroll position
-        let isMouseDown = false;
+        let isInteractionDown = false;
         let startX = 0;
         let scrollLeft = 0;
-        scrollbarButton.addEventListener('mousedown', (e) => {
-            isMouseDown = true;
-            startX = e.pageX - scrollbarContainer.offsetLeft;
+        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
             scrollbarButton.style.cursor = 'grabbing';
@@ -504,23 +505,30 @@ function ScrollIndicatorPlugin(args) {
             scrollbarButton.setAttribute('data-is-grabbed', 'true');
             e.preventDefault();
             e.stopPropagation();
-        });
-        window.addEventListener('mouseup', () => {
-            isMouseDown = false;
-            scrollbarButton.style.cursor = '';
-            slider.container.style.scrollSnapType = '';
-            scrollbarButton.setAttribute('data-is-grabbed', 'false');
-        });
-        window.addEventListener('mousemove', (e) => {
-            if (!isMouseDown) {
+        };
+        const onInteractionMove = (e) => {
+            if (!isInteractionDown) {
                 return;
             }
             e.preventDefault();
-            const x = e.pageX - scrollbarContainer.offsetLeft;
+            const pageX = e.pageX || e.touches[0].pageX;
+            const x = pageX - scrollbarContainer.offsetLeft;
             const scrollingFactor = slider.container.scrollWidth / scrollbarContainer.offsetWidth;
             const walk = (x - startX) * scrollingFactor;
             slider.container.scrollLeft = scrollLeft + walk;
-        });
+        };
+        const onInteractionUp = () => {
+            isInteractionDown = false;
+            scrollbarButton.style.cursor = '';
+            slider.container.style.scrollSnapType = '';
+            scrollbarButton.setAttribute('data-is-grabbed', 'false');
+        };
+        scrollbarButton.addEventListener('mousedown', onInteractionDown);
+        scrollbarButton.addEventListener('touchstart', onInteractionDown);
+        window.addEventListener('mousemove', onInteractionMove);
+        window.addEventListener('touchmove', onInteractionMove, { passive: false });
+        window.addEventListener('mouseup', onInteractionUp);
+        window.addEventListener('touchend', onInteractionUp);
     };
 }
 
@@ -534,11 +542,10 @@ function DragScrollingPlugin(args) {
         let isMouseDown = false;
         let startX = 0;
         let scrollLeft = 0;
-        const hasOverflow = () => {
-            return slider.details.hasOverflow;
-        };
+        // add data attribute to container
+        slider.container.setAttribute('data-has-drag-scrolling', 'true');
         slider.container.addEventListener('mousedown', (e) => {
-            if (!hasOverflow()) {
+            if (!slider.details.hasOverflow) {
                 return;
             }
             isMouseDown = true;
@@ -547,6 +554,7 @@ function DragScrollingPlugin(args) {
             // change cursor to grabbing
             slider.container.style.cursor = 'grabbing';
             slider.container.style.scrollSnapType = 'none';
+            slider.container.style.scrollBehavior = 'auto';
             // prevent pointer events on the slides
             // const slides = slider.container.querySelectorAll( ':scope > *' );
             // slides.forEach((slide) => {
@@ -557,13 +565,15 @@ function DragScrollingPlugin(args) {
             // e.stopPropagation();
         });
         window.addEventListener('mouseup', () => {
-            if (!hasOverflow()) {
+            if (!slider.details.hasOverflow) {
                 return;
             }
             isMouseDown = false;
             slider.container.style.cursor = '';
-            slider.container.style.scrollSnapType = '';
+            // slider.container.style.scrollBehavior = slider.options.scrollBehavior;
             setTimeout(() => {
+                slider.container.style.scrollSnapType = '';
+                slider.container.style.scrollBehavior = '';
                 const slides = slider.container.querySelectorAll(':scope > *');
                 slides.forEach((slide) => {
                     slide.style.pointerEvents = '';
@@ -571,7 +581,7 @@ function DragScrollingPlugin(args) {
             }, 50);
         });
         window.addEventListener('mousemove', (e) => {
-            if (!hasOverflow()) {
+            if (!slider.details.hasOverflow) {
                 return;
             }
             if (!isMouseDown) {

package/dist/index.esm.min.js

@@ -1,2 +1,2 @@
-/*!  @evermade/overflow-slider 1.0.0 */
-function t(e,n=1){const o=`${e}-${n}`;return document.getElementById(o)?t(e,n+1):o}function e(e,n,o){let r,i={};function s(t=!1){const e=r.details,n=function(t){let e,n=!1,o=0,r=0,i=0,s=0,a=1;return t.container.scrollWidth>t.container.clientWidth&&(n=!0),o=Array.from(t.container.querySelectorAll(":scope > *")).length,r=t.container.offsetWidth,i=t.container.scrollWidth,s=Math.ceil(i/r),t.container.scrollLeft>=0&&(a=Math.floor(t.container.scrollLeft/r),t.container.scrollLeft+r===i&&(a=s-1)),e={hasOverflow:n,slideCount:o,containerWidth:r,scrollableAreaWidth:i,amountOfPages:s,currentPage:a},e}(r);r.details=n,t||function(t,e){const n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let o of n)if(!1===e.hasOwnProperty(o)||t[o]!==e[o])return!1;return!0}(e,n)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function a(){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 l(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}return r={emit:function(t){var e;i&&i[t]&&i[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 s=n;if("prev"===t?s=Math.max(0,n-r.container.offsetWidth):"next"===t&&(s=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===e){let e=null;const a=Array.from(r.container.querySelectorAll(":scope > *"));let l=0;if(a.length>1){const t=a[0].getBoundingClientRect();l=a[1].getBoundingClientRect().left-t.right}if(e="prev"===t?Math.max(0,s-l):Math.min(r.container.scrollWidth,s+l),"next"===t){let t=!1;for(let r of a){const i=r.getBoundingClientRect(),a=i.left-o.left+n,l=a+i.width;if(a<s&&l>s){e=a,t=!0;break}}t||(e=Math.min(s,r.container.scrollWidth-r.container.offsetWidth)),e&&e>n&&(s=e)}else{let t=!1;for(let r of a){const s=r.getBoundingClientRect(),a=s.left-o.left+n,l=a+s.width;if(a<n&&l>n){e=l-i,t=!0;break}}t||(e=Math.max(0,n-i)),e&&e<n&&(s=e)}}r.container.style.scrollBehavior="smooth",r.container.scrollLeft=s,setTimeout((()=>r.container.style.scrollBehavior=""),50)},on:function(t,e){i[t]||(i[t]=[]),i[t].push(e)},options:n},function(){r.container=e;let n=e.getAttribute("id");null===n&&(n=t("overflow-slider"),e.setAttribute("id",n)),s(!0),r.on("contentsChanged",(()=>s())),r.on("containerSizeChanged",(()=>s()));let i=0;if(r.on("scroll",(()=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame((()=>{s()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let t=!1;r.container.addEventListener("mousedown",(()=>{t=!0})),r.container.addEventListener("touchstart",(()=>{t=!0}),{passive:!0}),r.container.addEventListener("focusin",(e=>{if(!t){let t=e.target;for(;t.parentElement!==r.container&&t.parentElement;)t=t.parentElement;!function(t){const e=t.getBoundingClientRect(),n=r.container.getBoundingClientRect(),o=r.container.offsetWidth,i=r.container.scrollLeft,s=e.left-n.left+i,a=s+e.width;let l=null;s<i?l=s:a>i+o&&(l=a-o);l&&(r.container.style.scrollSnapType="none",r.container.scrollLeft=l)}(t)}t=!1}))}(),l(),a(),o)for(const t of o)t(r);r.on("detailsChanged",(()=>{l(),a()})),r.emit("created")}(),r}function n(t,n,o){try{if(!(t instanceof Element))throw new Error("Container must be HTML element, found "+typeof t);const r={scrollBehavior:"smooth",scrollStrategy:"fullSlide"},i=Object.assign(Object.assign({},r),n);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(i.scrollBehavior="auto"),e(t,i,o)}catch(t){console.error(t)}}const o={skipList:"Skip list"},r={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};function i(e){return n=>{var i,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},o),(null==e?void 0:e.texts)||[]),classNames:Object.assign(Object.assign({},r),(null==e?void 0:e.classNames)||[]),containerBefore:null!==(i=null==e?void 0:e.containerAfter)&&void 0!==i?i:null,containerAfter:null!==(s=null==e?void 0:e.containerAfter)&&void 0!==s?s:null},f=t("overflow-slider-skip"),v=document.createElement("a");v.setAttribute("href",`#${f}`),v.textContent=u.texts.skipList,v.classList.add(u.classNames.skipLink);const p=document.createElement("div");p.setAttribute("id",f),p.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(v,u.containerBefore):null===(l=n.container.parentNode)||void 0===l||l.insertBefore(v,n.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(p,u.containerAfter.nextSibling):null===(d=n.container.parentNode)||void 0===d||d.insertBefore(p,n.container.nextSibling)}}const s={buttonPrevious:"Previous items",buttonNext:"Next items"},a={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>'},l={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 c(t){return e=>{var n,o,r,i;const c={texts:Object.assign(Object.assign({},s),(null==t?void 0:t.texts)||[]),icons:Object.assign(Object.assign({},a),(null==t?void 0:t.icons)||[]),classNames:Object.assign(Object.assign({},l),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},d=document.createElement("div");d.classList.add(c.classNames.navContainer);const u=document.createElement("button");u.setAttribute("class",c.classNames.prevButton),u.setAttribute("type","button"),u.setAttribute("aria-label",c.texts.buttonPrevious),u.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),u.setAttribute("data-type","prev"),u.innerHTML=c.icons.prev,u.addEventListener("click",(()=>e.moveToDirection("prev")));const f=document.createElement("button");f.setAttribute("class",c.classNames.nextButton),f.setAttribute("type","button"),f.setAttribute("aria-label",c.texts.buttonNext),f.setAttribute("aria-controls",null!==(r=e.container.getAttribute("id"))&&void 0!==r?r:""),f.setAttribute("data-type","next"),f.innerHTML=c.icons.next,f.addEventListener("click",(()=>e.moveToDirection("next"))),d.appendChild(u),d.appendChild(f);const v=()=>{const t=e.container.scrollLeft,n=e.container.scrollWidth,o=e.container.clientWidth;0===t?u.setAttribute("data-has-content","false"):u.setAttribute("data-has-content","true"),t+o>=n?f.setAttribute("data-has-content","false"):f.setAttribute("data-has-content","true")};c.container?c.container.appendChild(d):null===(i=e.container.parentNode)||void 0===i||i.insertBefore(d,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v)}}const d={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function u(t){return e=>{var n,o,r;const i={classNames:Object.assign(Object.assign({},d),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const a=document.createElement("div");a.setAttribute("class",i.classNames.scrollIndicatorBar);const l=document.createElement("div");l.setAttribute("class",i.classNames.scrollIndicatorButton),l.setAttribute("data-is-grabbed","false"),a.appendChild(l),s.appendChild(a);const c=()=>{s.setAttribute("data-has-overflow",e.details.hasOverflow.toString())};c();const u=()=>{const t=e.container.offsetWidth/e.container.scrollWidth;return e.container.scrollLeft*t};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame((()=>{const t=e.container.offsetWidth/e.container.scrollWidth*100,n=u();l.style.width=`${t}%`,l.style.transform=`translateX(${n}px)`;const o=e.container.scrollLeft/(e.container.scrollWidth-e.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(r=e.container.parentNode)||void 0===r||r.insertBefore(s,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v),e.on("detailsChanged",c),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?e.moveToDirection("prev"):"ArrowRight"===t.key&&e.moveToDirection("next")})),s.addEventListener("click",(t=>{const n=l.offsetWidth,o=u(),r=o+n,i=t.pageX-s.offsetLeft;i<o?e.moveToDirection("prev"):i>r&&e.moveToDirection("next")}));let p=!1,h=0,b=0;l.addEventListener("mousedown",(t=>{p=!0,h=t.pageX-s.offsetLeft,b=e.container.scrollLeft,l.style.cursor="grabbing",e.container.style.scrollSnapType="none",l.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()})),window.addEventListener("mouseup",(()=>{p=!1,l.style.cursor="",e.container.style.scrollSnapType="",l.setAttribute("data-is-grabbed","false")})),window.addEventListener("mousemove",(t=>{if(!p)return;t.preventDefault();const n=t.pageX-s.offsetLeft,o=e.container.scrollWidth/s.offsetWidth,r=(n-h)*o;e.container.scrollLeft=b+r}))}}function f(t){var e;const n=null!==(e=null==t?void 0:t.draggedDistanceThatPreventsClick)&&void 0!==e?e:20;return t=>{let e=!1,o=0,r=0;const i=()=>t.details.hasOverflow;t.container.addEventListener("mousedown",(n=>{i()&&(e=!0,o=n.pageX-t.container.offsetLeft,r=t.container.scrollLeft,t.container.style.cursor="grabbing",t.container.style.scrollSnapType="none")})),window.addEventListener("mouseup",(()=>{i()&&(e=!1,t.container.style.cursor="",t.container.style.scrollSnapType="",setTimeout((()=>{t.container.querySelectorAll(":scope > *").forEach((t=>{t.style.pointerEvents=""}))}),50))})),window.addEventListener("mousemove",(s=>{if(!i())return;if(!e)return;s.preventDefault();const a=s.pageX-t.container.offsetLeft-o;t.container.scrollLeft=r-a;const l=Math.abs(a),c=t.container.querySelectorAll(":scope > *"),d=l>n?"none":"";c.forEach((t=>{t.style.pointerEvents=d}))}))}}const v={dotDescription:"Page %d of %d"},p={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function h(t){return e=>{var n,o;const r={texts:Object.assign(Object.assign({},v),(null==t?void 0:t.texts)||[]),classNames:Object.assign(Object.assign({},p),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},i=document.createElement("div");i.classList.add(r.classNames.dotsContainer);let s=null;const a=()=>{i.setAttribute("data-has-content",e.details.hasOverflow.toString()),i.innerHTML="";const t=document.createElement("ul"),n=e.details.amountOfPages,o=e.details.currentPage;if(!(n<=1)){for(let e=0;e<n;e++){const a=document.createElement("li"),c=document.createElement("button");c.setAttribute("type","button"),c.setAttribute("class",r.classNames.dotsItem),c.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(e+1).toString()).replace("%d",n.toString())),c.setAttribute("aria-pressed",(e===o).toString()),c.setAttribute("data-page",(e+1).toString()),a.appendChild(c),t.appendChild(a),c.addEventListener("click",(()=>l(e+1))),c.addEventListener("focus",(()=>s=e+1)),c.addEventListener("keydown",(t=>{var e;const o=i.querySelector('[aria-pressed="true"]');if(!o)return;const r=parseInt(null!==(e=o.getAttribute("data-page"))&&void 0!==e?e:"1");if("ArrowLeft"===t.key){const t=r-1;if(t>0){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}if("ArrowRight"===t.key){const t=r+1;if(t<=n){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}}))}if(i.appendChild(t),s){const t=i.querySelector(`[data-page="${s}"]`);t&&t.focus()}}},l=t=>{const n=e.details.containerWidth*(t-1);e.container.style.scrollBehavior=e.options.scrollBehavior,e.container.style.scrollSnapType="none",e.container.scrollLeft=n,e.container.style.scrollBehavior="",e.container.style.scrollSnapType=""};a(),r.container?r.container.appendChild(i):null===(o=e.container.parentNode)||void 0===o||o.insertBefore(i,e.container.nextSibling),e.on("detailsChanged",(()=>{a()}))}}export{c as ArrowsPlugin,h as DotsPlugin,f as DragScrollingPlugin,n as OverflowSlider,u as ScrollIndicatorPlugin,i as SkipLinksPlugin};
+/*!  @evermade/overflow-slider 1.1.0 */
+function t(e,n=1){const o=`${e}-${n}`;return document.getElementById(o)?t(e,n+1):o}function e(e,n,o){let r,i={};function s(t=!1){const e=r.details,n=function(t){let e,n=!1,o=0,r=0,i=0,s=0,a=1;return t.container.scrollWidth>t.container.clientWidth&&(n=!0),o=Array.from(t.container.querySelectorAll(":scope > *")).length,r=t.container.offsetWidth,i=t.container.scrollWidth,s=Math.ceil(i/r),t.container.scrollLeft>=0&&(a=Math.floor(t.container.scrollLeft/r),t.container.scrollLeft+r===i&&(a=s-1)),e={hasOverflow:n,slideCount:o,containerWidth:r,scrollableAreaWidth:i,amountOfPages:s,currentPage:a},e}(r);r.details=n,t||function(t,e){const n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let o of n)if(!1===e.hasOwnProperty(o)||t[o]!==e[o])return!1;return!0}(e,n)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function a(){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 l(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}return r={emit:function(t){var e;i&&i[t]&&i[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 s=n;if("prev"===t?s=Math.max(0,n-r.container.offsetWidth):"next"===t&&(s=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===e){let e=null;const a=Array.from(r.container.querySelectorAll(":scope > *"));let l=0;if(a.length>1){const t=a[0].getBoundingClientRect();l=a[1].getBoundingClientRect().left-t.right}if(e="prev"===t?Math.max(0,s-l):Math.min(r.container.scrollWidth,s+l),"next"===t){let t=!1;for(let r of a){const i=r.getBoundingClientRect(),a=i.left-o.left+n,l=a+i.width;if(a<s&&l>s){e=a,t=!0;break}}t||(e=Math.min(s,r.container.scrollWidth-r.container.offsetWidth)),e&&e>n&&(s=e)}else{let t=!1;for(let r of a){const s=r.getBoundingClientRect(),a=s.left-o.left+n,l=a+s.width;if(a<n&&l>n){e=l-i,t=!0;break}}t||(e=Math.max(0,n-i)),e&&e<n&&(s=e)}}r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=s,setTimeout((()=>r.container.style.scrollBehavior=""),50)},on:function(t,e){i[t]||(i[t]=[]),i[t].push(e)},options:n},function(){r.container=e;let n=e.getAttribute("id");null===n&&(n=t("overflow-slider"),e.setAttribute("id",n)),s(!0),r.on("contentsChanged",(()=>s())),r.on("containerSizeChanged",(()=>s()));let i=0;if(r.on("scroll",(()=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame((()=>{s()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let t=!1;r.container.addEventListener("mousedown",(()=>{t=!0})),r.container.addEventListener("touchstart",(()=>{t=!0}),{passive:!0}),r.container.addEventListener("focusin",(e=>{if(!t){let t=e.target;for(;t.parentElement!==r.container&&t.parentElement;)t=t.parentElement;!function(t){const e=t.getBoundingClientRect(),n=r.container.getBoundingClientRect(),o=r.container.offsetWidth,i=r.container.scrollLeft,s=e.left-n.left+i,a=s+e.width;let l=null;s<i?l=s:a>i+o&&(l=a-o);l&&(r.container.style.scrollSnapType="none",r.container.scrollLeft=l)}(t)}t=!1}))}(),l(),a(),o)for(const t of o)t(r);r.on("detailsChanged",(()=>{l(),a()})),r.emit("created")}(),r}function n(t,n,o){try{if(!(t instanceof Element))throw new Error("Container must be HTML element, found "+typeof t);const r={scrollBehavior:"smooth",scrollStrategy:"fullSlide"},i=Object.assign(Object.assign({},r),n);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(i.scrollBehavior="auto"),e(t,i,o)}catch(t){console.error(t)}}const o={skipList:"Skip list"},r={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};function i(e){return n=>{var i,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},o),(null==e?void 0:e.texts)||[]),classNames:Object.assign(Object.assign({},r),(null==e?void 0:e.classNames)||[]),containerBefore:null!==(i=null==e?void 0:e.containerAfter)&&void 0!==i?i:null,containerAfter:null!==(s=null==e?void 0:e.containerAfter)&&void 0!==s?s:null},f=t("overflow-slider-skip"),v=document.createElement("a");v.setAttribute("href",`#${f}`),v.textContent=u.texts.skipList,v.classList.add(u.classNames.skipLink);const h=document.createElement("div");h.setAttribute("id",f),h.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(v,u.containerBefore):null===(l=n.container.parentNode)||void 0===l||l.insertBefore(v,n.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(h,u.containerAfter.nextSibling):null===(d=n.container.parentNode)||void 0===d||d.insertBefore(h,n.container.nextSibling)}}const s={buttonPrevious:"Previous items",buttonNext:"Next items"},a={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>'},l={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 c(t){return e=>{var n,o,r,i;const c={texts:Object.assign(Object.assign({},s),(null==t?void 0:t.texts)||[]),icons:Object.assign(Object.assign({},a),(null==t?void 0:t.icons)||[]),classNames:Object.assign(Object.assign({},l),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},d=document.createElement("div");d.classList.add(c.classNames.navContainer);const u=document.createElement("button");u.setAttribute("class",c.classNames.prevButton),u.setAttribute("type","button"),u.setAttribute("aria-label",c.texts.buttonPrevious),u.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),u.setAttribute("data-type","prev"),u.innerHTML=c.icons.prev,u.addEventListener("click",(()=>e.moveToDirection("prev")));const f=document.createElement("button");f.setAttribute("class",c.classNames.nextButton),f.setAttribute("type","button"),f.setAttribute("aria-label",c.texts.buttonNext),f.setAttribute("aria-controls",null!==(r=e.container.getAttribute("id"))&&void 0!==r?r:""),f.setAttribute("data-type","next"),f.innerHTML=c.icons.next,f.addEventListener("click",(()=>e.moveToDirection("next"))),d.appendChild(u),d.appendChild(f);const v=()=>{const t=e.container.scrollLeft,n=e.container.scrollWidth,o=e.container.clientWidth;0===t?u.setAttribute("data-has-content","false"):u.setAttribute("data-has-content","true"),t+o>=n?f.setAttribute("data-has-content","false"):f.setAttribute("data-has-content","true")};c.container?c.container.appendChild(d):null===(i=e.container.parentNode)||void 0===i||i.insertBefore(d,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v)}}const d={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function u(t){return e=>{var n,o,r;const i={classNames:Object.assign(Object.assign({},d),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const a=document.createElement("div");a.setAttribute("class",i.classNames.scrollIndicatorBar);const l=document.createElement("div");l.setAttribute("class",i.classNames.scrollIndicatorButton),l.setAttribute("data-is-grabbed","false"),a.appendChild(l),s.appendChild(a);const c=()=>{s.setAttribute("data-has-overflow",e.details.hasOverflow.toString())};c();const u=()=>{const t=e.container.offsetWidth/e.container.scrollWidth;return e.container.scrollLeft*t};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame((()=>{const t=e.container.offsetWidth/e.container.scrollWidth*100,n=u();l.style.width=`${t}%`,l.style.transform=`translateX(${n}px)`;const o=e.container.scrollLeft/(e.container.scrollWidth-e.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(r=e.container.parentNode)||void 0===r||r.insertBefore(s,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v),e.on("detailsChanged",c),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?e.moveToDirection("prev"):"ArrowRight"===t.key&&e.moveToDirection("next")})),s.addEventListener("click",(t=>{const n=l.offsetWidth,o=u(),r=o+n,i=t.pageX-s.offsetLeft;i<o?e.moveToDirection("prev"):i>r&&e.moveToDirection("next")}));let h=!1,p=0,b=0;const g=t=>{h=!0;const n=t.pageX||t.touches[0].pageX;p=n-s.offsetLeft,b=e.container.scrollLeft,l.style.cursor="grabbing",e.container.style.scrollSnapType="none",l.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},m=t=>{if(!h)return;t.preventDefault();const n=(t.pageX||t.touches[0].pageX)-s.offsetLeft,o=e.container.scrollWidth/s.offsetWidth,r=(n-p)*o;e.container.scrollLeft=b+r},w=()=>{h=!1,l.style.cursor="",e.container.style.scrollSnapType="",l.setAttribute("data-is-grabbed","false")};l.addEventListener("mousedown",g),l.addEventListener("touchstart",g),window.addEventListener("mousemove",m),window.addEventListener("touchmove",m,{passive:!1}),window.addEventListener("mouseup",w),window.addEventListener("touchend",w)}}function f(t){var e;const n=null!==(e=null==t?void 0:t.draggedDistanceThatPreventsClick)&&void 0!==e?e:20;return t=>{let e=!1,o=0,r=0;t.container.setAttribute("data-has-drag-scrolling","true"),t.container.addEventListener("mousedown",(n=>{t.details.hasOverflow&&(e=!0,o=n.pageX-t.container.offsetLeft,r=t.container.scrollLeft,t.container.style.cursor="grabbing",t.container.style.scrollSnapType="none",t.container.style.scrollBehavior="auto")})),window.addEventListener("mouseup",(()=>{t.details.hasOverflow&&(e=!1,t.container.style.cursor="",setTimeout((()=>{t.container.style.scrollSnapType="",t.container.style.scrollBehavior="";t.container.querySelectorAll(":scope > *").forEach((t=>{t.style.pointerEvents=""}))}),50))})),window.addEventListener("mousemove",(i=>{if(!t.details.hasOverflow)return;if(!e)return;i.preventDefault();const s=i.pageX-t.container.offsetLeft-o;t.container.scrollLeft=r-s;const a=Math.abs(s),l=t.container.querySelectorAll(":scope > *"),c=a>n?"none":"";l.forEach((t=>{t.style.pointerEvents=c}))}))}}const v={dotDescription:"Page %d of %d"},h={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function p(t){return e=>{var n,o;const r={texts:Object.assign(Object.assign({},v),(null==t?void 0:t.texts)||[]),classNames:Object.assign(Object.assign({},h),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},i=document.createElement("div");i.classList.add(r.classNames.dotsContainer);let s=null;const a=()=>{i.setAttribute("data-has-content",e.details.hasOverflow.toString()),i.innerHTML="";const t=document.createElement("ul"),n=e.details.amountOfPages,o=e.details.currentPage;if(!(n<=1)){for(let e=0;e<n;e++){const a=document.createElement("li"),c=document.createElement("button");c.setAttribute("type","button"),c.setAttribute("class",r.classNames.dotsItem),c.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(e+1).toString()).replace("%d",n.toString())),c.setAttribute("aria-pressed",(e===o).toString()),c.setAttribute("data-page",(e+1).toString()),a.appendChild(c),t.appendChild(a),c.addEventListener("click",(()=>l(e+1))),c.addEventListener("focus",(()=>s=e+1)),c.addEventListener("keydown",(t=>{var e;const o=i.querySelector('[aria-pressed="true"]');if(!o)return;const r=parseInt(null!==(e=o.getAttribute("data-page"))&&void 0!==e?e:"1");if("ArrowLeft"===t.key){const t=r-1;if(t>0){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}if("ArrowRight"===t.key){const t=r+1;if(t<=n){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}}))}if(i.appendChild(t),s){const t=i.querySelector(`[data-page="${s}"]`);t&&t.focus()}}},l=t=>{const n=e.details.containerWidth*(t-1);e.container.style.scrollBehavior=e.options.scrollBehavior,e.container.style.scrollSnapType="none",e.container.scrollLeft=n,e.container.style.scrollBehavior="",e.container.style.scrollSnapType=""};a(),r.container?r.container.appendChild(i):null===(o=e.container.parentNode)||void 0===o||o.insertBefore(i,e.container.nextSibling),e.on("detailsChanged",(()=>{a()}))}}export{c as ArrowsPlugin,p as DotsPlugin,f as DragScrollingPlugin,n as OverflowSlider,u as ScrollIndicatorPlugin,i as SkipLinksPlugin};

package/dist/index.js

@@ -240,7 +240,7 @@
                     }
                 }
             }
-            slider.container.style.scrollBehavior = 'smooth';
+            slider.container.style.scrollBehavior = slider.options.scrollBehavior;
             slider.container.scrollLeft = targetScrollPosition;
             setTimeout(() => slider.container.style.scrollBehavior = '', 50);
         }
@@ -497,12 +497,13 @@
                 }
             });
             // make scrollbar button draggable via mouse/touch and update the scroll position
-            let isMouseDown = false;
+            let isInteractionDown = false;
             let startX = 0;
             let scrollLeft = 0;
-            scrollbarButton.addEventListener('mousedown', (e) => {
-                isMouseDown = true;
-                startX = e.pageX - scrollbarContainer.offsetLeft;
+            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
                 scrollbarButton.style.cursor = 'grabbing';
@@ -510,23 +511,30 @@
                 scrollbarButton.setAttribute('data-is-grabbed', 'true');
                 e.preventDefault();
                 e.stopPropagation();
-            });
-            window.addEventListener('mouseup', () => {
-                isMouseDown = false;
-                scrollbarButton.style.cursor = '';
-                slider.container.style.scrollSnapType = '';
-                scrollbarButton.setAttribute('data-is-grabbed', 'false');
-            });
-            window.addEventListener('mousemove', (e) => {
-                if (!isMouseDown) {
+            };
+            const onInteractionMove = (e) => {
+                if (!isInteractionDown) {
                     return;
                 }
                 e.preventDefault();
-                const x = e.pageX - scrollbarContainer.offsetLeft;
+                const pageX = e.pageX || e.touches[0].pageX;
+                const x = pageX - scrollbarContainer.offsetLeft;
                 const scrollingFactor = slider.container.scrollWidth / scrollbarContainer.offsetWidth;
                 const walk = (x - startX) * scrollingFactor;
                 slider.container.scrollLeft = scrollLeft + walk;
-            });
+            };
+            const onInteractionUp = () => {
+                isInteractionDown = false;
+                scrollbarButton.style.cursor = '';
+                slider.container.style.scrollSnapType = '';
+                scrollbarButton.setAttribute('data-is-grabbed', 'false');
+            };
+            scrollbarButton.addEventListener('mousedown', onInteractionDown);
+            scrollbarButton.addEventListener('touchstart', onInteractionDown);
+            window.addEventListener('mousemove', onInteractionMove);
+            window.addEventListener('touchmove', onInteractionMove, { passive: false });
+            window.addEventListener('mouseup', onInteractionUp);
+            window.addEventListener('touchend', onInteractionUp);
         };
     }
 
@@ -540,11 +548,10 @@
             let isMouseDown = false;
             let startX = 0;
             let scrollLeft = 0;
-            const hasOverflow = () => {
-                return slider.details.hasOverflow;
-            };
+            // add data attribute to container
+            slider.container.setAttribute('data-has-drag-scrolling', 'true');
             slider.container.addEventListener('mousedown', (e) => {
-                if (!hasOverflow()) {
+                if (!slider.details.hasOverflow) {
                     return;
                 }
                 isMouseDown = true;
@@ -553,6 +560,7 @@
                 // change cursor to grabbing
                 slider.container.style.cursor = 'grabbing';
                 slider.container.style.scrollSnapType = 'none';
+                slider.container.style.scrollBehavior = 'auto';
                 // prevent pointer events on the slides
                 // const slides = slider.container.querySelectorAll( ':scope > *' );
                 // slides.forEach((slide) => {
@@ -563,13 +571,15 @@
                 // e.stopPropagation();
             });
             window.addEventListener('mouseup', () => {
-                if (!hasOverflow()) {
+                if (!slider.details.hasOverflow) {
                     return;
                 }
                 isMouseDown = false;
                 slider.container.style.cursor = '';
-                slider.container.style.scrollSnapType = '';
+                // slider.container.style.scrollBehavior = slider.options.scrollBehavior;
                 setTimeout(() => {
+                    slider.container.style.scrollSnapType = '';
+                    slider.container.style.scrollBehavior = '';
                     const slides = slider.container.querySelectorAll(':scope > *');
                     slides.forEach((slide) => {
                         slide.style.pointerEvents = '';
@@ -577,7 +587,7 @@
                 }, 50);
             });
             window.addEventListener('mousemove', (e) => {
-                if (!hasOverflow()) {
+                if (!slider.details.hasOverflow) {
                     return;
                 }
                 if (!isMouseDown) {

package/dist/index.min.js

@@ -1,2 +1,2 @@
-/*!  @evermade/overflow-slider 1.0.0 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).OverflowSlider={})}(this,(function(t){"use strict";function e(t,n=1){const o=`${t}-${n}`;return document.getElementById(o)?e(t,n+1):o}function n(t,n,o){let r,i={};function s(t=!1){const e=r.details,n=function(t){let e,n=!1,o=0,r=0,i=0,s=0,a=1;return t.container.scrollWidth>t.container.clientWidth&&(n=!0),o=Array.from(t.container.querySelectorAll(":scope > *")).length,r=t.container.offsetWidth,i=t.container.scrollWidth,s=Math.ceil(i/r),t.container.scrollLeft>=0&&(a=Math.floor(t.container.scrollLeft/r),t.container.scrollLeft+r===i&&(a=s-1)),e={hasOverflow:n,slideCount:o,containerWidth:r,scrollableAreaWidth:i,amountOfPages:s,currentPage:a},e}(r);r.details=n,t||function(t,e){const n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let o of n)if(!1===e.hasOwnProperty(o)||t[o]!==e[o])return!1;return!0}(e,n)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function a(){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 l(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}return r={emit:function(t){var e;i&&i[t]&&i[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 s=n;if("prev"===t?s=Math.max(0,n-r.container.offsetWidth):"next"===t&&(s=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===e){let e=null;const a=Array.from(r.container.querySelectorAll(":scope > *"));let l=0;if(a.length>1){const t=a[0].getBoundingClientRect();l=a[1].getBoundingClientRect().left-t.right}if(e="prev"===t?Math.max(0,s-l):Math.min(r.container.scrollWidth,s+l),"next"===t){let t=!1;for(let r of a){const i=r.getBoundingClientRect(),a=i.left-o.left+n,l=a+i.width;if(a<s&&l>s){e=a,t=!0;break}}t||(e=Math.min(s,r.container.scrollWidth-r.container.offsetWidth)),e&&e>n&&(s=e)}else{let t=!1;for(let r of a){const s=r.getBoundingClientRect(),a=s.left-o.left+n,l=a+s.width;if(a<n&&l>n){e=l-i,t=!0;break}}t||(e=Math.max(0,n-i)),e&&e<n&&(s=e)}}r.container.style.scrollBehavior="smooth",r.container.scrollLeft=s,setTimeout((()=>r.container.style.scrollBehavior=""),50)},on:function(t,e){i[t]||(i[t]=[]),i[t].push(e)},options:n},function(){r.container=t;let n=t.getAttribute("id");null===n&&(n=e("overflow-slider"),t.setAttribute("id",n)),s(!0),r.on("contentsChanged",(()=>s())),r.on("containerSizeChanged",(()=>s()));let i=0;if(r.on("scroll",(()=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame((()=>{s()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let t=!1;r.container.addEventListener("mousedown",(()=>{t=!0})),r.container.addEventListener("touchstart",(()=>{t=!0}),{passive:!0}),r.container.addEventListener("focusin",(e=>{if(!t){let t=e.target;for(;t.parentElement!==r.container&&t.parentElement;)t=t.parentElement;!function(t){const e=t.getBoundingClientRect(),n=r.container.getBoundingClientRect(),o=r.container.offsetWidth,i=r.container.scrollLeft,s=e.left-n.left+i,a=s+e.width;let l=null;s<i?l=s:a>i+o&&(l=a-o);l&&(r.container.style.scrollSnapType="none",r.container.scrollLeft=l)}(t)}t=!1}))}(),l(),a(),o)for(const t of o)t(r);r.on("detailsChanged",(()=>{l(),a()})),r.emit("created")}(),r}const o={skipList:"Skip list"},r={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};const i={buttonPrevious:"Previous items",buttonNext:"Next items"},s={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>'},a={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};const l={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};const c={dotDescription:"Page %d of %d"},d={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};t.ArrowsPlugin=function(t){return e=>{var n,o,r,l;const c={texts:Object.assign(Object.assign({},i),(null==t?void 0:t.texts)||[]),icons:Object.assign(Object.assign({},s),(null==t?void 0:t.icons)||[]),classNames:Object.assign(Object.assign({},a),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},d=document.createElement("div");d.classList.add(c.classNames.navContainer);const u=document.createElement("button");u.setAttribute("class",c.classNames.prevButton),u.setAttribute("type","button"),u.setAttribute("aria-label",c.texts.buttonPrevious),u.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),u.setAttribute("data-type","prev"),u.innerHTML=c.icons.prev,u.addEventListener("click",(()=>e.moveToDirection("prev")));const f=document.createElement("button");f.setAttribute("class",c.classNames.nextButton),f.setAttribute("type","button"),f.setAttribute("aria-label",c.texts.buttonNext),f.setAttribute("aria-controls",null!==(r=e.container.getAttribute("id"))&&void 0!==r?r:""),f.setAttribute("data-type","next"),f.innerHTML=c.icons.next,f.addEventListener("click",(()=>e.moveToDirection("next"))),d.appendChild(u),d.appendChild(f);const v=()=>{const t=e.container.scrollLeft,n=e.container.scrollWidth,o=e.container.clientWidth;0===t?u.setAttribute("data-has-content","false"):u.setAttribute("data-has-content","true"),t+o>=n?f.setAttribute("data-has-content","false"):f.setAttribute("data-has-content","true")};c.container?c.container.appendChild(d):null===(l=e.container.parentNode)||void 0===l||l.insertBefore(d,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v)}},t.DotsPlugin=function(t){return e=>{var n,o;const r={texts:Object.assign(Object.assign({},c),(null==t?void 0:t.texts)||[]),classNames:Object.assign(Object.assign({},d),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},i=document.createElement("div");i.classList.add(r.classNames.dotsContainer);let s=null;const a=()=>{i.setAttribute("data-has-content",e.details.hasOverflow.toString()),i.innerHTML="";const t=document.createElement("ul"),n=e.details.amountOfPages,o=e.details.currentPage;if(!(n<=1)){for(let e=0;e<n;e++){const a=document.createElement("li"),c=document.createElement("button");c.setAttribute("type","button"),c.setAttribute("class",r.classNames.dotsItem),c.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(e+1).toString()).replace("%d",n.toString())),c.setAttribute("aria-pressed",(e===o).toString()),c.setAttribute("data-page",(e+1).toString()),a.appendChild(c),t.appendChild(a),c.addEventListener("click",(()=>l(e+1))),c.addEventListener("focus",(()=>s=e+1)),c.addEventListener("keydown",(t=>{var e;const o=i.querySelector('[aria-pressed="true"]');if(!o)return;const r=parseInt(null!==(e=o.getAttribute("data-page"))&&void 0!==e?e:"1");if("ArrowLeft"===t.key){const t=r-1;if(t>0){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}if("ArrowRight"===t.key){const t=r+1;if(t<=n){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}}))}if(i.appendChild(t),s){const t=i.querySelector(`[data-page="${s}"]`);t&&t.focus()}}},l=t=>{const n=e.details.containerWidth*(t-1);e.container.style.scrollBehavior=e.options.scrollBehavior,e.container.style.scrollSnapType="none",e.container.scrollLeft=n,e.container.style.scrollBehavior="",e.container.style.scrollSnapType=""};a(),r.container?r.container.appendChild(i):null===(o=e.container.parentNode)||void 0===o||o.insertBefore(i,e.container.nextSibling),e.on("detailsChanged",(()=>{a()}))}},t.DragScrollingPlugin=function(t){var e;const n=null!==(e=null==t?void 0:t.draggedDistanceThatPreventsClick)&&void 0!==e?e:20;return t=>{let e=!1,o=0,r=0;const i=()=>t.details.hasOverflow;t.container.addEventListener("mousedown",(n=>{i()&&(e=!0,o=n.pageX-t.container.offsetLeft,r=t.container.scrollLeft,t.container.style.cursor="grabbing",t.container.style.scrollSnapType="none")})),window.addEventListener("mouseup",(()=>{i()&&(e=!1,t.container.style.cursor="",t.container.style.scrollSnapType="",setTimeout((()=>{t.container.querySelectorAll(":scope > *").forEach((t=>{t.style.pointerEvents=""}))}),50))})),window.addEventListener("mousemove",(s=>{if(!i())return;if(!e)return;s.preventDefault();const a=s.pageX-t.container.offsetLeft-o;t.container.scrollLeft=r-a;const l=Math.abs(a),c=t.container.querySelectorAll(":scope > *"),d=l>n?"none":"";c.forEach((t=>{t.style.pointerEvents=d}))}))}},t.OverflowSlider=function(t,e,o){try{if(!(t instanceof Element))throw new Error("Container must be HTML element, found "+typeof t);const r={scrollBehavior:"smooth",scrollStrategy:"fullSlide"},i=Object.assign(Object.assign({},r),e);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(i.scrollBehavior="auto"),n(t,i,o)}catch(t){console.error(t)}},t.ScrollIndicatorPlugin=function(t){return e=>{var n,o,r;const i={classNames:Object.assign(Object.assign({},l),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const a=document.createElement("div");a.setAttribute("class",i.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",i.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),a.appendChild(c),s.appendChild(a);const d=()=>{s.setAttribute("data-has-overflow",e.details.hasOverflow.toString())};d();const u=()=>{const t=e.container.offsetWidth/e.container.scrollWidth;return e.container.scrollLeft*t};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame((()=>{const t=e.container.offsetWidth/e.container.scrollWidth*100,n=u();c.style.width=`${t}%`,c.style.transform=`translateX(${n}px)`;const o=e.container.scrollLeft/(e.container.scrollWidth-e.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(r=e.container.parentNode)||void 0===r||r.insertBefore(s,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v),e.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?e.moveToDirection("prev"):"ArrowRight"===t.key&&e.moveToDirection("next")})),s.addEventListener("click",(t=>{const n=c.offsetWidth,o=u(),r=o+n,i=t.pageX-s.offsetLeft;i<o?e.moveToDirection("prev"):i>r&&e.moveToDirection("next")}));let p=!1,h=0,b=0;c.addEventListener("mousedown",(t=>{p=!0,h=t.pageX-s.offsetLeft,b=e.container.scrollLeft,c.style.cursor="grabbing",e.container.style.scrollSnapType="none",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()})),window.addEventListener("mouseup",(()=>{p=!1,c.style.cursor="",e.container.style.scrollSnapType="",c.setAttribute("data-is-grabbed","false")})),window.addEventListener("mousemove",(t=>{if(!p)return;t.preventDefault();const n=t.pageX-s.offsetLeft,o=e.container.scrollWidth/s.offsetWidth,r=(n-h)*o;e.container.scrollLeft=b+r}))}},t.SkipLinksPlugin=function(t){return n=>{var i,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},o),(null==t?void 0:t.texts)||[]),classNames:Object.assign(Object.assign({},r),(null==t?void 0:t.classNames)||[]),containerBefore:null!==(i=null==t?void 0:t.containerAfter)&&void 0!==i?i:null,containerAfter:null!==(s=null==t?void 0:t.containerAfter)&&void 0!==s?s:null},f=e("overflow-slider-skip"),v=document.createElement("a");v.setAttribute("href",`#${f}`),v.textContent=u.texts.skipList,v.classList.add(u.classNames.skipLink);const p=document.createElement("div");p.setAttribute("id",f),p.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(v,u.containerBefore):null===(l=n.container.parentNode)||void 0===l||l.insertBefore(v,n.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(p,u.containerAfter.nextSibling):null===(d=n.container.parentNode)||void 0===d||d.insertBefore(p,n.container.nextSibling)}},Object.defineProperty(t,"__esModule",{value:!0})}));
+/*!  @evermade/overflow-slider 1.1.0 */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).OverflowSlider={})}(this,(function(t){"use strict";function e(t,n=1){const o=`${t}-${n}`;return document.getElementById(o)?e(t,n+1):o}function n(t,n,o){let r,i={};function s(t=!1){const e=r.details,n=function(t){let e,n=!1,o=0,r=0,i=0,s=0,a=1;return t.container.scrollWidth>t.container.clientWidth&&(n=!0),o=Array.from(t.container.querySelectorAll(":scope > *")).length,r=t.container.offsetWidth,i=t.container.scrollWidth,s=Math.ceil(i/r),t.container.scrollLeft>=0&&(a=Math.floor(t.container.scrollLeft/r),t.container.scrollLeft+r===i&&(a=s-1)),e={hasOverflow:n,slideCount:o,containerWidth:r,scrollableAreaWidth:i,amountOfPages:s,currentPage:a},e}(r);r.details=n,t||function(t,e){const n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let o of n)if(!1===e.hasOwnProperty(o)||t[o]!==e[o])return!1;return!0}(e,n)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function a(){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 l(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}return r={emit:function(t){var e;i&&i[t]&&i[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 s=n;if("prev"===t?s=Math.max(0,n-r.container.offsetWidth):"next"===t&&(s=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===e){let e=null;const a=Array.from(r.container.querySelectorAll(":scope > *"));let l=0;if(a.length>1){const t=a[0].getBoundingClientRect();l=a[1].getBoundingClientRect().left-t.right}if(e="prev"===t?Math.max(0,s-l):Math.min(r.container.scrollWidth,s+l),"next"===t){let t=!1;for(let r of a){const i=r.getBoundingClientRect(),a=i.left-o.left+n,l=a+i.width;if(a<s&&l>s){e=a,t=!0;break}}t||(e=Math.min(s,r.container.scrollWidth-r.container.offsetWidth)),e&&e>n&&(s=e)}else{let t=!1;for(let r of a){const s=r.getBoundingClientRect(),a=s.left-o.left+n,l=a+s.width;if(a<n&&l>n){e=l-i,t=!0;break}}t||(e=Math.max(0,n-i)),e&&e<n&&(s=e)}}r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=s,setTimeout((()=>r.container.style.scrollBehavior=""),50)},on:function(t,e){i[t]||(i[t]=[]),i[t].push(e)},options:n},function(){r.container=t;let n=t.getAttribute("id");null===n&&(n=e("overflow-slider"),t.setAttribute("id",n)),s(!0),r.on("contentsChanged",(()=>s())),r.on("containerSizeChanged",(()=>s()));let i=0;if(r.on("scroll",(()=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame((()=>{s()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let t=!1;r.container.addEventListener("mousedown",(()=>{t=!0})),r.container.addEventListener("touchstart",(()=>{t=!0}),{passive:!0}),r.container.addEventListener("focusin",(e=>{if(!t){let t=e.target;for(;t.parentElement!==r.container&&t.parentElement;)t=t.parentElement;!function(t){const e=t.getBoundingClientRect(),n=r.container.getBoundingClientRect(),o=r.container.offsetWidth,i=r.container.scrollLeft,s=e.left-n.left+i,a=s+e.width;let l=null;s<i?l=s:a>i+o&&(l=a-o);l&&(r.container.style.scrollSnapType="none",r.container.scrollLeft=l)}(t)}t=!1}))}(),l(),a(),o)for(const t of o)t(r);r.on("detailsChanged",(()=>{l(),a()})),r.emit("created")}(),r}const o={skipList:"Skip list"},r={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};const i={buttonPrevious:"Previous items",buttonNext:"Next items"},s={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>'},a={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};const l={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};const c={dotDescription:"Page %d of %d"},d={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};t.ArrowsPlugin=function(t){return e=>{var n,o,r,l;const c={texts:Object.assign(Object.assign({},i),(null==t?void 0:t.texts)||[]),icons:Object.assign(Object.assign({},s),(null==t?void 0:t.icons)||[]),classNames:Object.assign(Object.assign({},a),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},d=document.createElement("div");d.classList.add(c.classNames.navContainer);const u=document.createElement("button");u.setAttribute("class",c.classNames.prevButton),u.setAttribute("type","button"),u.setAttribute("aria-label",c.texts.buttonPrevious),u.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),u.setAttribute("data-type","prev"),u.innerHTML=c.icons.prev,u.addEventListener("click",(()=>e.moveToDirection("prev")));const f=document.createElement("button");f.setAttribute("class",c.classNames.nextButton),f.setAttribute("type","button"),f.setAttribute("aria-label",c.texts.buttonNext),f.setAttribute("aria-controls",null!==(r=e.container.getAttribute("id"))&&void 0!==r?r:""),f.setAttribute("data-type","next"),f.innerHTML=c.icons.next,f.addEventListener("click",(()=>e.moveToDirection("next"))),d.appendChild(u),d.appendChild(f);const v=()=>{const t=e.container.scrollLeft,n=e.container.scrollWidth,o=e.container.clientWidth;0===t?u.setAttribute("data-has-content","false"):u.setAttribute("data-has-content","true"),t+o>=n?f.setAttribute("data-has-content","false"):f.setAttribute("data-has-content","true")};c.container?c.container.appendChild(d):null===(l=e.container.parentNode)||void 0===l||l.insertBefore(d,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v)}},t.DotsPlugin=function(t){return e=>{var n,o;const r={texts:Object.assign(Object.assign({},c),(null==t?void 0:t.texts)||[]),classNames:Object.assign(Object.assign({},d),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},i=document.createElement("div");i.classList.add(r.classNames.dotsContainer);let s=null;const a=()=>{i.setAttribute("data-has-content",e.details.hasOverflow.toString()),i.innerHTML="";const t=document.createElement("ul"),n=e.details.amountOfPages,o=e.details.currentPage;if(!(n<=1)){for(let e=0;e<n;e++){const a=document.createElement("li"),c=document.createElement("button");c.setAttribute("type","button"),c.setAttribute("class",r.classNames.dotsItem),c.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(e+1).toString()).replace("%d",n.toString())),c.setAttribute("aria-pressed",(e===o).toString()),c.setAttribute("data-page",(e+1).toString()),a.appendChild(c),t.appendChild(a),c.addEventListener("click",(()=>l(e+1))),c.addEventListener("focus",(()=>s=e+1)),c.addEventListener("keydown",(t=>{var e;const o=i.querySelector('[aria-pressed="true"]');if(!o)return;const r=parseInt(null!==(e=o.getAttribute("data-page"))&&void 0!==e?e:"1");if("ArrowLeft"===t.key){const t=r-1;if(t>0){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}if("ArrowRight"===t.key){const t=r+1;if(t<=n){const e=i.querySelector(`[data-page="${t}"]`);e&&e.focus(),l(t)}}}))}if(i.appendChild(t),s){const t=i.querySelector(`[data-page="${s}"]`);t&&t.focus()}}},l=t=>{const n=e.details.containerWidth*(t-1);e.container.style.scrollBehavior=e.options.scrollBehavior,e.container.style.scrollSnapType="none",e.container.scrollLeft=n,e.container.style.scrollBehavior="",e.container.style.scrollSnapType=""};a(),r.container?r.container.appendChild(i):null===(o=e.container.parentNode)||void 0===o||o.insertBefore(i,e.container.nextSibling),e.on("detailsChanged",(()=>{a()}))}},t.DragScrollingPlugin=function(t){var e;const n=null!==(e=null==t?void 0:t.draggedDistanceThatPreventsClick)&&void 0!==e?e:20;return t=>{let e=!1,o=0,r=0;t.container.setAttribute("data-has-drag-scrolling","true"),t.container.addEventListener("mousedown",(n=>{t.details.hasOverflow&&(e=!0,o=n.pageX-t.container.offsetLeft,r=t.container.scrollLeft,t.container.style.cursor="grabbing",t.container.style.scrollSnapType="none",t.container.style.scrollBehavior="auto")})),window.addEventListener("mouseup",(()=>{t.details.hasOverflow&&(e=!1,t.container.style.cursor="",setTimeout((()=>{t.container.style.scrollSnapType="",t.container.style.scrollBehavior="";t.container.querySelectorAll(":scope > *").forEach((t=>{t.style.pointerEvents=""}))}),50))})),window.addEventListener("mousemove",(i=>{if(!t.details.hasOverflow)return;if(!e)return;i.preventDefault();const s=i.pageX-t.container.offsetLeft-o;t.container.scrollLeft=r-s;const a=Math.abs(s),l=t.container.querySelectorAll(":scope > *"),c=a>n?"none":"";l.forEach((t=>{t.style.pointerEvents=c}))}))}},t.OverflowSlider=function(t,e,o){try{if(!(t instanceof Element))throw new Error("Container must be HTML element, found "+typeof t);const r={scrollBehavior:"smooth",scrollStrategy:"fullSlide"},i=Object.assign(Object.assign({},r),e);return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(i.scrollBehavior="auto"),n(t,i,o)}catch(t){console.error(t)}},t.ScrollIndicatorPlugin=function(t){return e=>{var n,o,r;const i={classNames:Object.assign(Object.assign({},l),(null==t?void 0:t.classNames)||[]),container:null!==(n=null==t?void 0:t.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(o=e.container.getAttribute("id"))&&void 0!==o?o:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const a=document.createElement("div");a.setAttribute("class",i.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",i.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),a.appendChild(c),s.appendChild(a);const d=()=>{s.setAttribute("data-has-overflow",e.details.hasOverflow.toString())};d();const u=()=>{const t=e.container.offsetWidth/e.container.scrollWidth;return e.container.scrollLeft*t};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame((()=>{const t=e.container.offsetWidth/e.container.scrollWidth*100,n=u();c.style.width=`${t}%`,c.style.transform=`translateX(${n}px)`;const o=e.container.scrollLeft/(e.container.scrollWidth-e.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(r=e.container.parentNode)||void 0===r||r.insertBefore(s,e.container.nextSibling),v(),e.on("scroll",v),e.on("contentsChanged",v),e.on("containerSizeChanged",v),e.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?e.moveToDirection("prev"):"ArrowRight"===t.key&&e.moveToDirection("next")})),s.addEventListener("click",(t=>{const n=c.offsetWidth,o=u(),r=o+n,i=t.pageX-s.offsetLeft;i<o?e.moveToDirection("prev"):i>r&&e.moveToDirection("next")}));let p=!1,h=0,g=0;const b=t=>{p=!0;const n=t.pageX||t.touches[0].pageX;h=n-s.offsetLeft,g=e.container.scrollLeft,c.style.cursor="grabbing",e.container.style.scrollSnapType="none",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},m=t=>{if(!p)return;t.preventDefault();const n=(t.pageX||t.touches[0].pageX)-s.offsetLeft,o=e.container.scrollWidth/s.offsetWidth,r=(n-h)*o;e.container.scrollLeft=g+r},w=()=>{p=!1,c.style.cursor="",e.container.style.scrollSnapType="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",b),c.addEventListener("touchstart",b),window.addEventListener("mousemove",m),window.addEventListener("touchmove",m,{passive:!1}),window.addEventListener("mouseup",w),window.addEventListener("touchend",w)}},t.SkipLinksPlugin=function(t){return n=>{var i,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},o),(null==t?void 0:t.texts)||[]),classNames:Object.assign(Object.assign({},r),(null==t?void 0:t.classNames)||[]),containerBefore:null!==(i=null==t?void 0:t.containerAfter)&&void 0!==i?i:null,containerAfter:null!==(s=null==t?void 0:t.containerAfter)&&void 0!==s?s:null},f=e("overflow-slider-skip"),v=document.createElement("a");v.setAttribute("href",`#${f}`),v.textContent=u.texts.skipList,v.classList.add(u.classNames.skipLink);const p=document.createElement("div");p.setAttribute("id",f),p.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(v,u.containerBefore):null===(l=n.container.parentNode)||void 0===l||l.insertBefore(v,n.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(p,u.containerAfter.nextSibling):null===(d=n.container.parentNode)||void 0===d||d.insertBefore(p,n.container.nextSibling)}},Object.defineProperty(t,"__esModule",{value:!0})}));

package/dist/overflow-slider.css

@@ -1 +1 @@
-.overflow-slider{display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;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-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;scrollbar-width:none;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider[data-has-overflow=true]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.overflow-slider[data-has-drag-scrolling][data-has-overflow=true]{cursor:grab}.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-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/assets/demo.css

@@ -486,6 +486,24 @@ h3:before {
 	scroll-snap-type: x proximity;
 }
 
+.example-container-3-entrance-animation a {
+	animation: slideEntrance, slideEntrance;
+	animation-direction: normal, reverse;
+	animation-timeline: view(inline);
+	animation-range: entry, exit;
+}
+
+@keyframes slideEntrance {
+	0% {
+		transform: scale(.75);
+		opacity: 0;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
 .overflow-slider__dots {
 	margin-top: 1.5rem;
 }

package/docs/assets/demo.js

@@ -107,6 +107,16 @@ import {
 			]
 		);
 		console.log( '3-scroll-snapping-proximity', example3ScrollSnappingProximity );
+
+		const example3EntranceAnimation = new OverflowSlider(
+			document.querySelector( '.example-container-3-entrance-animation' ),
+			{},
+			[
+				DragScrollingPlugin(),
+				ScrollIndicatorPlugin(),
+			]
+		);
+		console.log( '3-entrance-animation', example3EntranceAnimation );
 	};
 
 	init();

package/docs/dist/overflow-slider.css

@@ -1 +1 @@
-.overflow-slider{display:grid;grid-auto-flow:column;grid-template-columns:max-content;max-width:-moz-max-content;max-width:max-content;overflow:auto;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-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;scrollbar-width:none;width:100%}.overflow-slider::-webkit-scrollbar{display:none}.overflow-slider[data-has-overflow=true]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.overflow-slider[data-has-drag-scrolling][data-has-overflow=true]{cursor:grab}.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-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/overflow-slider.esm.js

@@ -234,7 +234,7 @@ function Slider(container, options, plugins) {
                 }
             }
         }
-        slider.container.style.scrollBehavior = 'smooth';
+        slider.container.style.scrollBehavior = slider.options.scrollBehavior;
         slider.container.scrollLeft = targetScrollPosition;
         setTimeout(() => slider.container.style.scrollBehavior = '', 50);
     }
@@ -491,12 +491,13 @@ function ScrollIndicatorPlugin(args) {
             }
         });
         // make scrollbar button draggable via mouse/touch and update the scroll position
-        let isMouseDown = false;
+        let isInteractionDown = false;
         let startX = 0;
         let scrollLeft = 0;
-        scrollbarButton.addEventListener('mousedown', (e) => {
-            isMouseDown = true;
-            startX = e.pageX - scrollbarContainer.offsetLeft;
+        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
             scrollbarButton.style.cursor = 'grabbing';
@@ -504,23 +505,30 @@ function ScrollIndicatorPlugin(args) {
             scrollbarButton.setAttribute('data-is-grabbed', 'true');
             e.preventDefault();
             e.stopPropagation();
-        });
-        window.addEventListener('mouseup', () => {
-            isMouseDown = false;
-            scrollbarButton.style.cursor = '';
-            slider.container.style.scrollSnapType = '';
-            scrollbarButton.setAttribute('data-is-grabbed', 'false');
-        });
-        window.addEventListener('mousemove', (e) => {
-            if (!isMouseDown) {
+        };
+        const onInteractionMove = (e) => {
+            if (!isInteractionDown) {
                 return;
             }
             e.preventDefault();
-            const x = e.pageX - scrollbarContainer.offsetLeft;
+            const pageX = e.pageX || e.touches[0].pageX;
+            const x = pageX - scrollbarContainer.offsetLeft;
             const scrollingFactor = slider.container.scrollWidth / scrollbarContainer.offsetWidth;
             const walk = (x - startX) * scrollingFactor;
             slider.container.scrollLeft = scrollLeft + walk;
-        });
+        };
+        const onInteractionUp = () => {
+            isInteractionDown = false;
+            scrollbarButton.style.cursor = '';
+            slider.container.style.scrollSnapType = '';
+            scrollbarButton.setAttribute('data-is-grabbed', 'false');
+        };
+        scrollbarButton.addEventListener('mousedown', onInteractionDown);
+        scrollbarButton.addEventListener('touchstart', onInteractionDown);
+        window.addEventListener('mousemove', onInteractionMove);
+        window.addEventListener('touchmove', onInteractionMove, { passive: false });
+        window.addEventListener('mouseup', onInteractionUp);
+        window.addEventListener('touchend', onInteractionUp);
     };
 }
 
@@ -534,11 +542,10 @@ function DragScrollingPlugin(args) {
         let isMouseDown = false;
         let startX = 0;
         let scrollLeft = 0;
-        const hasOverflow = () => {
-            return slider.details.hasOverflow;
-        };
+        // add data attribute to container
+        slider.container.setAttribute('data-has-drag-scrolling', 'true');
         slider.container.addEventListener('mousedown', (e) => {
-            if (!hasOverflow()) {
+            if (!slider.details.hasOverflow) {
                 return;
             }
             isMouseDown = true;
@@ -547,6 +554,7 @@ function DragScrollingPlugin(args) {
             // change cursor to grabbing
             slider.container.style.cursor = 'grabbing';
             slider.container.style.scrollSnapType = 'none';
+            slider.container.style.scrollBehavior = 'auto';
             // prevent pointer events on the slides
             // const slides = slider.container.querySelectorAll( ':scope > *' );
             // slides.forEach((slide) => {
@@ -557,13 +565,15 @@ function DragScrollingPlugin(args) {
             // e.stopPropagation();
         });
         window.addEventListener('mouseup', () => {
-            if (!hasOverflow()) {
+            if (!slider.details.hasOverflow) {
                 return;
             }
             isMouseDown = false;
             slider.container.style.cursor = '';
-            slider.container.style.scrollSnapType = '';
+            // slider.container.style.scrollBehavior = slider.options.scrollBehavior;
             setTimeout(() => {
+                slider.container.style.scrollSnapType = '';
+                slider.container.style.scrollBehavior = '';
                 const slides = slider.container.querySelectorAll(':scope > *');
                 slides.forEach((slide) => {
                     slide.style.pointerEvents = '';
@@ -571,7 +581,7 @@ function DragScrollingPlugin(args) {
             }, 50);
         });
         window.addEventListener('mousemove', (e) => {
-            if (!hasOverflow()) {
+            if (!slider.details.hasOverflow) {
                 return;
             }
             if (!isMouseDown) {

package/docs/index.html

@@ -214,6 +214,23 @@
 								</div>
 							</div>
 
+							<div class="entry__item">
+								<h3>Entrance and exit animations</h3>
+								<p>Animate slides when they appear and disappear.</p>
+								<div class="overflow-slider example-container example-container-3-entrance-animation">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+								</div>
+							</div>
+
 						</section>
 
 					</div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Accessible slider tha works with overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",

package/src/core/slider.ts

@@ -197,7 +197,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 				}
 			}
 		}
-		slider.container.style.scrollBehavior = 'smooth';
+		slider.container.style.scrollBehavior = slider.options.scrollBehavior;
 		slider.container.scrollLeft = targetScrollPosition;
 		setTimeout(() => slider.container.style.scrollBehavior = '', 50);
 	}

package/src/overflow-slider.scss

@@ -14,9 +14,20 @@
 	grid-auto-flow: column;
 	grid-template-columns: max-content;
 	max-width: max-content;
+	// hide native scrollbars
 	&::-webkit-scrollbar {
 		display: none;
 	}
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	// selecting text might make scrolling difficult
+	&[data-has-overflow="true"] {
+		user-select: none;
+	}
+	// show grab cursor if has drag scrolling
+	&[data-has-drag-scrolling][data-has-overflow="true"] {
+		cursor: grab;
+	}
 	& > * {
 		scroll-snap-align: start;
 		outline-offset: -2px;

package/src/plugins/drag-scrolling.ts

@@ -15,12 +15,11 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 		let startX = 0;
 		let scrollLeft = 0;
 
-		const hasOverflow = () => {
-			return slider.details.hasOverflow;
-		}
+		// add data attribute to container
+		slider.container.setAttribute( 'data-has-drag-scrolling', 'true' );
 
 		slider.container.addEventListener('mousedown', (e) => {
-			if ( ! hasOverflow() ) {
+			if ( ! slider.details.hasOverflow ) {
 				return;
 			}
 			isMouseDown = true;
@@ -29,6 +28,7 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 			// change cursor to grabbing
 			slider.container.style.cursor = 'grabbing';
 			slider.container.style.scrollSnapType = 'none';
+			slider.container.style.scrollBehavior = 'auto';
 			// prevent pointer events on the slides
 			// const slides = slider.container.querySelectorAll( ':scope > *' );
 			// slides.forEach((slide) => {
@@ -39,13 +39,15 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 			// e.stopPropagation();
 		});
 		window.addEventListener('mouseup', () => {
-			if ( ! hasOverflow() ) {
+			if ( ! slider.details.hasOverflow ) {
 				return;
 			}
 			isMouseDown = false;
 			slider.container.style.cursor = '';
-			slider.container.style.scrollSnapType = '';
+			// slider.container.style.scrollBehavior = slider.options.scrollBehavior;
 			setTimeout(() => {
+				slider.container.style.scrollSnapType = '';
+				slider.container.style.scrollBehavior = '';
 				const slides = slider.container.querySelectorAll( ':scope > *' );
 				slides.forEach((slide) => {
 					(<HTMLElement>slide).style.pointerEvents = '';
@@ -53,7 +55,7 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 			}, 50);
 		});
 		window.addEventListener('mousemove', (e) => {
-			if ( ! hasOverflow() ) {
+			if ( ! slider.details.hasOverflow ) {
 				return;
 			}
 			if (!isMouseDown) {

package/src/plugins/scroll-indicator.ts

@@ -116,13 +116,14 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 		});
 
 		// make scrollbar button draggable via mouse/touch and update the scroll position
-		let isMouseDown = false;
+		let isInteractionDown = false;
 		let startX = 0;
 		let scrollLeft = 0;
 
-		scrollbarButton.addEventListener('mousedown', (e) => {
-			isMouseDown = true;
-			startX = e.pageX - scrollbarContainer.offsetLeft;
+		const onInteractionDown = (e: MouseEvent | TouchEvent) => {
+			isInteractionDown = true;
+			const pageX = (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
+			startX = pageX - scrollbarContainer.offsetLeft;
 			scrollLeft = slider.container.scrollLeft;
 			// change cursor to grabbing
 			scrollbarButton.style.cursor = 'grabbing';
@@ -131,22 +132,35 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 
 			e.preventDefault();
 			e.stopPropagation();
-		});
-		window.addEventListener('mouseup', () => {
-			isMouseDown = false;
-			scrollbarButton.style.cursor = '';
-			slider.container.style.scrollSnapType = '';
-			scrollbarButton.setAttribute( 'data-is-grabbed', 'false' );
-		});
-		window.addEventListener('mousemove', (e) => {
-			if (!isMouseDown) {
+		};
+
+		const onInteractionMove = (e: MouseEvent | TouchEvent) => {
+			if (!isInteractionDown) {
 				return;
 			}
 			e.preventDefault();
-			const x = e.pageX - scrollbarContainer.offsetLeft;
+			const pageX = (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
+			const x = pageX - scrollbarContainer.offsetLeft;
 			const scrollingFactor = slider.container.scrollWidth / scrollbarContainer.offsetWidth;
 			const walk = (x - startX) * scrollingFactor;
 			slider.container.scrollLeft = scrollLeft + walk;
-		});
+		};
+
+		const onInteractionUp = () => {
+			isInteractionDown = false;
+			scrollbarButton.style.cursor = '';
+			slider.container.style.scrollSnapType = '';
+			scrollbarButton.setAttribute( 'data-is-grabbed', 'false' );
+		};
+
+		scrollbarButton.addEventListener('mousedown', onInteractionDown);
+		scrollbarButton.addEventListener('touchstart', onInteractionDown);
+
+		window.addEventListener('mousemove', onInteractionMove);
+		window.addEventListener('touchmove', onInteractionMove, { passive: false });
+
+		window.addEventListener('mouseup', onInteractionUp);
+		window.addEventListener('touchend', onInteractionUp);
+
 	};
 }