@evermade/overflow-slider 3.3.1 → 4.0.0

package/dist/plugins/core/index.d.ts

@@ -0,0 +1,75 @@
+type Slider<O = {}, C = {}, H extends string = string> = {
+    container: HTMLElement;
+    slides: HTMLElement[];
+    emit: (name: H | SliderHooks) => void;
+    moveToDirection: (direction: 'prev' | 'next') => void;
+    moveToSlideInDirection: (direction: 'prev' | 'next') => void;
+    snapToClosestSlide: (direction: 'prev' | 'next') => void;
+    moveToSlide: (index: number) => void;
+    canMoveToSlide: (index: number) => boolean;
+    getInclusiveScrollWidth: () => number;
+    getInclusiveClientWidth: () => number;
+    getScrollLeft: () => number;
+    setScrollLeft: (value: number) => void;
+    setActiveSlideIdx: () => void;
+    on: (name: H | SliderHooks, cb: SliderCallback) => void;
+    options: SliderOptions;
+    details: SliderDetails;
+    activeSlideIdx: number;
+} & C;
+type SliderCallback<O = {}, C = {}, H extends string = string> = (props: Slider<O, C, H>) => void;
+/**
+ * Recursively makes all properties of T optional.
+ * @see https://www.typescriptlang.org/docs/handbook/utility-types.html#mapped-types
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+type SliderOptions = {
+    scrollBehavior: string;
+    scrollStrategy: string;
+    slidesSelector: string;
+    emulateScrollSnap: boolean;
+    emulateScrollSnapMaxThreshold?: number;
+    cssVariableContainer: HTMLElement;
+    rtl: boolean;
+    targetWidth?: (slider: Slider) => number;
+    [key: string]: unknown;
+};
+type SliderOptionArgs = {
+    scrollBehavior?: 'smooth' | 'auto';
+    scrollStrategy?: 'fullSlide' | 'partialSlide';
+    slidesSelector?: string;
+    emulateScrollSnap?: boolean;
+    emulateScrollSnapMaxThreshold?: number;
+    cssVariableContainer?: HTMLElement;
+    rtl?: boolean;
+    [key: string]: unknown;
+};
+type SliderDetails = {
+    hasOverflow: boolean;
+    slideCount: number;
+    containerWidth: number;
+    containerHeight: number;
+    scrollableAreaWidth: number;
+    amountOfPages: number;
+    currentPage: number;
+};
+type SliderHooks = HOOK_CREATED | HOOK_CONTENTS_CHANGED | HOOK_DETAILS_CHANGED | HOOK_CONTAINER_SIZE_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;
+type HOOK_CREATED = 'created';
+type HOOK_DETAILS_CHANGED = 'detailsChanged';
+type HOOK_CONTENTS_CHANGED = 'contentsChanged';
+type HOOK_CONTAINER_SIZE_CHANGED = 'containerSizeChanged';
+type HOOK_ACTIVE_SLIDE_CHANGED = 'activeSlideChanged';
+type HOOK_SCROLL_START = 'scrollStart';
+type HOOK_SCROLL = 'scroll';
+type HOOK_SCROLL_END = 'scrollEnd';
+type HOOK_NATIVE_SCROLL_START = 'nativeScrollStart';
+type HOOK_NATIVE_SCROLL = 'nativeScroll';
+type HOOK_NATIVE_SCROLL_END = 'nativeScrollEnd';
+type HOOK_PROGRAMMATIC_SCROLL_START = 'programmaticScrollStart';
+type HOOK_PROGRAMMATIC_SCROLL = 'programmaticScroll';
+type HOOK_PROGRAMMATIC_SCROLL_END = 'programmaticScrollEnd';
+type SliderPlugin = (slider: Slider) => void;
+
+export type { DeepPartial, HOOK_ACTIVE_SLIDE_CHANGED, HOOK_CONTAINER_SIZE_CHANGED, HOOK_CONTENTS_CHANGED, HOOK_CREATED, HOOK_DETAILS_CHANGED, HOOK_NATIVE_SCROLL, HOOK_NATIVE_SCROLL_END, HOOK_NATIVE_SCROLL_START, HOOK_PROGRAMMATIC_SCROLL, HOOK_PROGRAMMATIC_SCROLL_END, HOOK_PROGRAMMATIC_SCROLL_START, HOOK_SCROLL, HOOK_SCROLL_END, HOOK_SCROLL_START, Slider, SliderCallback, SliderDetails, SliderHooks, SliderOptionArgs, SliderOptions, SliderPlugin };

package/dist/plugins/core/index.d2.ts

@@ -0,0 +1,23 @@
+import { SliderOptionArgs, SliderPlugin, SliderCallback, SliderOptions, SliderDetails } from './index.js';
+
+declare function OverflowSlider(container: HTMLElement, options?: SliderOptionArgs, plugins?: SliderPlugin[]): {
+    container: HTMLElement;
+    slides: HTMLElement[];
+    emit: (name: string) => void;
+    moveToDirection: (direction: "prev" | "next") => void;
+    moveToSlideInDirection: (direction: "prev" | "next") => void;
+    snapToClosestSlide: (direction: "prev" | "next") => void;
+    moveToSlide: (index: number) => void;
+    canMoveToSlide: (index: number) => boolean;
+    getInclusiveScrollWidth: () => number;
+    getInclusiveClientWidth: () => number;
+    getScrollLeft: () => number;
+    setScrollLeft: (value: number) => void;
+    setActiveSlideIdx: () => void;
+    on: (name: string, cb: SliderCallback) => void;
+    options: SliderOptions;
+    details: SliderDetails;
+    activeSlideIdx: number;
+} | undefined;
+
+export { OverflowSlider as default };

package/dist/plugins/dots/index.d.ts

@@ -0,0 +1,16 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type DotsOptions = {
+    texts: {
+        dotDescription: string;
+    };
+    classNames: {
+        dotsContainer: string;
+        dotsItem: string;
+    };
+    container: HTMLElement | null;
+};
+declare function DotsPlugin(args?: DeepPartial<DotsOptions>): (slider: Slider) => void;
+
+export { DotsPlugin as default };
+export type { DotsOptions };

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

@@ -1 +1 @@
-const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return o=>{var i,s;const a={texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(i=null==n?void 0:n.container)&&void 0!==i?i:null},r=document.createElement("div");r.classList.add(a.classNames.dotsContainer);let d=null;const l=()=>{r.setAttribute("data-has-content",o.details.hasOverflow.toString()),r.innerHTML="";const t=document.createElement("ul"),e=o.details.slideCount,n=o.activeSlideIdx;if(!(e<=1)){for(let o=0;o<e;o++){const i=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",a.classNames.dotsItem),s.setAttribute("aria-label",a.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-item",(o+1).toString()),i.appendChild(s),t.appendChild(i),s.addEventListener("click",(()=>c(o+1))),s.addEventListener("focus",(()=>d=o+1)),s.addEventListener("keydown",(t=>{var n;const o=r.querySelector('[aria-pressed="true"]');if(!o)return;const i=parseInt(null!==(n=o.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=i-1;if(t>0){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}if("ArrowRight"===t.key){const t=i+1;if(t<=e){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}}))}if(r.appendChild(t),d){const t=r.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},c=t=>{o.moveToSlide(t-1)};l(),a.container?a.container.appendChild(r):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(r,o.container.nextSibling),o.on("scrollEnd",l),o.on("contentsChanged",l),o.on("containerSizeChanged",l)}}export{n as default};
+const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return o=>{var i,s;const a={texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(i=null==n?void 0:n.container)&&void 0!==i?i:null},r=document.createElement("div");r.classList.add(a.classNames.dotsContainer);let d=null;const l=()=>{r.setAttribute("data-has-content",o.details.hasOverflow.toString()),r.innerHTML="";const t=document.createElement("ul"),e=o.details.slideCount,n=o.activeSlideIdx;if(!(e<=1)){for(let o=0;o<e;o++){const i=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",a.classNames.dotsItem),s.setAttribute("aria-label",a.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-item",(o+1).toString()),i.appendChild(s),t.appendChild(i),s.addEventListener("click",()=>c(o+1)),s.addEventListener("focus",()=>d=o+1),s.addEventListener("keydown",t=>{var n;const o=r.querySelector('[aria-pressed="true"]');if(!o)return;const i=parseInt(null!==(n=o.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=i-1;if(t>0){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}if("ArrowRight"===t.key){const t=i+1;if(t<=e){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}})}if(r.appendChild(t),d){const t=r.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},c=t=>{o.moveToSlide(t-1)};l(),a.container?a.container.appendChild(r):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(r,o.container.nextSibling),o.on("scrollEnd",l),o.on("contentsChanged",l),o.on("containerSizeChanged",l)}}export{n as default};

package/dist/plugins/drag-scrolling/index.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type DragScrollingOptions = {
+    draggedDistanceThatPreventsClick: number;
+};
+declare function DragScrollingPlugin(args?: DeepPartial<DragScrollingOptions>): (slider: Slider) => void;
+
+export { DragScrollingPlugin as default };
+export type { DragScrollingOptions };

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

@@ -22,7 +22,7 @@ function DragScrollingPlugin(args) {
                 return;
             }
             isMouseDown = true;
-            startX = e.pageX - slider.container.offsetLeft;
+            startX = e.pageX - slider.container.getBoundingClientRect().left;
             scrollLeft = slider.container.scrollLeft;
             // change cursor to grabbing
             slider.container.style.cursor = 'grabbing';
@@ -45,7 +45,7 @@ function DragScrollingPlugin(args) {
                 programmaticScrollStarted = true;
                 slider.emit('programmaticScrollStart');
             }
-            const x = e.pageX - slider.container.offsetLeft;
+            const x = e.pageX - slider.container.getBoundingClientRect().left;
             const walk = (x - startX);
             const newScrollLeft = scrollLeft - walk;
             mayNeedToSnap = true;

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

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

package/dist/plugins/fade/index.d.ts

@@ -0,0 +1,16 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type FadeOptions = {
+    classNames: {
+        fadeItem: string;
+        fadeItemStart: string;
+        fadeItemEnd: string;
+    };
+    container: HTMLElement | null;
+    containerStart: HTMLElement | null;
+    containerEnd: HTMLElement | null;
+};
+declare function FadePlugin(args?: DeepPartial<FadeOptions>): (slider: Slider) => void;
+
+export { FadePlugin as default };
+export type { FadeOptions };

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

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

package/dist/plugins/full-width/index.d.ts

@@ -0,0 +1,11 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type FullWidthOptions = {
+    targetWidth: (slider: Slider) => number;
+    addMarginBefore: boolean;
+    addMarginAfter: boolean;
+};
+declare function FullWidthPlugin(args?: DeepPartial<FullWidthOptions>): (slider: Slider) => void;
+
+export { FullWidthPlugin as default };
+export type { FullWidthOptions };

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

@@ -3,7 +3,7 @@ function FullWidthPlugin(args) {
     return (slider) => {
         var _a, _b, _c;
         const options = {
-            targetWidth: (_a = args === null || args === void 0 ? void 0 : args.targetWidth) !== null && _a !== void 0 ? _a : DEFAULT_TARGET_WIDTH,
+            targetWidth: (_a = args === null || args === void 0 ? void 0 : args.targetWidth) !== null && _a !== void 0 ? _a : null,
             addMarginBefore: (_b = args === null || args === void 0 ? void 0 : args.addMarginBefore) !== null && _b !== void 0 ? _b : true,
             addMarginAfter: (_c = args === null || args === void 0 ? void 0 : args.addMarginAfter) !== null && _c !== void 0 ? _c : true,
         };
@@ -14,7 +14,7 @@ function FullWidthPlugin(args) {
             }
             const firstSlide = slides[0];
             const lastSlide = slides[slides.length - 1];
-            const marginAmount = Math.floor((window.innerWidth - options.targetWidth(slider)) / 2);
+            const marginAmount = Math.floor((window.innerWidth - getTargetWidth()) / 2);
             if (options.addMarginBefore) {
                 firstSlide.style.marginInlineStart = `${marginAmount}px`;
             }
@@ -24,8 +24,19 @@ function FullWidthPlugin(args) {
             slider.container.setAttribute('data-full-width-offset', marginAmount.toString());
             setCSS();
         };
+        const getTargetWidth = () => {
+            if (typeof options.targetWidth === 'function') {
+                return options.targetWidth(slider);
+            }
+            if (typeof slider.options.targetWidth === 'function') {
+                return slider.options.targetWidth(slider);
+            }
+            return DEFAULT_TARGET_WIDTH(slider);
+        };
         const setCSS = () => {
-            slider.container.style.setProperty('--slider-container-target-width', `${options.targetWidth(slider)}px`);
+            if (typeof slider.options.targetWidth === 'function') {
+                slider.options.cssVariableContainer.style.setProperty('--slider-container-target-width', `${getTargetWidth()}px`);
+            }
         };
         update();
         slider.on('contentsChanged', update);

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

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

package/dist/plugins/infinite-scroll/index.d.ts

@@ -0,0 +1,25 @@
+import { SliderPlugin } from '../core/index.js';
+
+/**
+ * Infinite‐scroll plugin
+ *
+ * Experimental work-in-progress not available for public use yet.
+ */
+
+/**
+ * @typedef {Object} InfiniteScrollOptions
+ * @property {number} [lookAheadCount=1] Number of slides to look ahead when deciding to reparent.
+ */
+/**
+ * Creates an infinite scroll plugin for a slider that re-parents multiple slides
+ * before hitting the container edge, to avoid blank space and keep the same
+ * active slide visible.
+ *
+ * @param {InfiniteScrollOptions} [options] Plugin configuration.
+ * @returns {SliderPlugin} The configured slider plugin.
+ */
+declare function InfiniteScrollPlugin(options?: {
+    lookAheadCount?: number;
+}): SliderPlugin;
+
+export { InfiniteScrollPlugin as default };

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

