@evermade/overflow-slider 2.0.2 → 3.0.0

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

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

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

@@ -0,0 +1,81 @@
+function FadePlugin(args) {
+    return (slider) => {
+        var _a, _b, _c;
+        const options = {
+            classNames: {
+                fadeItem: 'overflow-slider-fade',
+                fadeItemStart: 'overflow-slider-fade--start',
+                fadeItemEnd: 'overflow-slider-fade--end',
+            },
+            container: (_a = args === null || args === void 0 ? void 0 : args.container) !== null && _a !== void 0 ? _a : null,
+            containerStart: (_b = args === null || args === void 0 ? void 0 : args.containerStart) !== null && _b !== void 0 ? _b : null,
+            containerEnd: (_c = args === null || args === void 0 ? void 0 : args.containerEnd) !== null && _c !== void 0 ? _c : null,
+        };
+        const fadeItemStart = document.createElement('div');
+        fadeItemStart.classList.add(options.classNames.fadeItem, options.classNames.fadeItemStart);
+        fadeItemStart.setAttribute('aria-hidden', 'true');
+        fadeItemStart.setAttribute('tabindex', '-1');
+        const fadeItemEnd = document.createElement('div');
+        fadeItemEnd.classList.add(options.classNames.fadeItem, options.classNames.fadeItemEnd);
+        fadeItemEnd.setAttribute('aria-hidden', 'true');
+        fadeItemEnd.setAttribute('tabindex', '-1');
+        if (options.containerStart) {
+            options.containerStart.appendChild(fadeItemStart);
+        }
+        else if (options.container) {
+            options.container.appendChild(fadeItemStart);
+        }
+        if (options.containerEnd) {
+            options.containerEnd.appendChild(fadeItemEnd);
+        }
+        else if (options.container) {
+            options.container.appendChild(fadeItemEnd);
+        }
+        const hasFadeAtStart = () => {
+            return slider.container.scrollLeft > fadeItemStart.offsetWidth;
+        };
+        const fadeAtStartOpacity = () => {
+            const position = slider.container.scrollLeft;
+            if (position <= fadeItemStart.offsetWidth) {
+                return position / Math.max(fadeItemStart.offsetWidth, 1);
+            }
+            return 1;
+        };
+        const hasFadeAtEnd = () => {
+            return slider.container.scrollLeft < (slider.container.scrollWidth - slider.container.clientWidth - fadeItemEnd.offsetWidth);
+        };
+        const fadeAtEndOpacity = () => {
+            const position = slider.container.scrollLeft;
+            const maxPosition = slider.container.scrollWidth - slider.container.clientWidth;
+            const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
+            if (position >= maxFadePosition) {
+                return ((maxFadePosition - position) / Math.max(fadeItemEnd.offsetWidth, 1)) + 1;
+            }
+            return 1;
+        };
+        const update = () => {
+            fadeItemStart.setAttribute('data-has-fade', hasFadeAtStart().toString());
+            fadeItemStart.style.opacity = fadeAtStartOpacity().toString();
+            fadeItemEnd.setAttribute('data-has-fade', hasFadeAtEnd().toString());
+            fadeItemEnd.style.opacity = fadeAtEndOpacity().toString();
+        };
+        update();
+        slider.on('created', update);
+        slider.on('contentsChanged', update);
+        slider.on('containerSizeChanged', update);
+        slider.on('scrollEnd', update);
+        slider.on('scrollStart', update);
+        let requestId = 0;
+        const debouncedUpdate = () => {
+            if (requestId) {
+                window.cancelAnimationFrame(requestId);
+            }
+            requestId = window.requestAnimationFrame(() => {
+                update();
+            });
+        };
+        slider.on('scroll', debouncedUpdate);
+    };
+}
+
+export { FadePlugin as default };

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

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

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

@@ -21,6 +21,7 @@ function FullWidthPlugin(args) {
             if (options.addMarginAfter) {
                 lastSlide.style.marginRight = `${marginAmount}px`;
             }
+            slider.container.setAttribute('data-full-width-offset', marginAmount.toString());
         };
         update();
         slider.on('contentsChanged', update);

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

