@evermade/overflow-slider 3.0.0 → 3.2.0

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

@@ -32,41 +32,40 @@ function ScrollIndicatorPlugin(args) {
         setDataAttributes();
         const getScrollbarButtonLeftOffset = () => {
             const contentRatio = scrollbarButton.offsetWidth / slider.details.containerWidth;
-            return slider.container.scrollLeft * contentRatio;
+            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);
             }
             requestId = window.requestAnimationFrame(() => {
-                const scrollbarButtonWidth = (slider.details.containerWidth / slider.details.scrollableAreaWidth) * 100;
+                const scrollbarButtonWidth = (slider.details.containerWidth / slider.container.scrollWidth) * 100;
                 const scrollLeftInPortion = getScrollbarButtonLeftOffset();
                 scrollbarButton.style.width = `${scrollbarButtonWidth}%`;
                 scrollbarButton.style.transform = `translateX(${scrollLeftInPortion}px)`;
-                // aria-valuenow
-                const scrollLeft = slider.container.scrollLeft;
-                const scrollWidth = slider.container.scrollWidth;
+                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());
             });
         };
-        // insert to DOM
         if (options.container) {
             options.container.appendChild(scrollbarContainer);
         }
         else {
             (_c = slider.container.parentNode) === null || _c === void 0 ? void 0 : _c.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');
@@ -75,29 +74,29 @@ function ScrollIndicatorPlugin(args) {
                 slider.moveToDirection('next');
             }
         });