@@ -0,0 +1,75 @@
+/**
+ * @typedef {Object} InfiniteScrollOptions
+ * @property {number} [lookAheadCount=1] Number of slides to look ahead when deciding to reparent.
+ */
+/**
+ * Creates an infinite scroll plugin for a slider that re-parents multiple slides
+ * before hitting the container edge, to avoid blank space and keep the same
+ * active slide visible.
+ *
+ * @param {InfiniteScrollOptions} [options] Plugin configuration.
+ * @returns {SliderPlugin} The configured slider plugin.
+ */
+function InfiniteScrollPlugin(options = {}) {
+    const { lookAheadCount = 1 } = options;
+    return (slider) => {
+        const { container, options: sliderOpts } = slider;
+        /**
+         * Sum widths of the first or last N slides for lookahead.
+         *
+         * @param {HTMLElement[]} slides List of slide elements.
+         * @param {boolean} fromEnd If true, sum last N; otherwise, first N.
+         * @returns {number} Total pixel width of N slides.
+         */
+        function getLookAheadWidth(slides, fromEnd) {
+            const slice = fromEnd
+                ? slides.slice(-lookAheadCount)
+                : slides.slice(0, lookAheadCount);
+            return slice.reduce((total, slide) => total + slide.offsetWidth, 0);
+        }
+        /**
+         * Handler for slider.scrollEnd event that re-parents slides
+         * and retains the active slide element by recalculating its
+         * new index after DOM shifts.
+         */
+        function onScroll() {
+            const activeSlideIdx = slider.activeSlideIdx;
+            const scrollLeft = slider.getScrollLeft();
+            const viewportWidth = slider.getInclusiveClientWidth();
+            const totalWidth = slider.getInclusiveScrollWidth();
+            // Grab current slide elements
+            let slides = Array.from(container.querySelectorAll(sliderOpts.slidesSelector));
+            if (slides.length === 0)
+                return;
+            // Store reference to currently active slide element
+            const activeSlideEl = slides[activeSlideIdx];
+            const aheadRight = getLookAheadWidth(slides, false);
+            const aheadLeft = getLookAheadWidth(slides, true);
+            // 🐆 Tip: Batch DOM reads/writes inside requestAnimationFrame to avoid thrashing.
+            if (scrollLeft + viewportWidth >= totalWidth - aheadRight) {
+                for (let i = 0; i < lookAheadCount && slides.length; i++) {
+                    container.append(slides.shift());
+                }
+            }
+            else if (scrollLeft <= aheadLeft) {
+                for (let i = 0; i < lookAheadCount && slides.length; i++) {
+                    container.prepend(slides.pop());
+                }
+            }
+            slider.setActiveSlideIdx();
+            // Re-query slides after DOM mutation
+            slides = Array.from(container.querySelectorAll(sliderOpts.slidesSelector));
+            const newIndex = slides.indexOf(activeSlideEl);
+            slides[newIndex];
+            if (newIndex >= 0 && slider.canMoveToSlide(newIndex)) {
+                slider.moveToSlide(newIndex);
+            }
+            else {
+                slider.snapToClosestSlide('next');
+            }
+        }
+        slider.on('scrollEnd', onScroll);
+    };
+}
+
+export { InfiniteScrollPlugin as default };