@@ -1 +1 @@
-const n=n=>{var t,e;return null!==(e=null===(t=n.container.parentElement)||void 0===t?void 0:t.offsetWidth)&&void 0!==e?e:window.innerWidth};function t(t){return e=>{var i,r,d;const o={targetWidth:null!==(i=null==t?void 0:t.targetWidth)&&void 0!==i?i:n,addMarginBefore:null===(r=null==t?void 0:t.addMarginBefore)||void 0===r||r,addMarginAfter:null===(d=null==t?void 0:t.addMarginAfter)||void 0===d||d},a=()=>{const n=e.container.querySelectorAll(e.options.slidesSelector);if(!n.length)return;const t=n[0],i=n[n.length-1],r=Math.floor((window.innerWidth-o.targetWidth(e))/2);o.addMarginBefore&&(t.style.marginLeft=`${r}px`),o.addMarginAfter&&(i.style.marginRight=`${r}px`)};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a)}}export{t as default};
+const t=t=>{var n,e;return null!==(e=null===(n=t.container.parentElement)||void 0===n?void 0:n.offsetWidth)&&void 0!==e?e:window.innerWidth};function n(n){return e=>{var i,r,o;const d={targetWidth:null!==(i=null==n?void 0:n.targetWidth)&&void 0!==i?i:t,addMarginBefore:null===(r=null==n?void 0:n.addMarginBefore)||void 0===r||r,addMarginAfter:null===(o=null==n?void 0:n.addMarginAfter)||void 0===o||o},a=()=>{const t=e.container.querySelectorAll(e.options.slidesSelector);if(!t.length)return;const n=t[0],i=t[t.length-1],r=Math.floor((window.innerWidth-d.targetWidth(e))/2);d.addMarginBefore&&(n.style.marginLeft=`${r}px`),d.addMarginAfter&&(i.style.marginRight=`${r}px`),e.container.setAttribute("data-full-width-offset",r.toString())};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a)}}export{n as default};

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

