@evermade/overflow-slider 3.3.1 → 4.0.0

package/src/core/slider.ts

@@ -1,8 +1,8 @@
-import { Slider, SliderOptions, SliderPlugin, SliderCallback } from './types';
+import { Slider, SliderOptions, SliderOptionArgs, SliderPlugin, SliderCallback } from './types';
 import details from './details';
 import { generateId, objectsAreEqual, getOutermostChildrenEdgeMarginSum } from './utils';
 
-export default function Slider( container: HTMLElement, options : SliderOptions, plugins? : SliderPlugin[] ) {
+export default function Slider( container: HTMLElement, options : SliderOptionArgs, plugins? : SliderPlugin[] ) {
 	let slider: Slider;
 	let subs: { [key: string]: SliderCallback[] } = {};
 
@@ -65,7 +65,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 	};
 
 	function setSlides() {
-		slider.slides = Array.from(slider.container.querySelectorAll(slider.options.slidesSelector));
+		slider.slides = Array.from(slider.container.querySelectorAll(slider.options.slidesSelector)) as HTMLElement[];
 	}
 
 	function addEventListeners() {
@@ -200,9 +200,14 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 	};
 
 	function setCSSVariables() {
-		slider.container.style.setProperty('--slider-container-width', `${slider.details.containerWidth}px`);
-		slider.container.style.setProperty('--slider-scrollable-width', `${slider.details.scrollableAreaWidth}px`);
-		slider.container.style.setProperty('--slider-slides-count', `${slider.details.slideCount}`);
+		slider.options.cssVariableContainer.style.setProperty('--slider-container-height', `${slider.details.containerHeight}px`);
+		slider.options.cssVariableContainer.style.setProperty('--slider-container-width', `${slider.details.containerWidth}px`);
+		slider.options.cssVariableContainer.style.setProperty('--slider-scrollable-width', `${slider.details.scrollableAreaWidth}px`);
+		slider.options.cssVariableContainer.style.setProperty('--slider-slides-count', `${slider.details.slideCount}`);
+		slider.options.cssVariableContainer.style.setProperty('--slider-x-offset', `${getLeftOffset()}px`);
+		if (typeof slider.options.targetWidth  === 'function') {
+	 		slider.options.cssVariableContainer.style.setProperty('--slider-container-target-width', `${slider.options.targetWidth(slider)}px`);
+		}
 	}
 
 	function setDataAttributes() {
@@ -305,6 +310,41 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		}
 	};
 
