@evermade/overflow-slider 3.0.0 → 3.2.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;
@@ -94,7 +94,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		// any scroll
 		slider.container.addEventListener('scroll', () => {
 			const newScrollLeft = slider.container.scrollLeft;
-			if (scrollLeft !== newScrollLeft) {
+			if ( Math.floor( scrollLeft ) !== Math.floor( newScrollLeft ) ) {
 				if (!isScrolling) {
 					isScrolling = true;
 					slider.emit('scrollStart');
@@ -116,7 +116,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		// user initted scroll (touchmove, mouse wheel, etc.)
 		const nativeScrollHandler = () => {
 			const newScrollLeft = slider.container.scrollLeft;
-			if (nativeScrollLeft !== newScrollLeft && !isProgrammaticScrolling) {
+			if ( Math.floor( nativeScrollLeft ) !== Math.floor( newScrollLeft ) && ! isProgrammaticScrolling ) {
 				if (!isUserScrolling) {
 					slider.emit('nativeScrollStart');
 					isUserScrolling = true;
@@ -145,7 +145,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 
 		slider.container.addEventListener('scroll', () => {
 			const newScrollLeft = slider.container.scrollLeft;
-			if (programmaticScrollLeft !== newScrollLeft && !isUserScrolling && isProgrammaticScrolling) {
+			if ( Math.floor( programmaticScrollLeft ) !== Math.floor( newScrollLeft ) && !isUserScrolling && isProgrammaticScrolling) {
 				programmaticScrollLeft = newScrollLeft;
 				clearTimeout(programmaticScrollTimeout);
 				programmaticScrollTimeout = setTimeout(() => {
@@ -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) {
@@ -218,11 +221,11 @@ 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;
@@ -237,27 +240,66 @@ 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;
+
+		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 (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;
+				}
+			}
+		}
 
-		for (let i = 0; i < slides.length; i++) {
-			const slideRect = slides[i].getBoundingClientRect();
-			const slideStart = slideRect.left - sliderRect.left + scrollLeft + getGapSize();
 
-			if (slideStart > scrollLeft) {
-				activeSlideIdx = i;
-				break;
-			}
+		if ( scrolledPastLastSlide ) {
+			activeSlideIdx = slides.length - 1;
 		}
 
 		const oldActiveSlideIdx = slider.activeSlideIdx;
 		slider.activeSlideIdx = activeSlideIdx;
+
+		// console.log('activeSlideIdx', activeSlideIdx);
+
 		if (oldActiveSlideIdx !== activeSlideIdx) {
 			slider.emit('activeSlideChanged');
 		}
 	}
 
+
 	function moveToSlide( idx: number ) {
 		const slide = slider.slides[idx];
 		if (slide) {
@@ -265,12 +307,28 @@ 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 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 = secondSlideRect.left - firstSlideRect.right;
+			gapSize = slider.options.rtl ? Math.abs( Math.floor( secondSlideRect.right - firstSlideRect.left ) ) : Math.floor( secondSlideRect.left - firstSlideRect.right );
 		}
 		return gapSize;
 	};
@@ -281,7 +339,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		if (fullWidthOffset) {
 			offset = parseInt(fullWidthOffset);
 		}
-		return offset;
+		return Math.floor( offset );
 	};
 
 	function moveToDirection(direction = "prev") {
@@ -290,63 +348,74 @@ 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') {
-			targetScrollPosition = Math.min(slider.container.scrollWidth, scrollLeft + slider.container.offsetWidth);
+		} else if (realDirection === 'next') {
+			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());
+			if (realDirection === 'prev') {
+				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') {
+			if (realDirection === 'next') {
 				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 < 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 (offsettedTargetScrollPosition >= 0) {
+		if ( Math.floor( offsettedTargetScrollPosition ) >= 0) {
 			targetScrollPosition = offsettedTargetScrollPosition;
 		}
 
@@ -357,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);
@@ -373,18 +442,22 @@ 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];
-				if ( i === 0 && scrollPosition <= item.trigger ) {
+				if ( i === 0 && Math.floor( scrollPosition ) <= Math.floor( item.trigger ) ) {
 					snapTarget = 0;
 					break;
 				}
-				if (slider.container.scrollLeft <= item.trigger) {
+				if ( Math.floor( getScrollLeft() ) <= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
@@ -392,11 +465,11 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		} else {
 			for (let i = slideReference.length - 1; i >= 0; i--) {
 				const item = slideReference[i];
-				if ( i === slideReference.length - 1 && scrollPosition >= item.trigger ) {
+				if ( i === slideReference.length - 1 && Math.floor( scrollPosition ) >= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
-				if (slider.container.scrollLeft >= item.trigger) {
+				if ( Math.floor( getScrollLeft() ) >= Math.floor( item.trigger ) ) {
 					snapTarget = item.start;
 					break;
 				}
@@ -404,13 +477,14 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		}
 		if ( snapTarget !== null ) {
 			const offsettedSnapTarget = snapTarget - getLeftOffset();
-			if (offsettedSnapTarget >= 0) {
+			if ( Math.floor( offsettedSnapTarget ) >= 0 ) {
 				snapTarget = offsettedSnapTarget;
 			}
 
 			const scrollBehavior = slider.options.scrollBehavior || 'smooth';
+
 			slider.container.scrollTo({
-				left: snapTarget,
+				left: slider.options.rtl ? -snapTarget : snapTarget,
 				behavior: scrollBehavior as ScrollBehavior
 			});
 		}
@@ -440,6 +514,10 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
 		moveToDirection,
 		moveToSlide,
 		snapToClosestSlide,
+		getInclusiveScrollWidth,
+		getInclusiveClientWidth,
+		getScrollLeft,
+		setScrollLeft,
 		on,
 		options,
 	};

package/src/core/types.ts

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

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/plugins/arrows/index.ts

@@ -65,8 +65,12 @@ 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.addEventListener( 'click', () => slider.moveToDirection( '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' );
+			}
+		} );
 
 		const next = document.createElement( 'button' );
 		next.setAttribute( 'class', options.classNames.nextButton );
@@ -74,28 +78,34 @@ 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.addEventListener( 'click', () => slider.moveToDirection( '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' );
+			}
+		} );
 
 		// insert buttons to the nav
 		nav.appendChild( prev );
 		nav.appendChild( next );
 
 		const update = () => {
-			const scrollLeft = slider.container.scrollLeft;
-			const scrollWidth = slider.container.scrollWidth;
-			const clientWidth = slider.container.clientWidth;
+			const scrollLeft = slider.getScrollLeft();
+			const scrollWidth = slider.getInclusiveScrollWidth();
+			const clientWidth = slider.getInclusiveClientWidth();
 			const buffer      = 1;
-			if ( scrollLeft === 0 ) {
+			if ( Math.floor( scrollLeft ) === 0 ) {
 				prev.setAttribute( 'data-has-content', 'false' );
 			} else {
 				prev.setAttribute( 'data-has-content', 'true' );
 			}
-			if ( scrollLeft + clientWidth >= scrollWidth - buffer ) {
+			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 ) {
@@ -110,7 +120,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

@@ -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/drag-scrolling/index.ts

@@ -59,7 +59,7 @@ export default function DragScrollingPlugin( args: { [key: string]: any } ) {
 			const walk = (x - startX);
 			const newScrollLeft = scrollLeft - walk;
 			mayNeedToSnap = true;
-			if ( slider.container.scrollLeft !== newScrollLeft ) {
+			if ( Math.floor( slider.container.scrollLeft ) !== Math.floor( newScrollLeft ) ) {
 				isMovingForward = slider.container.scrollLeft < newScrollLeft;
 			}
 			slider.container.scrollLeft = newScrollLeft;

package/src/plugins/fade/index.ts

@@ -48,26 +48,26 @@ 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;
-			if ( position <= fadeItemStart.offsetWidth ) {
+			const position = slider.getScrollLeft();
+			if ( Math.floor( position ) <= Math.floor( fadeItemStart.offsetWidth ) ) {
 				return position / Math.max(fadeItemStart.offsetWidth, 1);
 			}
 			return 1;
 		}
 
 		const hasFadeAtEnd = () => {
-			return slider.container.scrollLeft < (slider.container.scrollWidth - slider.container.clientWidth - fadeItemEnd.offsetWidth);
+			return Math.floor( slider.getScrollLeft() ) < Math.floor( slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth() - fadeItemEnd.offsetWidth );
 		}
 
 		const fadeAtEndOpacity = () => {
-			const position = slider.container.scrollLeft;
-			const maxPosition = slider.container.scrollWidth - slider.container.clientWidth;
+			const position = slider.getScrollLeft();
+			const maxPosition = slider.getInclusiveScrollWidth() - slider.getInclusiveClientWidth();
 			const maxFadePosition = maxPosition - fadeItemEnd.offsetWidth;
-			if ( position >= maxFadePosition ) {
+			if ( Math.floor( position ) >= Math.floor( maxFadePosition ) ) {
 				return ( ( maxFadePosition - position ) / Math.max(fadeItemEnd.offsetWidth, 1) ) + 1;
 			}
 			return 1;
@@ -97,6 +97,5 @@ export default function FadePlugin( args: { [key: string]: any } ) {
 		};
 		slider.on('scroll', debouncedUpdate);
 
-
 	};
 }

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 );
 	};
 }