-        // handle click to before or after the scrollbar button
+        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 (clickX < scrollbarButtonLeft) {
-                slider.moveToDirection('prev');
+            const clickX = e.pageX - Math.abs(scrollbarContainer.offsetLeft);
+            if (Math.floor(clickX) < Math.floor(scrollbarButtonLeft)) {
+                slider.moveToDirection(slider.options.rtl ? 'next' : 'prev');
             }
-            else if (clickX > scrollbarButtonRight) {
-                slider.moveToDirection('next');
+            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) => {
             isInteractionDown = true;
             const pageX = e.pageX || e.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');
             e.preventDefault();
@@ -112,7 +111,8 @@ function ScrollIndicatorPlugin(args) {
             const x = pageX - scrollbarContainer.offsetLeft;
             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;

package/docs/dist/plugins/scroll-indicator/scroll-indicator/index.min.js

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

package/docs/dist/plugins/thumbnails/thumbnails/index.esm.js

@@ -27,13 +27,16 @@ function FullWidthPlugin(args) {
         };
         setActiveThumbnail();
         addClickListeners();
-        // @todo debounce on scroll
         mainSlider.on('scrollEnd', () => {
             setTimeout(() => {
-                const activeSlideIdx = mainSlider.activeSlideIdx;
-                const activeThumbnail = slider.slides[activeSlideIdx];
+                const mainActiveSlideIdx = mainSlider.activeSlideIdx;
+                const thumbActiveSlideIdx = slider.activeSlideIdx;
+                if (thumbActiveSlideIdx === mainActiveSlideIdx) {
+                    return;
+                }
+                const activeThumbnail = slider.slides[mainActiveSlideIdx];
                 setActiveThumbnail(activeThumbnail);
-                slider.moveToSlide(activeSlideIdx);
+                slider.moveToSlide(mainActiveSlideIdx);
             }, 50);
         });
     };

package/docs/dist/plugins/thumbnails/thumbnails/index.min.js

@@ -1 +1 @@
-function e(e){return i=>{const l={mainSlider:e.mainSlider}.mainSlider,t=(e=null)=>{null===e&&i.slides.length>0&&(e=i.slides[0]),null!==e&&(i.slides.forEach((e=>{e.setAttribute("aria-current","false")})),e.setAttribute("aria-current","true"))};t(),i.slides.forEach(((e,i)=>{e.addEventListener("click",(()=>{l.moveToSlide(i),t(e)}))})),l.on("scrollEnd",(()=>{setTimeout((()=>{const e=l.activeSlideIdx,r=i.slides[e];t(r),i.moveToSlide(e)}),50)}))}}export{e as default};
+function e(e){return i=>{const t={mainSlider:e.mainSlider}.mainSlider,l=(e=null)=>{null===e&&i.slides.length>0&&(e=i.slides[0]),null!==e&&(i.slides.forEach((e=>{e.setAttribute("aria-current","false")})),e.setAttribute("aria-current","true"))};l(),i.slides.forEach(((e,i)=>{e.addEventListener("click",(()=>{t.moveToSlide(i),l(e)}))})),t.on("scrollEnd",(()=>{setTimeout((()=>{const e=t.activeSlideIdx;if(i.activeSlideIdx===e)return;const r=i.slides[e];l(r),i.moveToSlide(e)}),50)}))}}export{e as default};

package/docs/index-rtl.html

@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="rtl">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link href="dist/overflow-slider.css" rel="stylesheet" />
+		<link href="assets/demo.css" rel="stylesheet" />
+		<title>Demo – overflow-slider</title>
+		<meta property="og:description" content="overflow-slider" />
+	</head>
+	<body>
+		<div class="site">
+			<header class="site-header">
+				<div class="site-header__inner">
+					<div class="site-branding">
+						<a href="https://github.com/evermade/overflow-slider" class="site-logo" aria-label="Evermade">
+							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 270 270" width="64" height="64">
+								<path fill="#F04D37" d="M0 0h270v270H0z"/>
+								<path fill="#fff" d="M134.748 73.7339c-13.949-.1043-27.398 5.1741-37.535 14.7314-10.1368 9.5573-16.1761 22.6537-16.8549 36.5487H189.235c-.715-13.9-6.779-26.9892-16.929-36.5417-10.15-9.5525-23.603-14.8318-37.558-14.7384Zm85.532 74.6601H79.2372c2.228 13.263 9.1042 25.307 19.4039 33.986 10.2999 8.679 23.3539 13.43 36.8379 13.406 9.931.362 19.754-2.16 28.276-7.26 8.521-5.099 15.375-12.557 19.729-21.467h32.848c-13.354 35.921-41.474 54.926-82.072 54.926-11.548.213-23.019-1.905-33.726-6.227-10.7059-4.321-20.4256-10.757-28.5743-18.921-8.1488-8.163-14.5585-17.886-18.8439-28.583-4.2854-10.697-6.358-22.148-6.0933-33.664 0-49.9195 35.7237-87.59 87.7255-87.59 50.588 0 87.238 37.476 87.238 85.743.118 5.275-.489 10.541-1.804 15.651"/>
+							</svg>
+							<span>@evermade/overflow-slider</span>
+						</a>
+					</div>
+				</div>
+			</header>
+			<script type="module" src="assets/demo.js"></script>
+			<main id="main" class="site-main">
+				<article class="entry">
+					<div class="entry__content">
+						<h1>Overflow Slider Demos RTL</h1>
+
+						<section class="entry__section">
+							<h2>Basic Demos</h2>
+							<div class="entry__item">
+								<h3>Pure CSS</h3>
+								<p>No plugins applied. Using only CSS.</p>
+								<div class="overflow-slider example-container example-container-1-css">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+									<a href="#11" class="example-item example-item--11">11</a>
+									<a href="#12" class="example-item example-item--12">12</a>
+									<a href="#13" class="example-item example-item--13">13</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Mouse Dragging</h3>
+								<p>Drag slides with mouse. Uses DragScrollingPlugin. These slides are clickable.</p>
+								<div class="overflow-slider example-container example-container-1-drag-scrolling-clickable">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+									<a href="#11" class="example-item example-item--11">11</a>
+									<a href="#12" class="example-item example-item--12">12</a>
+									<a href="#13" class="example-item example-item--13">13</a>
+								</div>
+								<p style="margin-top:1.5rem;">These slides are not clickable.</p>
+								<div class="overflow-slider example-container example-container-1-drag-scrolling-not-clickable">
+									<div class="example-item example-item--1">1</div>
+									<div class="example-item example-item--2">2</div>
+									<div class="example-item example-item--3">3</div>
+									<div class="example-item example-item--4">4</div>
+									<div class="example-item example-item--5">5</div>
+									<div class="example-item example-item--6">6</div>
+									<div class="example-item example-item--7">7</div>
+									<div class="example-item example-item--8">8</div>
+									<div class="example-item example-item--9">9</div>
+									<div class="example-item example-item--10">10</div>
+									<div class="example-item example-item--11">11</div>
+									<div class="example-item example-item--12">12</div>
+									<div class="example-item example-item--13">13</div>
+								</div>
+								<p style="margin-top:1.5rem;">Scroll-snap emulation enabled.</p>
+								<div class="overflow-slider example-container example-container-1-drag-scrolling-scroll-snap">
+									<div class="example-item example-item--1">1</div>
+									<div class="example-item example-item--2">2</div>
+									<div class="example-item example-item--3">3</div>
+									<div class="example-item example-item--4">4</div>
+									<div class="example-item example-item--5">5</div>
+									<div class="example-item example-item--6">6</div>
+									<div class="example-item example-item--7">7</div>
+									<div class="example-item example-item--8">8</div>
+									<div class="example-item example-item--9">9</div>
+									<div class="example-item example-item--10">10</div>
+									<div class="example-item example-item--11">11</div>
+									<div class="example-item example-item--12">12</div>
+									<div class="example-item example-item--13">13</div>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Arrows</h3>
+								<p>Display buttons to move slides. Uses ArrowsPlugin.</p>
+								<div class="overflow-slider example-container example-container-1-arrows">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+									<a href="#11" class="example-item example-item--11">11</a>
+									<a href="#12" class="example-item example-item--12">12</a>
+									<a href="#13" class="example-item example-item--13">13</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Scroll Indicator</h3>
+								<p>Display scroll indicator. Uses ScrollIndicatorPlugin.</p>
+								<div class="overflow-slider example-container example-container-1-scroll-indicator">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Dots</h3>
+								<p>Display dots indicator. Uses DotsPlugin.</p>
+								<div class="overflow-slider example-container example-container-1-dots">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Fade</h3>
+								<p>Display fade. Uses FadePlugin. Fade can be on both sides but having it only at end is more usable.</p>
+								<div class="example-container-1-fade-wrap">
+									<div class="example-container-1-fade__start"></div>
+									<div class="overflow-slider example-container example-container-1-fade">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+										<a href="#5" class="example-item example-item--5">5</a>
+										<a href="#6" class="example-item example-item--6">6</a>
+										<a href="#7" class="example-item example-item--7">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<a href="#9" class="example-item example-item--9">9</a>
+										<a href="#10" class="example-item example-item--10">10</a>
+									</div>
+									<div class="example-container-1-fade__end"></div>
+								</div>
+							</div>
+
+						</section>
+
+						<section class="entry__section">
+
+							<h2>Slide Contents</h2>
+
+							<div class="entry__item">
+								<h3>Perfectly Fitting Slides</h3>
+								<p>Slides fill the container perfectly.</p>
+								<div class="overflow-slider example-container example-container-2-perfect-fit">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Varying Width Slides</h3>
+								<p>Slides are not equal width.</p>
+								<div class="overflow-slider example-container example-container-2-varying-widths">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Only Few Slides</h3>
+								<p>Not enough slides to have a slider (on mobile has though).</p>
+								<div class="overflow-slider example-container example-container-2-only-few-slides">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+								</div>
+							</div>
+
+						</section>
+
+						<section class="entry__section">
+
+							<h2>CSS Trickery</h2>
+
+							<div class="entry__item">
+								<h3>Scroll Snapping (mandatory)</h3>
+								<p>Force scrolling to snap to slide always.</p>
+								<div class="overflow-slider example-container example-container-3-scroll-snapping-mandatory">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Scroll Snapping (proximity)</h3>
+								<p>Force scrolling to snap to slide not so strictly.</p>
+								<div class="overflow-slider example-container example-container-3-scroll-snapping-proximity">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Entrance and Exit Animations (experimental)</h3>
+								<p>Animate slides when they appear and disappear. Seem to only work on Chrome.</p>
+								<div class="overflow-slider example-container example-container-3-entrance-animation">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+									<a href="#9" class="example-item example-item--9">9</a>
+									<a href="#10" class="example-item example-item--10">10</a>
+								</div>
+							</div>
+
+						</section>
+
+						<section class="entry__section">
+
+							<h2>Real Life Usage</h2>
+
+							<div class="entry__item">
+								<h3>Filters</h3>
+								<p>Display filter buttons in one line that overflows when necessary.</p>
+								<div class="example-4-filters-wrapper">
+									<div class="example-4-filters-previous">
+									</div>
+									<div class="overflow-slider example-container-4-filters">
+										<a href="#1" class="example-filter">Development</a>
+										<a href="#2" class="example-filter">Design</a>
+										<a href="#3" class="example-filter">Marketing</a>
+										<a href="#4" class="example-filter">Sales</a>
+										<a href="#5" class="example-filter">Support</a>
+										<a href="#6" class="example-filter">Management</a>
+										<a href="#7" class="example-filter">HR</a>
+										<a href="#8" class="example-filter">Finance</a>
+										<a href="#9" class="example-filter">Legal</a>
+										<a href="#10" class="example-filter">Customer Service</a>
+										<a href="#11" class="example-filter">Operations</a>
+										<a href="#12" class="example-filter">Other</a>
+									</div>
+									<div class="example-4-filters-next"></div>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Grid On Desktop, Slider On Mobile</h3>
+								<p>Display contents differently for different sized screens.</p>
+								<div class="overflow-slider example-container-4-grid-or-slider">
+									<a href="#1" class="example-item example-item--1">1</a>
+									<a href="#2" class="example-item example-item--2">2</a>
+									<a href="#3" class="example-item example-item--3">3</a>
+									<a href="#4" class="example-item example-item--4">4</a>
+									<a href="#5" class="example-item example-item--5">5</a>
+									<a href="#6" class="example-item example-item--6">6</a>
+									<a href="#7" class="example-item example-item--7">7</a>
+									<a href="#8" class="example-item example-item--8">8</a>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Full Width Slider</h3>
+								<p>Allow slides to flow in full screen but center them accoring to your content. Uses FullWidthPlugin.</p>
+								<div class="example-container-4-full-width-wrapper">
+									<div class="overflow-slider example-container-4-full-width">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+										<a href="#5" class="example-item example-item--5">5</a>
+										<a href="#6" class="example-item example-item--6">6</a>
+										<a href="#7" class="example-item example-item--7">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<a href="#9" class="example-item example-item--9">9</a>
+										<a href="#10" class="example-item example-item--10">10</a>
+										<a href="#11" class="example-item example-item--11">11</a>
+										<a href="#12" class="example-item example-item--12">12</a>
+									</div>
+								</div>
+							</div>
+
+							<div class="entry__item">
+								<h3>Synced Slider</h3>
+								<p>Sync slides from thumbnails. </p>
+								<div class="example-container-4-thumbnails-wrapper">
+									<div class="overflow-slider example-container-4-synced-main">
+										<a href="#1" class="example-item example-item--1">1</a>
+										<a href="#2" class="example-item example-item--2">2</a>
+										<a href="#3" class="example-item example-item--3">3</a>
+										<a href="#4" class="example-item example-item--4">4</a>
+										<a href="#5" class="example-item example-item--5">5</a>
+										<a href="#6" class="example-item example-item--6">6</a>
+										<a href="#7" class="example-item example-item--7">7</a>
+										<a href="#8" class="example-item example-item--8">8</a>
+										<a href="#9" class="example-item example-item--9">9</a>
+										<a href="#10" class="example-item example-item--10">10</a>
+										<a href="#11" class="example-item example-item--11">11</a>
+										<a href="#12" class="example-item example-item--12">12</a>
+									</div>
+									<div class="overflow-slider example-container-4-synced-thumbnails">
+										<button class="example-item example-item--1">1</button>
+										<button class="example-item example-item--2">2</button>
+										<button class="example-item example-item--3">3</button>
+										<button class="example-item example-item--4">4</button>
+										<button class="example-item example-item--5">5</button>
+										<button class="example-item example-item--6">6</button>
+										<button class="example-item example-item--7">7</button>
+										<button class="example-item example-item--8">8</button>
+										<button class="example-item example-item--9">9</button>
+										<button class="example-item example-item--10">10</button>
+										<button class="example-item example-item--11">11</button>
+										<button class="example-item example-item--12">12</button>
+									</div>
+								</div>
+							</div>
+
+						</section>
+
+					</div>
+				</article>
+			</main>
+			<div class="site-footer">
+				<p>
+					This is demo for the
+					<a href="https://github.com/evermade/overflow-slider">@evermade/overflow-slider</a>.
+				</p>
+			</div>
+		</div>
+	</body>
+</html>

package/docs/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "3.0.0",
+	"version": "3.2.0",
 	"description": "Accessible slider tha works with overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",

package/src/core/details.ts

@@ -11,7 +11,7 @@ export default function details( slider: Slider) {
 	let amountOfPages = 0;
 	let currentPage = 1;
 
-	if (slider.container.scrollWidth > slider.container.clientWidth) {
+	if ( Math.floor( slider.getInclusiveScrollWidth() ) > Math.floor( slider.getInclusiveClientWidth() ) ) {
 		hasOverflow = true;
 	}
 
@@ -19,14 +19,14 @@ export default function details( slider: Slider) {
 
 	containerWidth = slider.container.offsetWidth;
 
-	scrollableAreaWidth = slider.container.scrollWidth;
+	scrollableAreaWidth = slider.getInclusiveScrollWidth();
 
 	amountOfPages = Math.ceil(scrollableAreaWidth / containerWidth);
 
-	if (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 (slider.container.scrollLeft + containerWidth === 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 };