package/dist/plugins/infinite-scroll/index.min.js

@@ -0,0 +1 @@
+function e(e={}){const{lookAheadCount:t=1}=e;return e=>{const{container:l,options:o}=e;function n(e,l){return(l?e.slice(-t):e.slice(0,t)).reduce((e,t)=>e+t.offsetWidth,0)}e.on("scrollEnd",function(){const i=e.activeSlideIdx,r=e.getScrollLeft(),c=e.getInclusiveClientWidth(),s=e.getInclusiveScrollWidth();let d=Array.from(l.querySelectorAll(o.slidesSelector));if(0===d.length)return;const f=d[i],u=n(d,!1),S=n(d,!0);if(r+c>=s-u)for(let e=0;e<t&&d.length;e++)l.append(d.shift());else if(r<=S)for(let e=0;e<t&&d.length;e++)l.prepend(d.pop());e.setActiveSlideIdx(),d=Array.from(l.querySelectorAll(o.slidesSelector));const a=d.indexOf(f);d[a],a>=0&&e.canMoveToSlide(a)?e.moveToSlide(a):e.snapToClosestSlide("next")})}}export{e as default};

package/dist/plugins/scroll-indicator/index.d.ts

@@ -0,0 +1,14 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type ScrollIndicatorOptions = {
+    classNames: {
+        scrollIndicator: string;
+        scrollIndicatorBar: string;
+        scrollIndicatorButton: string;
+    };
+    container: HTMLElement | null;
+};
+declare function ScrollIndicatorPlugin(args?: DeepPartial<ScrollIndicatorOptions>): (slider: Slider) => void;
+
+export { ScrollIndicatorPlugin as default };
+export type { ScrollIndicatorOptions };

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