@@ -99,7 +99,6 @@ function ScrollIndicatorPlugin(args) {
             scrollLeft = slider.container.scrollLeft;
             // change cursor to grabbing
             scrollbarButton.style.cursor = 'grabbing';
-            slider.container.style.scrollSnapType = 'none';
             scrollbarButton.setAttribute('data-is-grabbed', 'true');
             e.preventDefault();
             e.stopPropagation();
@@ -118,7 +117,6 @@ function ScrollIndicatorPlugin(args) {
         const onInteractionUp = () => {
             isInteractionDown = false;
             scrollbarButton.style.cursor = '';
-            slider.container.style.scrollSnapType = '';
             scrollbarButton.setAttribute('data-is-grabbed', 'false');
         };
         scrollbarButton.addEventListener('mousedown', onInteractionDown);

package/docs/dist/plugins/scroll-indicator/scroll-indicator/index.min.js

@@ -1 +1 @@
-const t={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function e(e){return n=>{var o,r,a;const i={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(o=null==e?void 0:e.container)&&void 0!==o?o:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(r=n.container.getAttribute("id"))&&void 0!==r?r:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const l=document.createElement("div");l.setAttribute("class",i.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",i.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",n.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/n.details.containerWidth;return n.container.scrollLeft*t};let v=0;const f=()=>{v&&window.cancelAnimationFrame(v),v=window.requestAnimationFrame((()=>{const t=n.details.containerWidth/n.details.scrollableAreaWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const o=n.container.scrollLeft/(n.container.scrollWidth-n.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(a=n.container.parentNode)||void 0===a||a.insertBefore(s,n.container.nextSibling),f(),n.on("scroll",f),n.on("contentsChanged",f),n.on("containerSizeChanged",f),n.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?n.moveToDirection("prev"):"ArrowRight"===t.key&&n.moveToDirection("next")})),s.addEventListener("click",(t=>{const e=c.offsetWidth,o=u(),r=o+e,a=t.pageX-s.offsetLeft;a<o?n.moveToDirection("prev"):a>r&&n.moveToDirection("next")}));let b=!1,m=0,h=0;const p=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;m=e-s.offsetLeft,h=n.container.scrollLeft,c.style.cursor="grabbing",n.container.style.scrollSnapType="none",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},w=t=>{if(!b)return;t.preventDefault();const e=(t.pageX||t.touches[0].pageX)-s.offsetLeft,o=n.details.scrollableAreaWidth/s.offsetWidth,r=(e-m)*o;n.container.scrollLeft=h+r},A=()=>{b=!1,c.style.cursor="",n.container.style.scrollSnapType="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",p),c.addEventListener("touchstart",p),window.addEventListener("mousemove",w),window.addEventListener("touchmove",w,{passive:!1}),window.addEventListener("mouseup",A),window.addEventListener("touchend",A)}}export{e as default};
+const t={scrollIndicator:"overflow-slider__scroll-indicator",scrollIndicatorBar:"overflow-slider__scroll-indicator-bar",scrollIndicatorButton:"overflow-slider__scroll-indicator-button"};function e(e){return n=>{var o,r,a;const i={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(o=null==e?void 0:e.container)&&void 0!==o?o:null},s=document.createElement("div");s.setAttribute("class",i.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(r=n.container.getAttribute("id"))&&void 0!==r?r:""),s.setAttribute("aria-orientation","horizontal"),s.setAttribute("aria-valuemax","100"),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuenow","0");const l=document.createElement("div");l.setAttribute("class",i.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",i.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",n.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/n.details.containerWidth;return n.container.scrollLeft*t};let v=0;const f=()=>{v&&window.cancelAnimationFrame(v),v=window.requestAnimationFrame((()=>{const t=n.details.containerWidth/n.details.scrollableAreaWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const o=n.container.scrollLeft/(n.container.scrollWidth-n.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(o)?0:o).toString())}))};i.container?i.container.appendChild(s):null===(a=n.container.parentNode)||void 0===a||a.insertBefore(s,n.container.nextSibling),f(),n.on("scroll",f),n.on("contentsChanged",f),n.on("containerSizeChanged",f),n.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?n.moveToDirection("prev"):"ArrowRight"===t.key&&n.moveToDirection("next")})),s.addEventListener("click",(t=>{const e=c.offsetWidth,o=u(),r=o+e,a=t.pageX-s.offsetLeft;a<o?n.moveToDirection("prev"):a>r&&n.moveToDirection("next")}));let b=!1,m=0,h=0;const w=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;m=e-s.offsetLeft,h=n.container.scrollLeft,c.style.cursor="grabbing",c.setAttribute("data-is-grabbed","true"),t.preventDefault(),t.stopPropagation()},p=t=>{if(!b)return;t.preventDefault();const e=(t.pageX||t.touches[0].pageX)-s.offsetLeft,o=n.details.scrollableAreaWidth/s.offsetWidth,r=(e-m)*o;n.container.scrollLeft=h+r},A=()=>{b=!1,c.style.cursor="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",w),c.addEventListener("touchstart",w),window.addEventListener("mousemove",p),window.addEventListener("touchmove",p,{passive:!1}),window.addEventListener("mouseup",A),window.addEventListener("touchend",A)}}export{e as default};

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

@@ -27,7 +27,8 @@ function FullWidthPlugin(args) {
         };
         setActiveThumbnail();
         addClickListeners();
-        mainSlider.on('activeSlideChanged', () => {
+        // @todo debounce on scroll
+        mainSlider.on('scrollEnd', () => {
             setTimeout(() => {
                 const activeSlideIdx = mainSlider.activeSlideIdx;
                 const activeThumbnail = slider.slides[activeSlideIdx];

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

@@ -1 +1 @@
-function e(e){return i=>{const t={mainSlider:e.mainSlider}.mainSlider,l=(e=null)=>{null===e&&i.slides.length>0&&(e=i.slides[0]),null!==e&&(i.slides.forEach((e=>{e.setAttribute("aria-current","false")})),e.setAttribute("aria-current","true"))};l(),i.slides.forEach(((e,i)=>{e.addEventListener("click",(()=>{t.moveToSlide(i),l(e)}))})),t.on("activeSlideChanged",(()=>{setTimeout((()=>{const e=t.activeSlideIdx,n=i.slides[e];l(n),i.moveToSlide(e)}),50)}))}}export{e as default};
+function e(e){return i=>{const l={mainSlider:e.mainSlider}.mainSlider,t=(e=null)=>{null===e&&i.slides.length>0&&(e=i.slides[0]),null!==e&&(i.slides.forEach((e=>{e.setAttribute("aria-current","false")})),e.setAttribute("aria-current","true"))};t(),i.slides.forEach(((e,i)=>{e.addEventListener("click",(()=>{l.moveToSlide(i),t(e)}))})),l.on("scrollEnd",(()=>{setTimeout((()=>{const e=l.activeSlideIdx,r=i.slides[e];t(r),i.moveToSlide(e)}),50)}))}}export{e as default};

package/docs/index.html

@@ -69,7 +69,7 @@
 									<a href="#12" class="example-item example-item--12">12</a>
 									<a href="#13" class="example-item example-item--13">13</a>
 								</div>
-								<p style="margin-top:1.5rem;">These slides are not clickable</p>
+								<p style="margin-top:1.5rem;">These slides are not clickable.</p>
 								<div class="overflow-slider example-container example-container-1-drag-scrolling-not-clickable">
 									<div class="example-item example-item--1">1</div>
 									<div class="example-item example-item--2">2</div>
@@ -85,6 +85,22 @@
 									<div class="example-item example-item--12">12</div>
 									<div class="example-item example-item--13">13</div>
 								</div>
+								<p style="margin-top:1.5rem;">Scroll-snap emulation enabled.</p>
+								<div class="overflow-slider example-container example-container-1-drag-scrolling-scroll-snap">
+									<div class="example-item example-item--1">1</div>
+									<div class="example-item example-item--2">2</div>
+									<div class="example-item example-item--3">3</div>
+									<div class="example-item example-item--4">4</div>
+									<div class="example-item example-item--5">5</div>
+									<div class="example-item example-item--6">6</div>
+									<div class="example-item example-item--7">7</div>
+									<div class="example-item example-item--8">8</div>
+									<div class="example-item example-item--9">9</div>
+									<div class="example-item example-item--10">10</div>
+									<div class="example-item example-item--11">11</div>
+									<div class="example-item example-item--12">12</div>
+									<div class="example-item example-item--13">13</div>
+								</div>
 							</div>
 
 							<div class="entry__item">
@@ -134,13 +150,29 @@
 									<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>
 
+							<div class="entry__item">
+								<h3>Fade</h3>
+								<p>Display fade. Uses FadePlugin. Fade can be on both sides but having it only at end is more usable.</p>
+								<div class="example-container-1-fade-wrap">
+									<div class="example-container-1-fade__start"></div>
+									<div class="overflow-slider example-container example-container-1-fade">
+										<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 class="example-container-1-fade__end"></div>
+								</div>
+							</div>
 
 						</section>
 
@@ -231,8 +263,8 @@
 							</div>
 
 							<div class="entry__item">
-								<h3>Entrance and Exit Animations</h3>
-								<p>Animate slides when they appear and disappear.</p>
+								<h3>Entrance and Exit Animations (experimental)</h3>
+								<p>Animate slides when they appear and disappear. Seem to only work on Chrome.</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>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "2.0.2",
+	"version": "3.0.0",
 	"description": "Accessible slider tha works with overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",
@@ -39,6 +39,10 @@
 			"import": "./dist/plugins/thumbnails/thumbnails/index.esm.js",
 			"require": "./dist/plugins/thumbnails/thumbnails/index.min.js"
 		},
+		"./plugins/fade": {
+			"import": "./dist/plugins/fade/fade/index.esm.js",
+			"require": "./dist/plugins/fade/fade/index.min.js"
+		},
 		"./style.css": "./dist/overflow-slider.css"
 	},
 	"repository": {

package/src/core/overflow-slider.ts

@@ -21,6 +21,8 @@ export default function OverflowSlider (
 			scrollBehavior: "smooth",
 			scrollStrategy: "fullSlide",
 			slidesSelector: ":scope > *",
+			emulateScrollSnap: false,
+			emulateScrollSnapMaxThreshold: 64,
 		};
 
 		const sliderOptions = { ...defaults, ...options };

package/src/core/slider.ts

@@ -39,6 +39,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		addEventListeners();
 		setDataAttributes();
 		setCSSVariables();
+
 		if (plugins) {
 			for (const plugin of plugins) {
 				plugin(slider);
@@ -78,7 +79,96 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		resizeObserver.observe( slider.container );
 
 		// scroll event with debouncing
-		slider.container.addEventListener('scroll', () => slider.emit('scroll'));
+		let scrollTimeout: ReturnType<typeof setTimeout>;
+		let nativeScrollTimeout: ReturnType<typeof setTimeout>;
+		let programmaticScrollTimeout: ReturnType<typeof setTimeout>;
+
+		let scrollLeft = slider.container.scrollLeft;
+		let nativeScrollLeft = slider.container.scrollLeft;
+		let programmaticScrollLeft = slider.container.scrollLeft;
+
+		let isScrolling = false;
+		let isUserScrolling = false;
+		let isProgrammaticScrolling = false;
+
+		// any scroll
+		slider.container.addEventListener('scroll', () => {
+			const newScrollLeft = slider.container.scrollLeft;
+			if (scrollLeft !== newScrollLeft) {
+				if (!isScrolling) {
+					isScrolling = true;
+					slider.emit('scrollStart');
+				}
+				scrollLeft = newScrollLeft;
+				clearTimeout(scrollTimeout);
+				scrollTimeout = setTimeout(() => {
+					isScrolling = false;
+					slider.emit('scrollEnd');
+				}, 50);
+				slider.emit('scroll');
+			}
+			// keep up nativeScrolling to take into account scroll-snap
+			if ( isUserScrolling ) {
+				nativeScrollHandler();
+			}
+		});
+
+		// user initted scroll (touchmove, mouse wheel, etc.)
+		const nativeScrollHandler = () => {
+			const newScrollLeft = slider.container.scrollLeft;
+			if (nativeScrollLeft !== newScrollLeft && !isProgrammaticScrolling) {
+				if (!isUserScrolling) {
+					slider.emit('nativeScrollStart');
+					isUserScrolling = true;
+				}
+				slider.emit('nativeScroll');
+				nativeScrollLeft = newScrollLeft;
+				clearTimeout(nativeScrollTimeout);
+				nativeScrollTimeout = setTimeout(() => {
+					isUserScrolling = false;
+					slider.emit('nativeScrollEnd');
+					// update programmaticScrollLeft to match nativeScrollLeft
+					// this prevents programmaticScroll triggering with no real change to scrollLeft
+					programmaticScrollLeft = nativeScrollLeft;
+				}, 50);
+			}
+		};
+
+		slider.container.addEventListener('touchmove', nativeScrollHandler);
+		slider.container.addEventListener('mousewheel', nativeScrollHandler);
+		slider.container.addEventListener('wheel', nativeScrollHandler);
+
+		// programmatic scroll (scrollTo, etc.)
+		slider.on('programmaticScrollStart', () => {
+			isProgrammaticScrolling = true;
+		});
+
+		slider.container.addEventListener('scroll', () => {
+			const newScrollLeft = slider.container.scrollLeft;
+			if (programmaticScrollLeft !== newScrollLeft && !isUserScrolling && isProgrammaticScrolling) {
+				programmaticScrollLeft = newScrollLeft;
+				clearTimeout(programmaticScrollTimeout);
+				programmaticScrollTimeout = setTimeout(() => {
+					isProgrammaticScrolling = false;
+					slider.emit('programmaticScrollEnd');
+					// update nativeScrollLeft to match programmaticScrollLeft
+					// this prevents nativeScroll triggering with no real change to scrollLeft
+					nativeScrollLeft = programmaticScrollLeft;
+				}, 50);
+				slider.emit('programmaticScroll');
+			}
+		});
+
+		// Fix issues on scroll snapping not working on programmatic scroll (it's not smooth)
+		// by disabling scroll snap if scrolling is programmatic
+		slider.on( 'programmaticScrollStart', () => {
+			slider.container.style.scrollSnapType = 'none';
+		} );
+
+		// restore scroll snap if user scroll starts
+		slider.on( 'nativeScrollStart', () => {
+			slider.container.style.scrollSnapType = '';
+		} );
 
 		// Listen for mouse down and touch start events on the document
 		// This handles both mouse clicks and touch interactions
@@ -134,20 +224,14 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 			scrollTarget = slideEnd - containerWidth;
 		} else if (slideStart === 0) {
 			scrollTarget = 0;
+		} else {
+			scrollTarget = slideStart;
 		}
 		if (scrollTarget !== null) {
-			slider.container.style.scrollSnapType = 'none';
-			// seems like in order for scroll behavior: smooth to work, we need to wait a bit to disable scrollSnapType
 			setTimeout((scrollTarget) => {
+				slider.emit('programmaticScrollStart');
 				slider.container.scrollTo({ left: scrollTarget, behavior: behavior });
 			}, 50, scrollTarget);
-			setTimeout(() => {
-				// leave snapping off to fix issues with slide moving back on focus
-				if ( behavior == 'smooth' ) {
-					slider.container.style.scrollSnapType = '';
-				}
-
-			}, 500);
 		}
 	};
 
@@ -189,7 +273,16 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 			gapSize = secondSlideRect.left - firstSlideRect.right;
 		}
 		return gapSize;
-	}
+	};
+
+	function getLeftOffset() : number {
+		let offset = 0;
+		const fullWidthOffset = slider.container.getAttribute('data-full-width-offset');
+		if (fullWidthOffset) {
+			offset = parseInt(fullWidthOffset);
+		}
+		return offset;
+	};
 
 	function moveToDirection(direction = "prev") {
 		const scrollStrategy = slider.options.scrollStrategy;
@@ -250,17 +343,85 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 				}
 			}
 		}
+
+		// add left offset
+		const offsettedTargetScrollPosition = targetScrollPosition - getLeftOffset();
+		if (offsettedTargetScrollPosition >= 0) {
+			targetScrollPosition = offsettedTargetScrollPosition;
+		}
+
+		slider.emit('programmaticScrollStart');
 		slider.container.style.scrollBehavior = slider.options.scrollBehavior;
 		slider.container.scrollLeft = targetScrollPosition;
 		setTimeout(() => slider.container.style.scrollBehavior = '', 50);
-	}
+	};
+
+	function snapToClosestSlide(direction = "prev") {
+		const isMovingForward = direction === 'next';
+		const slideReference = [];
+		for (let i = 0; i < slider.slides.length; i++) {
+			const slide = slider.slides[i];
+			const slideWidth = slide.offsetWidth;
+			const slideStart = slide.offsetLeft;
+			const slideEnd = slideStart + slideWidth;
+			const slideMiddle = slideStart + slideWidth / 2;
+			const trigger = Math.min(slideMiddle, slideStart + slider.options.emulateScrollSnapMaxThreshold);
+			slideReference.push({
+				start: slideStart,
+				middle: slideMiddle,
+				end: slideEnd,
+				width: slideWidth,
+				trigger: trigger,
+				slide: slide,
+			});
+		}
+		let snapTarget = null;
+		const scrollPosition = slider.container.scrollLeft;
+		if (isMovingForward) {
+			for (let i = 0; i < slideReference.length; i++) {
+				const item = slideReference[i];
+				if ( i === 0 && scrollPosition <= item.trigger ) {
+					snapTarget = 0;
+					break;
+				}
+				if (slider.container.scrollLeft <= item.trigger) {
+					snapTarget = item.start;
+					break;
+				}
+			}
+		} else {
+			for (let i = slideReference.length - 1; i >= 0; i--) {
+				const item = slideReference[i];
+				if ( i === slideReference.length - 1 && scrollPosition >= item.trigger ) {
+					snapTarget = item.start;
+					break;
+				}
+				if (slider.container.scrollLeft >= item.trigger) {
+					snapTarget = item.start;
+					break;
+				}
+			}
+		}
+		if ( snapTarget !== null ) {
+			const offsettedSnapTarget = snapTarget - getLeftOffset();
+			if (offsettedSnapTarget >= 0) {
+				snapTarget = offsettedSnapTarget;
+			}
+
+			const scrollBehavior = slider.options.scrollBehavior || 'smooth';
+			slider.container.scrollTo({
+				left: snapTarget,
+				behavior: scrollBehavior as ScrollBehavior
+			});
+		}
+	};
 
 	function on(name: string, cb: any) {
 		if (!subs[name]) {
 			subs[name] = [];
 		}
 		subs[name].push(cb);
-	}
+	};
 
 	function emit(name: string) {
 		if (subs && subs[name]) {
@@ -272,12 +433,13 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		if (typeof optionCallBack === 'function') {
 				optionCallBack(slider);
 		}
-	}
+	};
 
 	slider = <Slider>{
 		emit,
 		moveToDirection,
 		moveToSlide,
+		snapToClosestSlide,
 		on,
 		options,
 	};

package/src/core/types.ts

@@ -5,6 +5,9 @@ export type Slider<O = {}, C = {}, H extends string = string> = {
 	moveToDirection: (
 		direction: 'prev' | 'next'
 	) => void
+	snapToClosestSlide: (
+		direction: 'prev' | 'next'
+	) => void
 	moveToSlide: (
 		index: number
 	) => void
@@ -21,6 +24,8 @@ export type SliderOptions = {
 	scrollBehavior: string;
 	scrollStrategy: string;
 	slidesSelector: string;
+	emulateScrollSnap: boolean;
+	emulateScrollSnapMaxThreshold: number;
 	[key: string]: any;
 }
 
@@ -38,7 +43,16 @@ export type SliderHooks =
 	| HOOK_CONTENTS_CHANGED
 	| HOOK_DETAILS_CHANGED
 	| HOOK_CONTAINER_SIZE_CHANGED
-	| HOOK_ACTIVE_SLIDE_CHANGED;
+	| HOOK_ACTIVE_SLIDE_CHANGED
+	| HOOK_SCROLL_START
+	| HOOK_SCROLL
+	| HOOK_SCROLL_END
+	| HOOK_NATIVE_SCROLL_START
+	| HOOK_NATIVE_SCROLL
+	| HOOK_NATIVE_SCROLL_END
+	| HOOK_PROGRAMMATIC_SCROLL_START
+	| HOOK_PROGRAMMATIC_SCROLL
+	| HOOK_PROGRAMMATIC_SCROLL_END;
 
 export type HOOK_CREATED = 'created';
 export type HOOK_DETAILS_CHANGED = 'detailsChanged';
@@ -46,4 +60,20 @@ export type HOOK_CONTENTS_CHANGED = 'contentsChanged';
 export type HOOK_CONTAINER_SIZE_CHANGED = 'containerSizeChanged';
 export type HOOK_ACTIVE_SLIDE_CHANGED = 'activeSlideChanged';
 
+// any type of scroll
+export type HOOK_SCROLL_START = 'scrollStart';
+export type HOOK_SCROLL = 'scroll';
+export type HOOK_SCROLL_END = 'scrollEnd';
+
+// user initted scroll (touch, mouse wheel, etc.)
+export type HOOK_NATIVE_SCROLL_START = 'nativeScrollStart';
+export type HOOK_NATIVE_SCROLL = 'nativeScroll';
+export type HOOK_NATIVE_SCROLL_END = 'nativeScrollEnd';
+
+// programmatic scroll (e.g. el.scrollTo)
+export type HOOK_PROGRAMMATIC_SCROLL_START = 'programmaticScrollStart';
+export type HOOK_PROGRAMMATIC_SCROLL = 'programmaticScroll';
+export type HOOK_PROGRAMMATIC_SCROLL_END = 'programmaticScrollEnd';
+
+
 export type SliderPlugin = (slider: Slider) => void;

package/src/overflow-slider.scss

@@ -9,11 +9,11 @@
 .overflow-slider {
 	overflow: auto;
 	width: 100%;
-	overflow: auto;
 	display: grid;
 	grid-auto-flow: column;
 	grid-template-columns: max-content;
 	max-width: max-content;
+	position: relative;
 	// hide native scrollbars
 	&::-webkit-scrollbar {
 		display: none;
@@ -32,6 +32,7 @@
 
 @import 'plugins/arrows/styles.scss';
 @import 'plugins/dots/styles.scss';
+@import 'plugins/fade/styles.scss';
 @import 'plugins/drag-scrolling/styles.scss';
 @import 'plugins/scroll-indicator/styles.scss';
 @import 'plugins/skip-links/styles.scss';