@evermade/overflow-slider 2.0.2 → 3.1.0

package/src/core/slider.ts

@@ -1,6 +1,6 @@
 import { Slider, SliderOptions, SliderPlugin } from './types';
 import details from './details';
-import { generateId, objectsAreEqual } from './utils';
+import { generateId, objectsAreEqual, getOutermostChildrenEdgeMarginSum } from './utils';
 
 export default function Slider( container: HTMLElement, options : SliderOptions, plugins? : SliderPlugin[] ) {
 	let slider: Slider;
@@ -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 ( Math.floor( scrollLeft ) !== Math.floor( 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 ( Math.floor( nativeScrollLeft ) !== Math.floor( 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 ( Math.floor( programmaticScrollLeft ) !== Math.floor( 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
@@ -128,26 +218,20 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		const slideStart = slideRect.left - sliderRect.left + scrollLeft;
 		const slideEnd = slideStart + slideRect.width;
 		let scrollTarget = null;
-		if (slideStart < scrollLeft) {
+		if ( Math.floor( slideStart ) < Math.floor( scrollLeft ) ) {
 			scrollTarget = slideStart;
-		} else if (slideEnd > scrollLeft + containerWidth) {
+		} else if ( Math.floor( slideEnd ) > Math.floor( scrollLeft ) + Math.floor( containerWidth ) ) {
 			scrollTarget = slideEnd - containerWidth;
-		} else if (slideStart === 0) {
+		} else if ( Math.floor( 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);
 		}
 	};
 
@@ -156,24 +240,34 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		const scrollLeft = slider.container.scrollLeft;
 		const slides = slider.slides;
 		let activeSlideIdx = 0;
+		let scrolledPastLastSlide = false;
 
 		for (let i = 0; i < slides.length; i++) {
 			const slideRect = slides[i].getBoundingClientRect();
 			const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
 
-			if (slideStart > scrollLeft) {
+			if ( Math.floor( slideStart ) >= Math.floor( scrollLeft ) ) {
 				activeSlideIdx = i;
 				break;
 			}
+			if ( i === slides.length - 1 ) {
+				scrolledPastLastSlide = true;
+			}
+		}
+
+		if ( scrolledPastLastSlide ) {
+			activeSlideIdx = slides.length - 1;
 		}
 
 		const oldActiveSlideIdx = slider.activeSlideIdx;
 		slider.activeSlideIdx = activeSlideIdx;
+
 		if (oldActiveSlideIdx !== activeSlideIdx) {
 			slider.emit('activeSlideChanged');
 		}
 	}
 
+
 	function moveToSlide( idx: number ) {
 		const slide = slider.slides[idx];
 		if (slide) {
@@ -181,15 +275,32 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		}
 	};
 
+	function getInclusiveScrollWidth() : number {
+		return slider.container.scrollWidth + getOutermostChildrenEdgeMarginSum(slider.container);
+	};
+
+	function getInclusiveClientWidth() : number {
+		return slider.container.clientWidth + getOutermostChildrenEdgeMarginSum(slider.container);
+	}
+
 	function getGapSize() : number {
 		let gapSize = 0;
 		if (slider.slides.length > 1) {
 			const firstSlideRect = slider.slides[0].getBoundingClientRect();
 			const secondSlideRect = slider.slides[1].getBoundingClientRect();
-			gapSize = secondSlideRect.left - firstSlideRect.right;
+			gapSize = Math.floor( 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 Math.floor( offset );
+	};
 
 	function moveToDirection(direction = "prev") {
 		const scrollStrategy = slider.options.scrollStrategy;
@@ -200,16 +311,16 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		if (direction === 'prev') {
 			targetScrollPosition = Math.max(0, scrollLeft - slider.container.offsetWidth);
 		} else if (direction === 'next') {
-			targetScrollPosition = Math.min(slider.container.scrollWidth, scrollLeft + slider.container.offsetWidth);
+			targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + slider.container.offsetWidth);
 		}
 		if (scrollStrategy === 'fullSlide') {
-			let fullSldeTargetScrollPosition = null;
+			let fullSlideTargetScrollPosition = null;
 
 			// extend targetScrollPosition to include gap
 			if (direction === 'prev') {
-				fullSldeTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
+				fullSlideTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
 			} else {
-				fullSldeTargetScrollPosition = Math.min(slider.container.scrollWidth, targetScrollPosition + getGapSize());
+				fullSlideTargetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), targetScrollPosition + getGapSize());
 			}
 
 			if (direction === 'next') {
@@ -218,49 +329,125 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 					const slideRect = slide.getBoundingClientRect();
 					const slideStart = slideRect.left - sliderRect.left + scrollLeft;
 					const slideEnd = slideStart + slideRect.width;
-					if (slideStart < targetScrollPosition && slideEnd > targetScrollPosition) {
-						fullSldeTargetScrollPosition = slideStart;
+					if ( Math.floor( slideStart ) < Math.floor( targetScrollPosition ) && Math.floor( slideEnd ) > Math.floor( targetScrollPosition ) ) {
+						fullSlideTargetScrollPosition = slideStart;
 						partialSlideFound = true;
 						break;
 					}
 				}
-				if (!partialSlideFound) {
-					fullSldeTargetScrollPosition = Math.min(targetScrollPosition, slider.container.scrollWidth - slider.container.offsetWidth);
+				if ( ! partialSlideFound ) {
+					fullSlideTargetScrollPosition = Math.min(targetScrollPosition, slider.getInclusiveScrollWidth() - slider.container.offsetWidth);
 				}
-				if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition > scrollLeft) {
-					targetScrollPosition = fullSldeTargetScrollPosition;
+				if ( fullSlideTargetScrollPosition ) {
+					if ( Math.floor( fullSlideTargetScrollPosition ) > Math.floor( scrollLeft ) ) {
+						// make sure fullSlideTargetScrollPosition is possible considering the container width
+						const maxScrollPosition = Math.floor( slider.getInclusiveScrollWidth() ) - Math.floor( containerWidth );
+						targetScrollPosition = Math.min( fullSlideTargetScrollPosition, maxScrollPosition );
+					} else {
+						// cannot snap to slide, move one page worth of distance
+						targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + containerWidth);
+					}
 				}
+
 			} else {
 				let partialSlideFound = false;
 				for (let slide of slider.slides) {
 					const slideRect = slide.getBoundingClientRect();
 					const slideStart = slideRect.left - sliderRect.left + scrollLeft;
 					const slideEnd = slideStart + slideRect.width;
-					if (slideStart < scrollLeft && slideEnd > scrollLeft) {
-						fullSldeTargetScrollPosition = slideEnd - containerWidth;
+					if ( Math.floor( slideStart ) < Math.floor( scrollLeft ) && Math.floor( slideEnd ) > Math.floor( scrollLeft ) ) {
+						fullSlideTargetScrollPosition = slideEnd - containerWidth;
 						partialSlideFound = true;
 						break;
 					}
 				}
-				if (!partialSlideFound) {
-					fullSldeTargetScrollPosition = Math.max(0, scrollLeft - containerWidth);
+				if ( ! partialSlideFound ) {
+					fullSlideTargetScrollPosition = Math.max(0, scrollLeft - containerWidth);
 				}
-				if (fullSldeTargetScrollPosition && fullSldeTargetScrollPosition < scrollLeft) {
-					targetScrollPosition = fullSldeTargetScrollPosition;
+				if ( fullSlideTargetScrollPosition && Math.floor( fullSlideTargetScrollPosition ) < Math.floor( scrollLeft ) ) {
+					targetScrollPosition = fullSlideTargetScrollPosition;
 				}
 			}
 		}
+
+		// add left offset
+		const offsettedTargetScrollPosition = targetScrollPosition - getLeftOffset();
+		if ( Math.floor( 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 && Math.floor( scrollPosition ) <= Math.floor( item.trigger ) ) {
+					snapTarget = 0;
+					break;
+				}
+				if ( Math.floor( slider.container.scrollLeft ) <= Math.floor( 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 && Math.floor( scrollPosition ) >= Math.floor( item.trigger ) ) {
+					snapTarget = item.start;
+					break;
+				}
+				if ( Math.floor( slider.container.scrollLeft ) >= Math.floor( item.trigger ) ) {
+					snapTarget = item.start;
+					break;
+				}
+			}
+		}
+		if ( snapTarget !== null ) {
+			const offsettedSnapTarget = snapTarget - getLeftOffset();
+			if ( Math.floor( 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 +459,15 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		if (typeof optionCallBack === 'function') {
 				optionCallBack(slider);
 		}
-	}
+	};
 
 	slider = <Slider>{
 		emit,
 		moveToDirection,
 		moveToSlide,
+		snapToClosestSlide,
+		getInclusiveScrollWidth,
+		getInclusiveClientWidth,
 		on,
 		options,
 	};

package/src/core/types.ts

@@ -5,9 +5,14 @@ export type Slider<O = {}, C = {}, H extends string = string> = {
 	moveToDirection: (
 		direction: 'prev' | 'next'
 	) => void
+	snapToClosestSlide: (
+		direction: 'prev' | 'next'
+	) => void
 	moveToSlide: (
 		index: number
 	) => void
+	getInclusiveScrollWidth: () => number
+	getInclusiveClientWidth: () => number
 	on: (
 		name: H | SliderHooks,
 		cb: (props: Slider<O, C, H>) => void
@@ -21,6 +26,8 @@ export type SliderOptions = {
 	scrollBehavior: string;
 	scrollStrategy: string;
 	slidesSelector: string;
+	emulateScrollSnap: boolean;
+	emulateScrollSnapMaxThreshold: number;
 	[key: string]: any;
 }
 
@@ -38,7 +45,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 +62,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/core/utils.ts

@@ -21,4 +21,22 @@ function objectsAreEqual( obj1: any, obj2: any ) {
 	return true;
 }
 
-export { generateId, objectsAreEqual };
+function getOutermostChildrenEdgeMarginSum( el: HTMLElement ): number {
+	if (el.children.length === 0) {
+		return 0;
+	}
+
+	// get the first child and its left margin
+	const firstChild = el.children[0];
+	const firstChildStyle = getComputedStyle(firstChild);
+	const firstChildMarginLeft = parseFloat(firstChildStyle.marginLeft);
+
+	// Get the last child and its right margin
+	const lastChild = el.children[el.children.length - 1];
+	const lastChildStyle = getComputedStyle(lastChild);
+	const lastChildMarginRight = parseFloat(lastChildStyle.marginRight);
+
+	return firstChildMarginLeft + lastChildMarginRight;
+}
+
+export { generateId, objectsAreEqual, getOutermostChildrenEdgeMarginSum };

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';

package/src/plugins/arrows/index.ts

@@ -66,7 +66,11 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		prev.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '');
 		prev.setAttribute( 'data-type', 'prev' );
 		prev.innerHTML = options.icons.prev;
-		prev.addEventListener( 'click', () => slider.moveToDirection( 'prev' ) );
+		prev.addEventListener( 'click', () => {
+			if ( prev.getAttribute('data-has-content') === 'true' ) {
+				slider.moveToDirection( 'prev' );
+			}
+		} );
 
 		const next = document.createElement( 'button' );
 		next.setAttribute( 'class', options.classNames.nextButton );
@@ -75,7 +79,11 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		next.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '');
 		next.setAttribute( 'data-type', 'next' );
 		next.innerHTML = options.icons.next;
-		next.addEventListener( 'click', () => slider.moveToDirection( 'next' ) );
+		next.addEventListener( 'click', () => {
+			if ( next.getAttribute('data-has-content') === 'true' ) {
+				slider.moveToDirection( 'next' );
+			}
+		} );
 
 		// insert buttons to the nav
 		nav.appendChild( prev );
@@ -83,15 +91,15 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 
 		const update = () => {
 			const scrollLeft = slider.container.scrollLeft;
-			const scrollWidth = slider.container.scrollWidth;
-			const clientWidth = slider.container.clientWidth;
-			const buffer      = 1;
-			if ( scrollLeft === 0 ) {
+			const scrollWidth = slider.getInclusiveScrollWidth();
+			const clientWidth = slider.getInclusiveClientWidth();
+			const buffer      = 0;
+			if ( Math.floor( scrollLeft ) === 0 ) {
 				prev.setAttribute( 'data-has-content', 'false' );
 			} else {
 				prev.setAttribute( 'data-has-content', 'true' );
 			}
-			if ( scrollLeft + clientWidth >= scrollWidth - buffer ) {
+			if ( Math.floor( scrollLeft + clientWidth ) >= Math.floor( scrollWidth ) ) {
 				next.setAttribute( 'data-has-content', 'false' );
 			} else {
 				next.setAttribute( 'data-has-content', 'true' );
@@ -110,7 +118,7 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		}
 
 		update();
-		slider.on( 'scroll', update );
+		slider.on( 'scrollEnd', update );
 		slider.on( 'contentsChanged', update );
 		slider.on( 'containerSizeChanged', update );
 	};

package/src/plugins/dots/index.ts

@@ -45,8 +45,8 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 
 			const dotsList = document.createElement( 'ul' );
 
-			const pages = slider.details.amountOfPages;
-			const currentPage = slider.details.currentPage;
+			const pages = slider.details.slideCount;
+			const currentItem = slider.activeSlideIdx;
 
 			if ( pages <= 1 ) {
 				return;
@@ -58,22 +58,22 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 				dot.setAttribute( 'type', 'button' );
 				dot.setAttribute( 'class', options.classNames.dotsItem );
 				dot.setAttribute( 'aria-label', options.texts.dotDescription.replace( '%d', ( i + 1 ).toString() ).replace( '%d', pages.toString() ) );
-				dot.setAttribute( 'aria-pressed', ( i === currentPage ).toString() );
-				dot.setAttribute( 'data-page', ( i + 1 ).toString() );
+				dot.setAttribute( 'aria-pressed', ( i === currentItem ).toString() );
+				dot.setAttribute( 'data-item', ( i + 1 ).toString() );
 				dotListItem.appendChild( dot );
 				dotsList.appendChild( dotListItem );
 				dot.addEventListener( 'click', () => activateDot( i + 1 ) );
 				dot.addEventListener( 'focus', () => pageFocused = i + 1 );
 				dot.addEventListener( 'keydown', ( e ) => {
-					const currentPageItem = dots.querySelector( `[aria-pressed="true"]` );
-					if ( ! currentPageItem ) {
+					const currentItemItem = dots.querySelector( `[aria-pressed="true"]` );
+					if ( ! currentItemItem ) {
 						return;
 					}
-					const currentPage = parseInt( currentPageItem.getAttribute( 'data-page' ) ?? '1' );
+					const currentItem = parseInt( currentItemItem.getAttribute( 'data-item' ) ?? '1' );
 					if ( e.key === 'ArrowLeft' ) {
-						const previousPage = currentPage - 1;
+						const previousPage = currentItem - 1;
 						if ( previousPage > 0 ) {
-							const matchingDot = dots.querySelector( `[data-page="${previousPage}"]` );
+							const matchingDot = dots.querySelector( `[data-item="${previousPage}"]` );
 							if ( matchingDot ) {
 								( <HTMLElement>matchingDot ).focus();
 							}
@@ -81,9 +81,9 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 						}
 					}
 					if ( e.key === 'ArrowRight' ) {
-						const nextPage = currentPage + 1;
+						const nextPage = currentItem + 1;
 						if ( nextPage <= pages ) {
-							const matchingDot = dots.querySelector( `[data-page="${nextPage}"]` );
+							const matchingDot = dots.querySelector( `[data-item="${nextPage}"]` );
 							if ( matchingDot ) {
 								( <HTMLElement>matchingDot ).focus();
 							}
@@ -97,20 +97,19 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 
 			// return focus to same page after rebuild
 			if ( pageFocused ) {
-				const matchingDot = dots.querySelector( `[data-page="${pageFocused}"]` );
+				const matchingDot = dots.querySelector( `[data-item="${pageFocused}"]` );
 				if ( matchingDot ) {
 					( <HTMLElement>matchingDot ).focus();
 				}
 			}
 		};
 
-		const activateDot = ( page: number ) => {
-			const scrollTargetPosition = slider.details.containerWidth * ( page - 1 );
-			slider.container.style.scrollBehavior = slider.options.scrollBehavior;
-			slider.container.style.scrollSnapType = 'none';
-			slider.container.scrollLeft = scrollTargetPosition;
-			slider.container.style.scrollBehavior = '';
-			slider.container.style.scrollSnapType = '';
+		const activateDot = ( item: number ) => {
+			// const scrollTargetPosition = slider.details.containerWidth * ( page - 1 );
+			// slider.container.style.scrollBehavior = slider.options.scrollBehavior;
+			// slider.container.scrollLeft = scrollTargetPosition;
+			// slider.container.style.scrollBehavior = '';
+			slider.moveToSlide( item - 1 );
 		};
 
 		buildDots();
@@ -121,9 +120,8 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 			slider.container.parentNode?.insertBefore( dots, slider.container.nextSibling );
 		}
 
-		slider.on( 'detailsChanged', () => {
-			buildDots();
-		} );
-
+		slider.on( 'scrollEnd', buildDots );
+		slider.on( 'contentsChanged', buildDots );
+		slider.on( 'containerSizeChanged', buildDots );
 	};
 };