@@ -84,11 +84,13 @@ function ScrollIndicatorPlugin(args) {
             const scrollbarButtonWidth = scrollbarButton.offsetWidth;
             const scrollbarButtonLeft = getScrollbarButtonLeftOffset();
             const scrollbarButtonRight = scrollbarButtonLeft + scrollbarButtonWidth;
-            const clickX = e.pageX - Math.abs(scrollbarContainer.offsetLeft);
+            const clickX = e.pageX - scrollbarContainer.getBoundingClientRect().left;
             if (Math.floor(clickX) < Math.floor(scrollbarButtonLeft)) {
+                console.log('move left');
                 slider.moveToDirection(slider.options.rtl ? 'next' : 'prev');
             }
             else if (Math.floor(clickX) > Math.floor(scrollbarButtonRight)) {
+                console.log('move right');
                 slider.moveToDirection(slider.options.rtl ? 'prev' : 'next');
             }
         });

package/dist/plugins/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 o=>{var r,n,i;const a={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(r=null==e?void 0:e.container)&&void 0!==r?r:null},s=document.createElement("div");s.setAttribute("class",a.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(n=o.container.getAttribute("id"))&&void 0!==n?n:""),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",a.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",a.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",o.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/o.details.containerWidth,e=o.getScrollLeft()*t;return o.options.rtl?l.offsetWidth-c.offsetWidth-e:e};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame((()=>{const t=o.details.containerWidth/o.container.scrollWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const r=o.getScrollLeft()/(o.getInclusiveScrollWidth()-o.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(r)?0:r).toString())}))};a.container?a.container.appendChild(s):null===(i=o.container.parentNode)||void 0===i||i.insertBefore(s,o.container.nextSibling),v(),o.on("scroll",v),o.on("contentsChanged",v),o.on("containerSizeChanged",v),o.on("detailsChanged",d),s.addEventListener("keydown",(t=>{"ArrowLeft"===t.key?o.moveToDirection("prev"):"ArrowRight"===t.key&&o.moveToDirection("next")}));let b=!1,h=0,m=o.getScrollLeft();s.addEventListener("click",(t=>{if(t.target==c)return;const e=c.offsetWidth,r=u(),n=r+e,i=t.pageX-Math.abs(s.offsetLeft);Math.floor(i)<Math.floor(r)?o.moveToDirection(o.options.rtl?"next":"prev"):Math.floor(i)>Math.floor(n)&&o.moveToDirection(o.options.rtl?"prev":"next")}));const g=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;h=e-s.offsetLeft,m=o.getScrollLeft(),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,r=o.details.scrollableAreaWidth/s.offsetWidth,n=(e-h)*r,i=o.options.rtl?m-n:m+n;o.setScrollLeft(i)},w=()=>{b=!1,c.style.cursor="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",g),c.addEventListener("touchstart",g),window.addEventListener("mousemove",p),window.addEventListener("touchmove",p,{passive:!1}),window.addEventListener("mouseup",w),window.addEventListener("touchend",w)}}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 o=>{var n,r,i;const a={classNames:Object.assign(Object.assign({},t),(null==e?void 0:e.classNames)||[]),container:null!==(n=null==e?void 0:e.container)&&void 0!==n?n:null},s=document.createElement("div");s.setAttribute("class",a.classNames.scrollIndicator),s.setAttribute("tabindex","0"),s.setAttribute("role","scrollbar"),s.setAttribute("aria-controls",null!==(r=o.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",a.classNames.scrollIndicatorBar);const c=document.createElement("div");c.setAttribute("class",a.classNames.scrollIndicatorButton),c.setAttribute("data-is-grabbed","false"),l.appendChild(c),s.appendChild(l);const d=()=>{s.setAttribute("data-has-overflow",o.details.hasOverflow.toString())};d();const u=()=>{const t=c.offsetWidth/o.details.containerWidth,e=o.getScrollLeft()*t;return o.options.rtl?l.offsetWidth-c.offsetWidth-e:e};let f=0;const v=()=>{f&&window.cancelAnimationFrame(f),f=window.requestAnimationFrame(()=>{const t=o.details.containerWidth/o.container.scrollWidth*100,e=u();c.style.width=`${t}%`,c.style.transform=`translateX(${e}px)`;const n=o.getScrollLeft()/(o.getInclusiveScrollWidth()-o.container.offsetWidth)*100;s.setAttribute("aria-valuenow",Math.round(Number.isNaN(n)?0:n).toString())})};a.container?a.container.appendChild(s):null===(i=o.container.parentNode)||void 0===i||i.insertBefore(s,o.container.nextSibling),v(),o.on("scroll",v),o.on("contentsChanged",v),o.on("containerSizeChanged",v),o.on("detailsChanged",d),s.addEventListener("keydown",t=>{"ArrowLeft"===t.key?o.moveToDirection("prev"):"ArrowRight"===t.key&&o.moveToDirection("next")});let b=!1,h=0,g=o.getScrollLeft();s.addEventListener("click",t=>{if(t.target==c)return;const e=c.offsetWidth,n=u(),r=n+e,i=t.pageX-s.getBoundingClientRect().left;Math.floor(i)<Math.floor(n)?(console.log("move left"),o.moveToDirection(o.options.rtl?"next":"prev")):Math.floor(i)>Math.floor(r)&&(console.log("move right"),o.moveToDirection(o.options.rtl?"prev":"next"))});const m=t=>{b=!0;const e=t.pageX||t.touches[0].pageX;h=e-s.offsetLeft,g=o.getScrollLeft(),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,n=o.details.scrollableAreaWidth/s.offsetWidth,r=(e-h)*n,i=o.options.rtl?g-r:g+r;o.setScrollLeft(i)},w=()=>{b=!1,c.style.cursor="",c.setAttribute("data-is-grabbed","false")};c.addEventListener("mousedown",m),c.addEventListener("touchstart",m),window.addEventListener("mousemove",p),window.addEventListener("touchmove",p,{passive:!1}),window.addEventListener("mouseup",w),window.addEventListener("touchend",w)}}export{e as default};