+	function canMoveToSlide( idx: number ) : boolean {
+		if ( idx < 0 || idx >= slider.slides.length ) {
+			return false;
+		}
+		if (idx === slider.activeSlideIdx) {
+			return false;
+		}
+		const direction = slider.options.rtl ? (idx < slider.activeSlideIdx ? 'backwards' : 'forwards') : (idx < slider.activeSlideIdx ? 'backwards' : 'forwards');
+
+		// check if the slide is already in view
+		const sliderRect = slider.container.getBoundingClientRect();
+		const scrollLeft = slider.getScrollLeft();
+		const containerWidth = slider.details.containerWidth;
+
+		const hasUpcomingContent = slider.slides.some((s, i) => {
+			if (i === slider.activeSlideIdx) {
+				return false; // skip the slide we are checking
+			}
+			const sRect = s.getBoundingClientRect();
+			const sStart = sRect.left - sliderRect.left + scrollLeft;
+			const sEnd = sStart + sRect.width;
+			if (slider.options.rtl) {
+				if ( scrollLeft === 0 && slider.details.hasOverflow ) {
+					return true;
+				}
+				return (direction === 'forwards' && i > slider.activeSlideIdx && Math.floor(sStart) < Math.floor(scrollLeft)) ||
+					(direction === 'backwards' && i < slider.activeSlideIdx && Math.floor(sEnd) > Math.floor(scrollLeft + containerWidth));
+			} else {
+				return (direction === 'forwards' && i > slider.activeSlideIdx && Math.floor(sEnd) > Math.floor(scrollLeft + containerWidth)) ||
+					(direction === 'backwards' && i < slider.activeSlideIdx && Math.floor(sStart) < Math.floor(scrollLeft));
+			}
+		});
+		return hasUpcomingContent;
+	}
+
 	function moveToSlideInDirection( direction: 'prev' | 'next' ) {
 		const activeSlideIdx = slider.activeSlideIdx;
 		if (direction === 'prev') {
@@ -437,68 +477,53 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 	};
 
 	function snapToClosestSlide(direction = "prev") {
-		const isMovingForward = slider.options.rtl ? direction === 'prev' : direction === 'next';
-		const slideReference = [];
-		for (let i = 0; i < slider.slides.length; i++) {
-			const slide = slider.slides[i];
-			const slideWidth = slide.offsetWidth;
-			const slideStart = slider.options.rtl ? Math.abs( slide.offsetLeft + slideWidth - slider.details.containerWidth ) : slide.offsetLeft;
-			const slideEnd = slideStart + slideWidth;
-			const slideMiddle = slideStart + slideWidth / 2;
-			const trigger = Math.min(slideMiddle, slideStart + slider.options.emulateScrollSnapMaxThreshold);
-			slideReference.push({
-				start: slideStart,
-				middle: slideMiddle,
-				end: slideEnd,
-				width: slideWidth,
-				trigger: trigger,
-				slide: slide,
-				// debug
-				offSetleft: slide.offsetLeft,
-				rect: slide.getBoundingClientRect(),
-			});
-		}
-		let snapTarget = null;
-		const scrollPosition = getScrollLeft();
-		if (isMovingForward) {
-			for (let i = 0; i < slideReference.length; i++) {
-				const item = slideReference[i];
-				if ( i === 0 && Math.floor( scrollPosition ) <= Math.floor( item.trigger ) ) {
-					snapTarget = 0;
-					break;
-				}
-				if ( Math.floor( getScrollLeft() ) <= Math.floor( item.trigger ) ) {
-					snapTarget = item.start;
-					break;
-				}
-			}
+		const { slides, options, container } = slider;
+		const {
+			rtl,
+			emulateScrollSnapMaxThreshold = 10,
+			scrollBehavior = 'smooth',
+		} = options;
+
+		const isForward = rtl ? direction === 'prev' : direction === 'next';
+		const scrollPos = getScrollLeft();
+
+		// Get container rect once (includes any CSS transforms)
+		const containerRect = container.getBoundingClientRect();
+		const factor = rtl ? -1 : 1;
+
+		// Build slide metadata
+		const slideData = [...slides].map(slide => {
+			const { width } = slide.getBoundingClientRect();
+			const slideRect = slide.getBoundingClientRect();
+
+			// position relative to container’s left edge
+			const relativeStart = (slideRect.left - containerRect.left) + scrollPos;
+			const triggerPoint = Math.min(
+				relativeStart + width / 2,
+				relativeStart + emulateScrollSnapMaxThreshold
+			);
+
+			return { start: relativeStart, trigger: triggerPoint };
+		});
+
+		// Pick the target start based on drag direction
+		let targetStart = null;
+
+		if (isForward) {
+			const found = slideData.find(item => scrollPos <= item.trigger);
+			targetStart = found?.start ?? null;
 		} else {
-			for (let i = slideReference.length - 1; i >= 0; i--) {
-				const item = slideReference[i];
-				if ( i === slideReference.length - 1 && Math.floor( scrollPosition ) >= Math.floor( item.trigger ) ) {
-					snapTarget = item.start;
-					break;
-				}
-				if ( Math.floor( getScrollLeft() ) >= Math.floor( item.trigger ) ) {
-					snapTarget = item.start;
-					break;
-				}
-			}
+			const found = [...slideData].reverse().find(item => scrollPos >= item.trigger);
+			targetStart = found?.start ?? null;
 		}
-		if ( snapTarget !== null ) {
-			const offsettedSnapTarget = snapTarget - getLeftOffset();
-			if ( Math.floor( offsettedSnapTarget ) >= 0 ) {
-				snapTarget = offsettedSnapTarget;
-			}
 
-			const scrollBehavior = slider.options.scrollBehavior || 'smooth';
+		if (targetStart == null) return;
 
-			slider.container.scrollTo({
-				left: slider.options.rtl ? -snapTarget : snapTarget,
-				behavior: scrollBehavior as ScrollBehavior
-			});
-		}
-	};
+		// Clamp to zero and apply RTL factor
+		const finalLeft = Math.max(0, Math.floor(targetStart)) * factor;
+
+		container.scrollTo({ left: finalLeft, behavior: scrollBehavior as ScrollBehavior });
+	}
 
 	function on(name: string, cb: SliderCallback) {
 		if (!subs[name]) {
@@ -524,6 +549,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 	slider = <Slider>{
 		emit,
 		moveToDirection,
+		canMoveToSlide,
 		moveToSlide,
 		moveToSlideInDirection,
 		snapToClosestSlide,
@@ -531,6 +557,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		getInclusiveClientWidth,
 		getScrollLeft,
 		setScrollLeft,
+		setActiveSlideIdx,
 		on,
 		options,
 	};

package/src/core/types.ts

@@ -14,10 +14,14 @@ export type Slider<O = {}, C = {}, H extends string = string> = {
 	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
@@ -31,20 +35,44 @@ export 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
+ */
+export type DeepPartial<T> = {
+	[P in keyof T]?: T[P] extends object
+		? DeepPartial<T[P]>
+		: T[P]
+};
+
 export type SliderOptions = {
 	scrollBehavior: string;
 	scrollStrategy: string;
 	slidesSelector: string;
 	emulateScrollSnap: boolean;
-	emulateScrollSnapMaxThreshold: number;
+	emulateScrollSnapMaxThreshold?: number;
+	cssVariableContainer: HTMLElement;
 	rtl: boolean;
+	targetWidth?: ( slider: Slider ) => number,
 	[key: string]: unknown;
 }
 
+export type SliderOptionArgs = {
+ scrollBehavior?: 'smooth' | 'auto';
+ scrollStrategy?: 'fullSlide' | 'partialSlide';
+ slidesSelector?: string;
+ emulateScrollSnap?: boolean;
+ emulateScrollSnapMaxThreshold?: number;
+ cssVariableContainer?: HTMLElement;
+ rtl?: boolean;
+ [key: string]: unknown;
+}
+
 export type SliderDetails = {
 	hasOverflow: boolean;
 	slideCount: number;
 	containerWidth: number;
+	containerHeight: number;
 	scrollableAreaWidth: number;
 	amountOfPages: number;
 	currentPage: number;

package/src/mixins.scss

@@ -0,0 +1,14 @@
+/**
+ * Overflow Slider mixins
+ */
+
+@mixin os-slide-width($slidesPerView: 3, $gap: var(--slide-gap, 1rem), $containerWidth: var(--slider-container-width, 90vw)) {
+	width: calc( ( #{$containerWidth} / #{$slidesPerView} ) - calc( #{$slidesPerView} - 1 ) / #{$slidesPerView} * #{$gap});
+}
+
+@mixin os-break-out-full-width {
+	position: relative;
+	left: 50%;
+	width: 100vw;
+	margin-left: -50vw;
+}

package/src/overflow-slider.scss

@@ -2,6 +2,18 @@
  * Overflow Slider
  */
 
+/* --------------------------------------------------------------
+# Plugins
+-------------------------------------------------------------- */
+
+@forward 'plugins/arrows/styles.scss';
+@forward 'plugins/autoplay/styles.scss';
+@forward 'plugins/dots/styles.scss';
+@forward 'plugins/fade/styles.scss';
+@forward 'plugins/drag-scrolling/styles.scss';
+@forward 'plugins/scroll-indicator/styles.scss';
+@forward 'plugins/skip-links/styles.scss';
+
 /* --------------------------------------------------------------
 # Core
 -------------------------------------------------------------- */
@@ -26,16 +38,6 @@
 	}
 }
 
-/* --------------------------------------------------------------
-# Plugins
--------------------------------------------------------------- */
-
-@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';
 
 
 

package/src/plugins/arrows/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 const DEFAULT_TEXTS = {
 	buttonPrevious: 'Previous items',
@@ -38,7 +38,7 @@ export type ArrowsOptions = {
 	movementType: ArrowsMovementTypes,
 };
 
-export default function ArrowsPlugin( args: { [key: string]: unknown } ) {
+export default function ArrowsPlugin( args?: DeepPartial<ArrowsOptions> ) {
 	return ( slider: Slider ) => {
 
 		const options = <ArrowsOptions>{

package/src/plugins/autoplay/index.ts

@@ -0,0 +1,276 @@
+import { Slider, DeepPartial } from '../../core/types';
+
+export type AutoplayMovementTypes = 'view' | 'slide';
+
+export type AutoplayPluginOptions = {
+	/** Delay between auto-scrolls in milliseconds */
+	delayInMs: number;
+	/** Translatable button texts */
+	texts: {
+		play: string;
+		pause: string;
+	};
+	/** Icons (SVG/html string) for play/pause states */
+	icons: {
+		play: string;
+		pause: string;
+	};
+	/** CSS class names */
+	classNames: {
+		autoplayButton: string;
+	};
+	/** Container in which to insert controls (defaults before slider) */
+	container: HTMLElement | null;
+	/** Whether to advance by view or by slide */
+	movementType: AutoplayMovementTypes;
+	stopOnHover: boolean;
+	loop: boolean;
+};
+
+export type AutoplayPluginArgs = DeepPartial<AutoplayPluginOptions>;
+
+/**
+ * Autoplay plugin for Overflow Slider
+ *
+ * Loops slides infinitely, always respects reduced-motion,
+ * provides Play/Pause controls, and shows a progress bar.
+ *
+ * @param {AutoplayPluginArgs} args
+ * @returns {(slider: Slider) => void}
+ */
+export default function AutoplayPlugin( args?: AutoplayPluginArgs ) {
+	return ( slider: Slider ) => {
+		const opts = <AutoplayPluginOptions>{
+			delayInMs: args?.delayInMs ?? 5000,
+			texts: {
+				play:  args?.texts?.play  ?? 'Play',
+				pause: args?.texts?.pause ?? 'Pause',
+			},
+			icons: {
+				play:  args?.icons?.play  ??
+					'<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/></svg>',
+				pause: args?.icons?.pause ??
+					'<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5"/></svg>',
+			},
+			container: args?.container ?? null,
+			classNames: {
+				autoplayButton: args?.classNames?.autoplayButton ?? 'overflow-slider__autoplay',
+			},
+			movementType: args?.movementType ?? 'view',
+			stopOnHover: args?.stopOnHover ?? true,
+			loop: args?.loop ?? true,
+		};
+
+		let intervalId: number | null = null;
+		let rafId: number | null      = null;
+		let startTime: number         = 0;
+		let manualPause: boolean      = false;
+
+		// a11y: respect reduced motion preference
+		if ( window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) {
+			return;
+		}
+
+		/**
+		 * Create Play/Pause button and insert into DOM
+		 * @private
+		 * @returns {HTMLButtonElement}
+		 */
+		const createButton = (): HTMLButtonElement => {
+			const btn = document.createElement( 'button' );
+			btn.type = 'button';
+			btn.className = opts.classNames.autoplayButton;
+			setButtonPaused( btn );
+			// initialize CSS var
+			btn.style.setProperty( '--autoplay-delay-progress', '0' );
+
+			if ( opts.container ) {
+				opts.container.appendChild( btn );
+			} else {
+				slider.container.parentElement?.insertBefore( btn, slider.container );
+			}
+
+			// click toggles manual play/pause
+			btn.addEventListener( 'click', () => {
+				if ( intervalId ) {
+					manualPause = true;
+					stop();
+				} else {
+					manualPause = false;
+					start();
+				}
+			} );
+
+			// always pause on hover/focus (but don't clear manualPause)
+			const pausableInteractionStart = [ 'focusin' ];
+			if ( opts.stopOnHover ) {
+				pausableInteractionStart.push( 'mouseenter');
+			}
+
+			const pausableInteractionEnd = [ 'focusout' ];
+			if ( opts.stopOnHover ) {
+				pausableInteractionEnd.push( 'mouseleave' );
+			}
+
+			pausableInteractionStart.forEach( evt =>
+				slider.container.addEventListener( evt, () => {
+					if ( intervalId ) stop();
+				} )
+			);
+			pausableInteractionEnd.forEach( evt =>
+				slider.container.addEventListener( evt, () => {
+					if ( !intervalId && !manualPause ) start();
+				} )
+			);
+
+			return btn;
+		};
+
+		const btn = createButton();
+
+		/**
+		 * Compute next slide, reset timer
+		 *
+		 * @private
+		 */
+		function scrollNext(): void {
+			if ( opts.movementType === 'view' ) {
+				const scrollLeft = slider.getScrollLeft();
+				const viewWidth  = slider.getInclusiveClientWidth();
+				const totalWidth = slider.getInclusiveScrollWidth();
+				if ( scrollLeft + viewWidth >= totalWidth ) {
+					if (opts.loop) {
+						slider.moveToSlide( 0 );
+					} else {
+						stop();
+						btn.style.setProperty( '--autoplay-delay-progress', '0' );
+					}
+				} else {
+					slider.moveToDirection( 'next' );
+				}
+			} else {
+				const nextIdx = ( slider.activeSlideIdx + 1 ) % slider.details.slideCount;
+				if ( slider.canMoveToSlide( nextIdx ) ) {
+					slider.moveToSlide( nextIdx );
+				} else {
+					if (opts.loop) {
+						slider.moveToSlide( 0 );
+					} else {
+						stop();
+						btn.style.setProperty( '--autoplay-delay-progress', '0' );
+					}
+				}
+			}
+			// reset progress timer
+			startTime = performance.now();
+
+			// restart the progress loop
+			if (rafId !== null) {
+				cancelAnimationFrame(rafId);
+			}
+			tick();
+		}
+
+		/**
+		 * Animation-loop to update CSS var
+		 *
+		 * @private
+		 */
+		function tick(): void {
+			const now = performance.now();
+			const pct = Math.min( (( now - startTime ) / opts.delayInMs) * 100, 100 );
+			btn.style.setProperty( '--autoplay-delay-progress', `${Math.round( pct )}` );
+
+			if ( pct < 100 ) {
+				rafId = requestAnimationFrame( tick );
+			}
+		}
+
+		/**
+		 * Start autoplay
+		 *
+		 * @returns {void}
+		 */
+		function start(): void {
+			if ( intervalId ) clearInterval( intervalId );
+			if ( rafId )       cancelAnimationFrame( rafId );
+
+			setButtonPlaying( btn );
+
+			// reset timer and animate progress
+			startTime = performance.now();
+			tick();
+
+			intervalId = window.setInterval( scrollNext, opts.delayInMs );
+		}
+
+		/**
+		 * Stop autoplay
+		 *
+		 * @param {boolean} [fromManual=false] Whether this stop was user‐initiated
+		 * @returns {void}
+		 */
+		function stop( fromManual = false ): void {
+			if ( intervalId ) clearInterval( intervalId );
+			if ( rafId )       cancelAnimationFrame( rafId );
+
+			intervalId = rafId = null;
+			if ( fromManual ) {
+				manualPause = true;
+			}
+			setButtonPaused( btn );
+		}
+
+		/**
+		 * Set button state to “playing”
+		 *
+		 * @private
+		 * @param {HTMLElement} b
+		 */
+		function setButtonPlaying( b: HTMLElement ): void {
+			b.setAttribute( 'aria-pressed', 'true' );
+			b.setAttribute( 'aria-label', opts.texts.pause );
+			const frag = document.createRange()
+				.createContextualFragment( opts.icons.pause );
+			b.innerHTML = '';
+			b.appendChild( frag );
+		}
+
+		/**
+		 * Set button state to “paused”
+		 *
+		 * @private
+		 * @param {HTMLElement} b
+		 */
+		function setButtonPaused( b: HTMLElement ): void {
+			b.setAttribute( 'aria-pressed', 'false' );
+			b.setAttribute( 'aria-label', opts.texts.play );
+			const frag = document.createRange()
+				.createContextualFragment( opts.icons.play );
+			b.innerHTML = '';
+			b.appendChild( frag );
+			b.style.setProperty( '--autoplay-delay-progress', '0' );
+		}
+
+		/**
+		 * Pause/resume when slider enters/leaves viewport
+		 * @private
+		 */
+		function observeVisibility(): void {
+			const observer = new IntersectionObserver( entries => {
+				for ( const e of entries ) {
+					if ( !e.isIntersecting && intervalId ) {
+						stop();
+					} else if ( e.isIntersecting && !intervalId && !manualPause ) {
+						start();
+					}
+				}
+			}, { threshold: 0 } );
+			observer.observe( slider.container );
+		}
+
+		// Initialize autoplay
+		start();
+		observeVisibility();
+	};
+}

package/src/plugins/autoplay/styles.scss

@@ -0,0 +1,11 @@
+/* --------------------------------------------------------------
+# AutoplayPlugin
+-------------------------------------------------------------- */
+
+:root {
+	--overflow-slider-autoplay-background: #000;
+}
+
+.overflow-slider__autoplay {
+	background: var(--overflow-slider-autoplay-background);
+}

package/src/plugins/dots/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 export type DotsOptions = {
 	texts: {
@@ -20,7 +20,7 @@ const DEFAULT_CLASS_NAMES = {
 	dotsItem: 'overflow-slider__dot-item',
 };
 
-export default function DotsPlugin( args: { [key: string]: unknown } ) {
+export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 	return ( slider: Slider ) => {
 		const options = <DotsOptions>{
 			texts: {

package/src/plugins/drag-scrolling/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 const DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK = 20;
 
@@ -6,7 +6,7 @@ export type DragScrollingOptions = {
 	draggedDistanceThatPreventsClick: number,
 };
 
-export default function DragScrollingPlugin( args: { [key: string]: unknown } ) {
+export default function DragScrollingPlugin( args?: DeepPartial<DragScrollingOptions> ) {
 	const options = <DragScrollingOptions>{
 		draggedDistanceThatPreventsClick: args?.draggedDistanceThatPreventsClick ?? DEFAULT_DRAGGED_DISTANCE_THAT_PREVENTS_CLICK,
 	};
@@ -31,7 +31,7 @@ export default function DragScrollingPlugin( args: { [key: string]: unknown } )
 				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';
@@ -55,7 +55,7 @@ export default function DragScrollingPlugin( args: { [key: string]: unknown } )
 				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/src/plugins/fade/index.ts

@@ -1,4 +1,4 @@
-import { Slider } from '../../core/types';
+import { Slider, DeepPartial } from '../../core/types';
 
 export type FadeOptions = {
 	classNames: {
@@ -11,7 +11,7 @@ export type FadeOptions = {
 	containerEnd: HTMLElement | null,
 };
 
-export default function FadePlugin( args: { [key: string]: unknown } ) {
+export default function FadePlugin( args?: DeepPartial<FadeOptions> ) {
 	return ( slider: Slider ) => {
 
 		const options = <FadeOptions>{