@evermade/overflow-slider 3.1.0 → 3.2.0

package/src/core/details.ts

@@ -23,10 +23,10 @@ export default function details( slider: Slider) {
 
 	amountOfPages = Math.ceil(scrollableAreaWidth / containerWidth);
 
-	if ( Math.floor( slider.container.scrollLeft ) >= 0) {
-		currentPage = Math.floor(slider.container.scrollLeft / containerWidth);
+	if ( Math.floor( slider.getScrollLeft() ) >= 0) {
+		currentPage = Math.floor(slider.getScrollLeft() / containerWidth);
 		// consider as last page if the scrollLeft + containerWidth is equal to scrollWidth
-		if (Math.floor( slider.container.scrollLeft + containerWidth ) === Math.floor( scrollableAreaWidth ) ) {
+		if (Math.floor( slider.getScrollLeft() + containerWidth ) === Math.floor( scrollableAreaWidth ) ) {
 			currentPage = amountOfPages - 1;
 		}
 	}

package/src/core/overflow-slider.ts

@@ -23,6 +23,7 @@ export default function OverflowSlider (
 			slidesSelector: ":scope > *",
 			emulateScrollSnap: false,
 			emulateScrollSnapMaxThreshold: 64,
+			rtl: false,
 		};
 
 		const sliderOptions = { ...defaults, ...options };

package/src/core/slider.ts

@@ -207,6 +207,9 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 
 	function setDataAttributes() {
 		slider.container.setAttribute('data-has-overflow', slider.details.hasOverflow ? 'true' : 'false');
+		if ( slider.options.rtl ) {
+			slider.container.setAttribute('dir', 'rtl');
+		}
 	}
 
 	function ensureSlideIsInView( slide: HTMLElement, scrollBehavior: null|ScrollBehavior = null) {
@@ -237,24 +240,51 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 
 	function setActiveSlideIdx() {
 		const sliderRect = slider.container.getBoundingClientRect();
-		const scrollLeft = slider.container.scrollLeft;
+		const scrollLeft = slider.getScrollLeft();
 		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 ( Math.floor( slideStart ) >= Math.floor( scrollLeft ) ) {
-				activeSlideIdx = i;
-				break;
+		if (slider.options.rtl) {
+			const scrolledDistance = slider.getInclusiveScrollWidth() - scrollLeft - slider.getInclusiveClientWidth();
+			const slidePositions = [];
+			for (let i = slides.length - 1; i >= 0; i--) {
+				const slideRect = slides[i].getBoundingClientRect();
+				const slideEnd = Math.abs(slideRect.left) - Math.abs(sliderRect.left) + scrolledDistance;
+				slidePositions.push({
+					slide: slides[i],
+					slideEnd: slideEnd,
+				});
+			}
+			let closestSlide = null;
+			let closestDistance = null;
+			for (let i = 0; i < slidePositions.length; i++) {
+				const distance = Math.abs(slidePositions[i].slideEnd - scrolledDistance);
+				if (closestDistance === null || distance < closestDistance) {
+					closestDistance = distance;
+					closestSlide = slidePositions[i].slide;
+				}
 			}
-			if ( i === slides.length - 1 ) {
-				scrolledPastLastSlide = true;
+			if (closestSlide) {
+				activeSlideIdx = slides.indexOf(closestSlide);
+			} else {
+				activeSlideIdx = slides.length - 1;
+			}
+		} else {
+			for (let i = 0; i < slides.length; i++) {
+				const slideRect = slides[i].getBoundingClientRect();
+				const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
+						if (Math.floor(slideStart) >= Math.floor(scrollLeft)) {
+								activeSlideIdx = i;
+								break;
+						}
+				if ( i === slides.length - 1 ) {
+					scrolledPastLastSlide = true;
+				}
 			}
 		}
 
+
 		if ( scrolledPastLastSlide ) {
 			activeSlideIdx = slides.length - 1;
 		}
@@ -262,6 +292,8 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		const oldActiveSlideIdx = slider.activeSlideIdx;
 		slider.activeSlideIdx = activeSlideIdx;
 
+		// console.log('activeSlideIdx', activeSlideIdx);
+
 		if (oldActiveSlideIdx !== activeSlideIdx) {
 			slider.emit('activeSlideChanged');
 		}
@@ -283,12 +315,20 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		return slider.container.clientWidth + getOutermostChildrenEdgeMarginSum(slider.container);
 	}
 
+	function getScrollLeft() : number {
+		return slider.options.rtl ? Math.abs(slider.container.scrollLeft) : slider.container.scrollLeft;
+	};
+
+	function setScrollLeft(value: number) : void {
+		slider.container.scrollLeft = slider.options.rtl ? -value : value;
+	};
+
 	function getGapSize() : number {
 		let gapSize = 0;
 		if (slider.slides.length > 1) {
 			const firstSlideRect = slider.slides[0].getBoundingClientRect();
 			const secondSlideRect = slider.slides[1].getBoundingClientRect();
-			gapSize = Math.floor( secondSlideRect.left - firstSlideRect.right );
+			gapSize = slider.options.rtl ? Math.abs( Math.floor( secondSlideRect.right - firstSlideRect.left ) ) : Math.floor( secondSlideRect.left - firstSlideRect.right );
 		}
 		return gapSize;
 	};
@@ -308,22 +348,25 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		const sliderRect = slider.container.getBoundingClientRect();
 		const containerWidth = slider.container.offsetWidth;
 		let targetScrollPosition = scrollLeft;
-		if (direction === 'prev') {
+
+		const realDirection = slider.options.rtl ? (direction === 'prev' ? 'next' : 'prev') : direction;
+
+		if (realDirection === 'prev') {
 			targetScrollPosition = Math.max(0, scrollLeft - slider.container.offsetWidth);
-		} else if (direction === 'next') {
+		} else if (realDirection === 'next') {
 			targetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), scrollLeft + slider.container.offsetWidth);
 		}
 		if (scrollStrategy === 'fullSlide') {
 			let fullSlideTargetScrollPosition = null;
 
 			// extend targetScrollPosition to include gap
-			if (direction === 'prev') {
+			if (realDirection === 'prev') {
 				fullSlideTargetScrollPosition = Math.max(0, targetScrollPosition - getGapSize());
 			} else {
 				fullSlideTargetScrollPosition = Math.min(slider.getInclusiveScrollWidth(), targetScrollPosition + getGapSize());
 			}
 
-			if (direction === 'next') {
+			if (realDirection === 'next') {
 				let partialSlideFound = false;
 				for (let slide of slider.slides) {
 					const slideRect = slide.getBoundingClientRect();
@@ -383,12 +426,12 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 	};
 
 	function snapToClosestSlide(direction = "prev") {
-		const isMovingForward = direction === 'next';
+		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 = slide.offsetLeft;
+			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);
@@ -399,10 +442,14 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 				width: slideWidth,
 				trigger: trigger,
 				slide: slide,
+				// debug
+				offSetleft: slide.offsetLeft,
+				rect: slide.getBoundingClientRect(),
 			});
 		}
+		console.log('slideReference', slideReference);
 		let snapTarget = null;
-		const scrollPosition = slider.container.scrollLeft;
+		const scrollPosition = getScrollLeft();
 		if (isMovingForward) {
 			for (let i = 0; i < slideReference.length; i++) {
 				const item = slideReference[i];
@@ -410,7 +457,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 					snapTarget = 0;
 					break;
 				}
-				if ( Math.floor( slider.container.scrollLeft ) <= Math.floor( item.trigger ) ) {
+				if ( Math.floor( getScrollLeft() ) <= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
@@ -422,7 +469,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 					snapTarget = item.start;
 					break;
 				}
-				if ( Math.floor( slider.container.scrollLeft ) >= Math.floor( item.trigger ) ) {
+				if ( Math.floor( getScrollLeft() ) >= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
@@ -435,8 +482,9 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 			}
 
 			const scrollBehavior = slider.options.scrollBehavior || 'smooth';
+
 			slider.container.scrollTo({
-				left: snapTarget,
+				left: slider.options.rtl ? -snapTarget : snapTarget,
 				behavior: scrollBehavior as ScrollBehavior
 			});
 		}
@@ -468,6 +516,8 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		snapToClosestSlide,
 		getInclusiveScrollWidth,
 		getInclusiveClientWidth,
+		getScrollLeft,
+		setScrollLeft,
 		on,
 		options,
 	};

package/src/core/types.ts

@@ -13,6 +13,8 @@ export type Slider<O = {}, C = {}, H extends string = string> = {
 	) => void
 	getInclusiveScrollWidth: () => number
 	getInclusiveClientWidth: () => number
+	getScrollLeft: () => number
+	setScrollLeft: (value: number) => void
 	on: (
 		name: H | SliderHooks,
 		cb: (props: Slider<O, C, H>) => void
@@ -28,6 +30,7 @@ export type SliderOptions = {
 	slidesSelector: string;
 	emulateScrollSnap: boolean;
 	emulateScrollSnapMaxThreshold: number;
+	rtl: boolean;
 	[key: string]: any;
 }
 

package/src/plugins/arrows/index.ts

@@ -65,7 +65,7 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		prev.setAttribute( 'aria-label', options.texts.buttonPrevious );
 		prev.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '');
 		prev.setAttribute( 'data-type', 'prev' );
-		prev.innerHTML = options.icons.prev;
+		prev.innerHTML = slider.options.rtl ? options.icons.next : options.icons.prev;
 		prev.addEventListener( 'click', () => {
 			if ( prev.getAttribute('data-has-content') === 'true' ) {
 				slider.moveToDirection( 'prev' );
@@ -78,7 +78,7 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		next.setAttribute( 'aria-label', options.texts.buttonNext );
 		next.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '');
 		next.setAttribute( 'data-type', 'next' );
-		next.innerHTML = options.icons.next;
+		next.innerHTML = slider.options.rtl ? options.icons.prev : options.icons.next;
 		next.addEventListener( 'click', () => {
 			if ( next.getAttribute('data-has-content') === 'true' ) {
 				slider.moveToDirection( 'next' );
@@ -90,20 +90,22 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
 		nav.appendChild( next );
 
 		const update = () => {
-			const scrollLeft = slider.container.scrollLeft;
+			const scrollLeft = slider.getScrollLeft();
 			const scrollWidth = slider.getInclusiveScrollWidth();
 			const clientWidth = slider.getInclusiveClientWidth();
-			const buffer      = 0;
+			const buffer      = 1;
 			if ( Math.floor( scrollLeft ) === 0 ) {
 				prev.setAttribute( 'data-has-content', 'false' );
 			} else {
 				prev.setAttribute( 'data-has-content', 'true' );
 			}
-			if ( Math.floor( scrollLeft + clientWidth ) >= Math.floor( scrollWidth ) ) {
+			const maxWidthDifference = Math.abs( Math.floor( scrollLeft + clientWidth ) - Math.floor( scrollWidth ) );
+			if ( maxWidthDifference <= buffer ) {
 				next.setAttribute( 'data-has-content', 'false' );
 			} else {
 				next.setAttribute( 'data-has-content', 'true' );
 			}
+			console.log( 'next', scrollLeft + clientWidth, scrollWidth );
 		};
 
 		if ( options.containerNext && options.containerPrev ) {

package/src/plugins/dots/index.ts

@@ -105,10 +105,6 @@ export default function DotsPlugin( args: { [key: string]: any } ) {
 		};
 
 		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 );
 		};
 

package/src/plugins/fade/index.ts

@@ -48,11 +48,11 @@ export default function FadePlugin( args: { [key: string]: any } ) {
 		}
 
 		const hasFadeAtStart = () => {
-			return slider.container.scrollLeft > fadeItemStart.offsetWidth;
+			return slider.getScrollLeft() > fadeItemStart.offsetWidth;
 		}
 
 		const fadeAtStartOpacity = () => {
-			const position = slider.container.scrollLeft;
+			const position = slider.getScrollLeft();
 			if ( Math.floor( position ) <= Math.floor( fadeItemStart.offsetWidth ) ) {
 				return position / Math.max(fadeItemStart.offsetWidth, 1);
 			}
@@ -60,11 +60,11 @@ export default function FadePlugin( args: { [key: string]: any } ) {
 		}
 
 		const hasFadeAtEnd = () => {
-			return Math.floor( slider.container.scrollLeft ) < Math.floor( slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth );
+			return Math.floor( slider.getScrollLeft() ) < Math.floor( slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth );
 		}
 
 		const fadeAtEndOpacity = () => {
-			const position = slider.container.scrollLeft;
+			const position = slider.getScrollLeft();
 			const maxPosition = slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth();
 			const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
 			if ( Math.floor( position ) >= Math.floor( maxFadePosition ) ) {

package/src/plugins/fade/styles.scss

@@ -19,9 +19,19 @@
 .overflow-slider-fade--start {
 	left: 0;
 	background: linear-gradient(to right, var(--overflow-slider-fade-color) 0%, transparent 100%);
+	[dir="rtl"] & {
+		left: auto;
+		right: 0;
+		background: linear-gradient(to left, var(--overflow-slider-fade-color) 0%, transparent 100%);
+	}
 }
 
 .overflow-slider-fade--end {
 	right: 0;
 	background: linear-gradient(to left, var(--overflow-slider-fade-color) 0%, transparent 100%);
+	[dir="rtl"] & {
+		right: auto;
+		left: 0;
+		background: linear-gradient(to right, var(--overflow-slider-fade-color) 0%, transparent 100%);
+	}
 }

package/src/plugins/full-width/index.ts

@@ -29,16 +29,22 @@ export default function FullWidthPlugin( args: { [key: string]: any } ) {
 
 			const marginAmount = Math.floor((window.innerWidth - options.targetWidth(slider)) / 2);
 			if ( options.addMarginBefore ) {
-				firstSlide.style.marginLeft = `${marginAmount}px`;
+				firstSlide.style.marginInlineStart = `${marginAmount}px`;
 			}
 			if ( options.addMarginAfter ) {
-				lastSlide.style.marginRight = `${marginAmount}px`;
+				lastSlide.style.marginInlineEnd = `${marginAmount}px`;
 			}
 			slider.container.setAttribute( 'data-full-width-offset', marginAmount.toString() );
+			setCSS();
+		};
+
+		const setCSS = () => {
+			slider.container.style.setProperty('--slider-container-target-width', `${options.targetWidth(slider)}px`);
 		};
 
 		update();
 		slider.on( 'contentsChanged', update );
 		slider.on( 'containerSizeChanged', update );
+		window.addEventListener( 'resize', setCSS );
 	};
 }

package/src/plugins/scroll-indicator/index.ts

@@ -15,8 +15,8 @@ export type ScrollIndicatorOptions = {
 	container: HTMLElement | null,
 };
 
-export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
-	return ( slider: Slider ) => {
+export default function ScrollIndicatorPlugin(args: { [key: string]: any }) {
+	return (slider: Slider) => {
 
 		const options = <ScrollIndicatorOptions>{
 			classNames: {
@@ -26,42 +26,44 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 			container: args?.container ?? null,
 		};
 
+		const scrollbarContainer = document.createElement('div');
+		scrollbarContainer.setAttribute('class', options.classNames.scrollIndicator);
+		scrollbarContainer.setAttribute('tabindex', '0');
+		scrollbarContainer.setAttribute('role', 'scrollbar');
+		scrollbarContainer.setAttribute('aria-controls', slider.container.getAttribute('id') ?? '');
+		scrollbarContainer.setAttribute('aria-orientation', 'horizontal');
+		scrollbarContainer.setAttribute('aria-valuemax', '100');
+		scrollbarContainer.setAttribute('aria-valuemin', '0');
+		scrollbarContainer.setAttribute('aria-valuenow', '0');
 
-		const scrollbarContainer = document.createElement( 'div' );
-		scrollbarContainer.setAttribute( 'class', options.classNames.scrollIndicator );
-		scrollbarContainer.setAttribute( 'tabindex', '0' );
-		scrollbarContainer.setAttribute( 'role', 'scrollbar' );
-		scrollbarContainer.setAttribute( 'aria-controls', slider.container.getAttribute( 'id' ) ?? '' );
-		scrollbarContainer.setAttribute( 'aria-orientation', 'horizontal' );
-		scrollbarContainer.setAttribute( 'aria-valuemax', '100' );
-		scrollbarContainer.setAttribute( 'aria-valuemin', '0' );
-		scrollbarContainer.setAttribute( 'aria-valuenow', '0' );
+		const scrollbar = document.createElement('div');
+		scrollbar.setAttribute('class', options.classNames.scrollIndicatorBar);
 
-		const scrollbar = document.createElement( 'div' );
-		scrollbar.setAttribute( 'class', options.classNames.scrollIndicatorBar );
+		const scrollbarButton = document.createElement('div');
+		scrollbarButton.setAttribute('class', options.classNames.scrollIndicatorButton);
+		scrollbarButton.setAttribute('data-is-grabbed', 'false');
 
-		const scrollbarButton = document.createElement( 'div' );
-		scrollbarButton.setAttribute( 'class', options.classNames.scrollIndicatorButton );
-		scrollbarButton.setAttribute( 'data-is-grabbed', 'false' );
-
-		scrollbar.appendChild( scrollbarButton );
-		scrollbarContainer.appendChild( scrollbar );
+		scrollbar.appendChild(scrollbarButton);
+		scrollbarContainer.appendChild(scrollbar);
 
 		const setDataAttributes = () => {
-			scrollbarContainer.setAttribute( 'data-has-overflow', slider.details.hasOverflow.toString() );
+			scrollbarContainer.setAttribute('data-has-overflow', slider.details.hasOverflow.toString());
 		}
 		setDataAttributes();
 
 		const getScrollbarButtonLeftOffset = () => {
-			const  contentRatio = scrollbarButton.offsetWidth / slider.details.containerWidth;
-			return slider.container.scrollLeft * contentRatio;
+			const contentRatio = scrollbarButton.offsetWidth / slider.details.containerWidth;
+			const scrollAmount = slider.getScrollLeft() * contentRatio;
+			if (slider.options.rtl) {
+				return scrollbar.offsetWidth - scrollbarButton.offsetWidth - scrollAmount;
+			}
+			return scrollAmount;
 		};
 
-		// scrollbarbutton width and position is calculated based on the scroll position and available width
 		let requestId = 0;
 		const update = () => {
-			if ( requestId ) {
-				window.cancelAnimationFrame( requestId );
+			if (requestId) {
+				window.cancelAnimationFrame(requestId);
 			}
 
 			requestId = window.requestAnimationFrame(() => {
@@ -71,64 +73,60 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 				scrollbarButton.style.width = `${scrollbarButtonWidth}%`;
 				scrollbarButton.style.transform = `translateX(${scrollLeftInPortion}px)`;
 
-				// aria-valuenow
-				const scrollLeft = slider.container.scrollLeft;
+				const scrollLeft = slider.getScrollLeft();
 				const scrollWidth = slider.getInclusiveScrollWidth();
 				const containerWidth = slider.container.offsetWidth;
 				const scrollPercentage = (scrollLeft / (scrollWidth - containerWidth)) * 100;
-				scrollbarContainer.setAttribute( 'aria-valuenow', Math.round(Number.isNaN(scrollPercentage) ? 0 : scrollPercentage).toString() );
+				scrollbarContainer.setAttribute('aria-valuenow', Math.round(Number.isNaN(scrollPercentage) ? 0 : scrollPercentage).toString());
 			});
 		};
 
-		// insert to DOM
-		if ( options.container ) {
-			options.container.appendChild( scrollbarContainer );
+		if (options.container) {
+			options.container.appendChild(scrollbarContainer);
 		} else {
-			slider.container.parentNode?.insertBefore( scrollbarContainer, slider.container.nextSibling );
+			slider.container.parentNode?.insertBefore(scrollbarContainer, slider.container.nextSibling);
 		}
 
-		// update the scrollbar when the slider is scrolled
 		update();
-		slider.on( 'scroll', update );
-		slider.on( 'contentsChanged', update );
-		slider.on( 'containerSizeChanged', update );
-		slider.on( 'detailsChanged', setDataAttributes );
-
-		// handle arrow keys while focused
-		scrollbarContainer.addEventListener( 'keydown', (e) => {
-			if ( e.key === 'ArrowLeft' ) {
-				slider.moveToDirection( 'prev' );
-			} else if ( e.key === 'ArrowRight' ) {
-				slider.moveToDirection( 'next' );
+		slider.on('scroll', update);
+		slider.on('contentsChanged', update);
+		slider.on('containerSizeChanged', update);
+		slider.on('detailsChanged', setDataAttributes);
+
+		scrollbarContainer.addEventListener('keydown', (e) => {
+			if (e.key === 'ArrowLeft') {
+				slider.moveToDirection('prev');
+			} else if (e.key === 'ArrowRight') {
+				slider.moveToDirection('next');
 			}
 		});
 
-		// handle click to before or after the scrollbar button
-		scrollbarContainer.addEventListener( 'click', (e) => {
+		let isInteractionDown = false;
+		let startX = 0;
+		let scrollLeft = slider.getScrollLeft();
+
+		scrollbarContainer.addEventListener('click', (e) => {
+			if ( e.target == scrollbarButton ) {
+				return;
+			}
 			const scrollbarButtonWidth = scrollbarButton.offsetWidth;
 			const scrollbarButtonLeft = getScrollbarButtonLeftOffset();
 			const scrollbarButtonRight = scrollbarButtonLeft + scrollbarButtonWidth;
-			const clickX = e.pageX - scrollbarContainer.offsetLeft;
-			if ( Math.floor( clickX ) < Math.floor( scrollbarButtonLeft ) ) {
-				slider.moveToDirection( 'prev' );
-			} else if ( Math.floor( clickX ) > Math.floor( scrollbarButtonRight ) ) {
-				slider.moveToDirection( 'next' );
+			const clickX = e.pageX - Math.abs( scrollbarContainer.offsetLeft );
+			if (Math.floor(clickX) < Math.floor(scrollbarButtonLeft)) {
+				slider.moveToDirection(slider.options.rtl ? 'next' : 'prev');
+			} else if (Math.floor(clickX) > Math.floor(scrollbarButtonRight)) {
+				slider.moveToDirection(slider.options.rtl ? 'prev' : 'next');
 			}
 		});
 
-		// make scrollbar button draggable via mouse/touch and update the scroll position
-		let isInteractionDown = false;
-		let startX = 0;
-		let scrollLeft = 0;
-
 		const onInteractionDown = (e: MouseEvent | TouchEvent) => {
 			isInteractionDown = true;
 			const pageX = (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
 			startX = pageX - scrollbarContainer.offsetLeft;
-			scrollLeft = slider.container.scrollLeft;
-			// change cursor to grabbing
+			scrollLeft = slider.getScrollLeft();
 			scrollbarButton.style.cursor = 'grabbing';
-			scrollbarButton.setAttribute( 'data-is-grabbed', 'true' );
+			scrollbarButton.setAttribute('data-is-grabbed', 'true');
 
 			e.preventDefault();
 			e.stopPropagation();
@@ -144,13 +142,14 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 			const scrollingFactor = slider.details.scrollableAreaWidth / scrollbarContainer.offsetWidth;
 
 			const walk = (x - startX) * scrollingFactor;
-			slider.container.scrollLeft = scrollLeft + walk;
+			const distance = slider.options.rtl ? scrollLeft - walk : scrollLeft + walk;
+			slider.setScrollLeft(distance);
 		};
 
 		const onInteractionUp = () => {
 			isInteractionDown = false;
 			scrollbarButton.style.cursor = '';
-			scrollbarButton.setAttribute( 'data-is-grabbed', 'false' );
+			scrollbarButton.setAttribute('data-is-grabbed', 'false');
 		};
 
 		scrollbarButton.addEventListener('mousedown', onInteractionDown);
@@ -161,6 +160,5 @@ export default function ScrollIndicatorPlugin( args: { [key: string]: any } ) {
 
 		window.addEventListener('mouseup', onInteractionUp);
 		window.addEventListener('touchend', onInteractionUp);
-
 	};
 }

package/src/plugins/thumbnails/index.ts

@@ -39,13 +39,16 @@ export default function FullWidthPlugin( args: { [key: string]: any } ) {
 		setActiveThumbnail();
 		addClickListeners();
 
-		// @todo debounce on scroll
-		mainSlider.on( 'activeSlideChanged', () => {
+		mainSlider.on( 'scrollEnd', () => {
 			setTimeout(() => {
-				const activeSlideIdx = mainSlider.activeSlideIdx;
-				const activeThumbnail = slider.slides[activeSlideIdx] as HTMLElement;
+				const mainActiveSlideIdx = mainSlider.activeSlideIdx;
+				const thumbActiveSlideIdx = slider.activeSlideIdx;
+				if ( thumbActiveSlideIdx === mainActiveSlideIdx ) {
+					return;
+				}
+				const activeThumbnail = slider.slides[mainActiveSlideIdx] as HTMLElement;
 				setActiveThumbnail(activeThumbnail);
-				slider.moveToSlide(activeSlideIdx);
+				slider.moveToSlide(mainActiveSlideIdx);
 			}, 50);
 		});