package/dist/plugins/skip-links/index.d.ts

@@ -0,0 +1,17 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type SkipLinkOptions = {
+    texts: {
+        skipList: string;
+    };
+    classNames: {
+        skipLink: string;
+        skipLinkTarget: string;
+    };
+    containerBefore: HTMLElement | null;
+    containerAfter: HTMLElement | null;
+};
+declare function SkipLinksPlugin(args?: DeepPartial<SkipLinkOptions>): (slider: Slider) => void;
+
+export { SkipLinksPlugin as default };
+export type { SkipLinkOptions };

package/dist/plugins/skip-links/index.esm.js

@@ -1,4 +1,10 @@
-import { generateId } from '../../core/utils.esm.js';
+function generateId(prefix, i = 1) {
+    const id = `${prefix}-${i}`;
+    if (document.getElementById(id)) {
+        return generateId(prefix, i + 1);
+    }
+    return id;
+}
 
 const DEFAULT_TEXTS = {
     skipList: 'Skip list'

package/dist/plugins/skip-links/index.min.js

@@ -1 +1 @@
-import{generateId as e}from"../../core/utils.min.js";const t={skipList:"Skip list"},n={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};function i(i){return r=>{var o,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},t),(null==i?void 0:i.texts)||[]),classNames:Object.assign(Object.assign({},n),(null==i?void 0:i.classNames)||[]),containerBefore:null!==(o=null==i?void 0:i.containerAfter)&&void 0!==o?o:null,containerAfter:null!==(s=null==i?void 0:i.containerAfter)&&void 0!==s?s:null},f=e("overflow-slider-skip"),p=document.createElement("a");p.setAttribute("href",`#${f}`),p.textContent=u.texts.skipList,p.classList.add(u.classNames.skipLink);const v=document.createElement("div");v.setAttribute("id",f),v.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(p,u.containerBefore):null===(l=r.container.parentNode)||void 0===l||l.insertBefore(p,r.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(v,u.containerAfter.nextSibling):null===(d=r.container.parentNode)||void 0===d||d.insertBefore(v,r.container.nextSibling)}}export{i as default};
+function e(t,n=1){const i=`${t}-${n}`;return document.getElementById(i)?e(t,n+1):i}const t={skipList:"Skip list"},n={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};function i(i){return r=>{var o,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},t),(null==i?void 0:i.texts)||[]),classNames:Object.assign(Object.assign({},n),(null==i?void 0:i.classNames)||[]),containerBefore:null!==(o=null==i?void 0:i.containerAfter)&&void 0!==o?o:null,containerAfter:null!==(s=null==i?void 0:i.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=r.container.parentNode)||void 0===l||l.insertBefore(v,r.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(p,u.containerAfter.nextSibling):null===(d=r.container.parentNode)||void 0===d||d.insertBefore(p,r.container.nextSibling)}}export{i as default};

package/dist/plugins/thumbnails/index.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, Slider } from '../core/index.js';
+
+type ThumbnailsOptions = {
+    mainSlider: Slider;
+};
+declare function FullWidthPlugin(args: DeepPartial<ThumbnailsOptions>): (slider: Slider) => void;
+
+export { FullWidthPlugin as default };
+export type { ThumbnailsOptions };

package/dist/plugins/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("scrollEnd",(()=>{setTimeout((()=>{const e=t.activeSlideIdx;if(i.activeSlideIdx===e)return;const r=i.slides[e];l(r),i.moveToSlide(e)}),50)}))}}export{e as default};
+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("scrollEnd",()=>{setTimeout(()=>{const e=t.activeSlideIdx;if(i.activeSlideIdx===e)return;const r=i.slides[e];l(r),i.moveToSlide(e)},50)})}}export{e as default};

package/dist/{core/utils.min.js → utils-Sxwcz8zp.js}

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

package/dist/{core/utils.esm.js → utils-ayDxlweP.js}

@@ -34,4 +34,4 @@ function getOutermostChildrenEdgeMarginSum(el) {
     return firstChildMarginLeft + lastChildMarginRight;
 }
 
-export { generateId, getOutermostChildrenEdgeMarginSum, objectsAreEqual };
+export { getOutermostChildrenEdgeMarginSum as a, generateId as g, objectsAreEqual as o };

package/docs/assets/demo.css

@@ -370,6 +370,77 @@ h3:before {
 	gap: 1rem;
 }
 
+.overflow-slider__autoplay {
+	--autoplay-bg-color: #e5e5e5;
+	--autoplay-progress-color: #303030;
+	--autoplay-icon-color: #303030;
+	cursor: pointer;
+	border-radius: 50%;
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.5rem;
+	height: 2.5rem;
+	border: none;
+	background: var(--autoplay-bg-color);
+	color: var(--autoplay-icon-color);
+	/* ensure the pseudo-element paints on its own layer */
+	will-change: background;
+}
+
+.overflow-slider__autoplay::before {
+	content: "";
+
+	position: absolute;
+	inset: 0;
+	border-radius: 50%;
+	/* draw the circular progress using conic-gradient */
+	background:
+		conic-gradient(
+			var(--autoplay-progress-color) calc(var(--autoplay-delay-progress) * 1%),
+			transparent 0
+		);
+	/* rotate so “0%” starts at top */
+	transform: rotate(-90deg);
+}
+
+.overflow-slider__autoplay::after {
+	content: "";
+	position: absolute;
+	border-radius: 50%;
+	left: 10%;
+	width: 80%;
+	height: 80%;
+	top: 10%;
+	background: var(--autoplay-bg-color);
+}
+
+.overflow-slider__autoplay:hover,
+.overflow-slider__autoplay:focus {
+	background: var(--color-primary);
+}
+
+.overflow-slider__autoplay:hover::before,
+.overflow-slider__autoplay:focus::before {
+	background: transparent;
+}
+
+.overflow-slider__autoplay:hover::after,
+.overflow-slider__autoplay:focus::after {
+	background: transparent;
+}
+
+.overflow-slider__autoplay svg {
+	position: absolute;
+	z-index: 2;
+	width: 1.25rem;
+	height: 1.25rem;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
 .example-item {
 	aspect-ratio: 3/4;
 	width: 240px;
@@ -451,11 +522,21 @@ h3:before {
 	grid-template-columns: repeat(var(--slider-slides-count, 1), var(--slider-container-width, 900px));
 }
 
+.example-container-1-autoplay-wrap-view,
+.example-container-1-autoplay-wrap-slide {
+	margin-top: 16px;
+}
+
 .example-container-1-dots .example-item {
 	aspect-ratio: 16/7;
 	width: 100%;
 }
 
+.example-container-1-infinite > * {
+	width: var(--slider-container-width, 400px);
+	aspect-ratio: 16/8;
+}
+
 .example-container-1-fade-wrap {
 	position: relative;
 }
@@ -683,3 +764,37 @@ h3:before {
 	background: var(--color-grey-800);
 	color: #fff;
 }
+
+/* ===========================================================================
+  Example 4: Hero
+=========================================================================== */
+
+.example-container-4-hero__wrapper {
+	position: relative;
+}
+
+.example-container-4-hero {
+	--slider-gap: 0;
+	gap: 0;
+}
+
+.example-container-4-hero > * {
+	width: var(--slider-container-width, 900px);
+	aspect-ratio: 16/9;
+}
+
+.example-container-4-hero__autoplay {
+	position: absolute;
+	bottom: 1rem;
+	right: 1rem;
+}
+
+.example-container-4-hero__dots {
+	z-index: 10;
+	position: absolute;
+	bottom: 1rem;
+	left: 50%;
+	transform: translateX(-50%);
+	--overflow-slider-dot-inactive-color: rgba(0, 0, 0, 0.2);
+	--overflow-slider-dot-active-color: rgba(0, 0, 0, .8);
+}