@evermade/overflow-slider 4.0.0 → 4.2.0

package/dist/plugins/dots/index.esm.js

@@ -7,11 +7,12 @@ const DEFAULT_CLASS_NAMES = {
 };
 function DotsPlugin(args) {
     return (slider) => {
-        var _a, _b;
+        var _a, _b, _c;
         const options = {
+            type: (_a = args === null || args === void 0 ? void 0 : args.type) !== null && _a !== void 0 ? _a : 'slide',
             texts: Object.assign(Object.assign({}, DEFAULT_TEXTS), (args === null || args === void 0 ? void 0 : args.texts) || []),
             classNames: Object.assign(Object.assign({}, DEFAULT_CLASS_NAMES), (args === null || args === void 0 ? void 0 : args.classNames) || []),
-            container: (_a = args === null || args === void 0 ? void 0 : args.container) !== null && _a !== void 0 ? _a : null,
+            container: (_b = args === null || args === void 0 ? void 0 : args.container) !== null && _b !== void 0 ? _b : null,
         };
         const dots = document.createElement('div');
         dots.classList.add(options.classNames.dotsContainer);
@@ -20,18 +21,18 @@ function DotsPlugin(args) {
             dots.setAttribute('data-has-content', slider.details.hasOverflow.toString());
             dots.innerHTML = '';
             const dotsList = document.createElement('ul');
-            const pages = slider.details.slideCount;
-            const currentItem = slider.activeSlideIdx;
-            if (pages <= 1) {
+            const count = options.type === 'view' ? slider.details.amountOfPages : slider.details.slideCount;
+            const currentIndex = options.type === 'view' ? slider.details.currentPage : slider.activeSlideIdx;
+            if (count <= 1) {
                 return;
             }
-            for (let i = 0; i < pages; i++) {
+            for (let i = 0; i < count; i++) {
                 const dotListItem = document.createElement('li');
                 const dot = document.createElement('button');
                 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 === currentItem).toString());
+                dot.setAttribute('aria-label', options.texts.dotDescription.replace('%d', (i + 1).toString()).replace('%d', count.toString()));
+                dot.setAttribute('aria-pressed', (i === currentIndex).toString());
                 dot.setAttribute('data-item', (i + 1).toString());
                 dotListItem.appendChild(dot);
                 dotsList.appendChild(dotListItem);
@@ -45,23 +46,23 @@ function DotsPlugin(args) {
                     }
                     const currentItem = parseInt((_a = currentItemItem.getAttribute('data-item')) !== null && _a !== void 0 ? _a : '1');
                     if (e.key === 'ArrowLeft') {
-                        const previousPage = currentItem - 1;
-                        if (previousPage > 0) {
-                            const matchingDot = dots.querySelector(`[data-item="${previousPage}"]`);
+                        const previousIndex = currentItem - 1;
+                        if (previousIndex > 0) {
+                            const matchingDot = dots.querySelector(`[data-item="${previousIndex}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
-                            activateDot(previousPage);
+                            activateDot(previousIndex);
                         }
                     }
                     if (e.key === 'ArrowRight') {
-                        const nextPage = currentItem + 1;
-                        if (nextPage <= pages) {
-                            const matchingDot = dots.querySelector(`[data-item="${nextPage}"]`);
+                        const nextIndex = currentItem + 1;
+                        if (nextIndex <= count) {
+                            const matchingDot = dots.querySelector(`[data-item="${nextIndex}"]`);
                             if (matchingDot) {
                                 matchingDot.focus();
                             }
-                            activateDot(nextPage);
+                            activateDot(nextIndex);
                         }
                     }
                 });
@@ -75,19 +76,30 @@ function DotsPlugin(args) {
                 }
             }
         };
-        const activateDot = (item) => {
-            slider.moveToSlide(item - 1);
+        const activateDot = (index) => {
+            if (options.type === 'view') {
+                const targetPosition = slider.details.containerWidth * (index - 1);
+                const scrollLeft = slider.options.rtl ? -targetPosition : targetPosition;
+                slider.container.scrollTo({
+                    left: scrollLeft,
+                    behavior: slider.options.scrollBehavior
+                });
+            }
+            else {
+                slider.moveToSlide(index - 1);
+            }
         };
         buildDots();
         if (options.container) {
             options.container.appendChild(dots);
         }
         else {
-            (_b = slider.container.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(dots, slider.container.nextSibling);
+            (_c = slider.container.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(dots, slider.container.nextSibling);
         }
         slider.on('scrollEnd', buildDots);
         slider.on('contentsChanged', buildDots);
         slider.on('containerSizeChanged', buildDots);
+        slider.on('detailsChanged', buildDots);
     };
 }
 

package/dist/plugins/dots/index.min.js

@@ -1 +1 @@
-const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return o=>{var i,s;const a={texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(i=null==n?void 0:n.container)&&void 0!==i?i:null},r=document.createElement("div");r.classList.add(a.classNames.dotsContainer);let d=null;const l=()=>{r.setAttribute("data-has-content",o.details.hasOverflow.toString()),r.innerHTML="";const t=document.createElement("ul"),e=o.details.slideCount,n=o.activeSlideIdx;if(!(e<=1)){for(let o=0;o<e;o++){const i=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",a.classNames.dotsItem),s.setAttribute("aria-label",a.texts.dotDescription.replace("%d",(o+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(o===n).toString()),s.setAttribute("data-item",(o+1).toString()),i.appendChild(s),t.appendChild(i),s.addEventListener("click",()=>c(o+1)),s.addEventListener("focus",()=>d=o+1),s.addEventListener("keydown",t=>{var n;const o=r.querySelector('[aria-pressed="true"]');if(!o)return;const i=parseInt(null!==(n=o.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=i-1;if(t>0){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}if("ArrowRight"===t.key){const t=i+1;if(t<=e){const e=r.querySelector(`[data-item="${t}"]`);e&&e.focus(),c(t)}}})}if(r.appendChild(t),d){const t=r.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},c=t=>{o.moveToSlide(t-1)};l(),a.container?a.container.appendChild(r):null===(s=o.container.parentNode)||void 0===s||s.insertBefore(r,o.container.nextSibling),o.on("scrollEnd",l),o.on("contentsChanged",l),o.on("containerSizeChanged",l)}}export{n as default};
+const t={dotDescription:"Page %d of %d"},e={dotsContainer:"overflow-slider__dots",dotsItem:"overflow-slider__dot-item"};function n(n){return i=>{var o,s,a;const r={type:null!==(o=null==n?void 0:n.type)&&void 0!==o?o:"slide",texts:Object.assign(Object.assign({},t),(null==n?void 0:n.texts)||[]),classNames:Object.assign(Object.assign({},e),(null==n?void 0:n.classNames)||[]),container:null!==(s=null==n?void 0:n.container)&&void 0!==s?s:null},l=document.createElement("div");l.classList.add(r.classNames.dotsContainer);let d=null;const c=()=>{l.setAttribute("data-has-content",i.details.hasOverflow.toString()),l.innerHTML="";const t=document.createElement("ul"),e="view"===r.type?i.details.amountOfPages:i.details.slideCount,n="view"===r.type?i.details.currentPage:i.activeSlideIdx;if(!(e<=1)){for(let i=0;i<e;i++){const o=document.createElement("li"),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("class",r.classNames.dotsItem),s.setAttribute("aria-label",r.texts.dotDescription.replace("%d",(i+1).toString()).replace("%d",e.toString())),s.setAttribute("aria-pressed",(i===n).toString()),s.setAttribute("data-item",(i+1).toString()),o.appendChild(s),t.appendChild(o),s.addEventListener("click",()=>u(i+1)),s.addEventListener("focus",()=>d=i+1),s.addEventListener("keydown",t=>{var n;const i=l.querySelector('[aria-pressed="true"]');if(!i)return;const o=parseInt(null!==(n=i.getAttribute("data-item"))&&void 0!==n?n:"1");if("ArrowLeft"===t.key){const t=o-1;if(t>0){const e=l.querySelector(`[data-item="${t}"]`);e&&e.focus(),u(t)}}if("ArrowRight"===t.key){const t=o+1;if(t<=e){const e=l.querySelector(`[data-item="${t}"]`);e&&e.focus(),u(t)}}})}if(l.appendChild(t),d){const t=l.querySelector(`[data-item="${d}"]`);t&&t.focus()}}},u=t=>{if("view"===r.type){const e=i.details.containerWidth*(t-1),n=i.options.rtl?-e:e;i.container.scrollTo({left:n,behavior:i.options.scrollBehavior})}else i.moveToSlide(t-1)};c(),r.container?r.container.appendChild(l):null===(a=i.container.parentNode)||void 0===a||a.insertBefore(l,i.container.nextSibling),i.on("scrollEnd",c),i.on("contentsChanged",c),i.on("containerSizeChanged",c),i.on("detailsChanged",c)}}export{n as default};

package/dist/plugins/drag-scrolling/index.d.ts

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type DragScrollingOptions = {
     draggedDistanceThatPreventsClick: number;

package/dist/plugins/fade/index.d.ts

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type FadeOptions = {
     classNames: {

package/dist/plugins/full-width/index.d.ts

@@ -1,7 +1,7 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type FullWidthOptions = {
-    targetWidth: (slider: Slider) => number;
+    targetWidth?: (slider: Slider) => number;
     addMarginBefore: boolean;
     addMarginAfter: boolean;
 };

package/dist/plugins/full-width/index.esm.js

@@ -1,42 +1,59 @@
 const DEFAULT_TARGET_WIDTH = (slider) => { var _a, _b; return (_b = (_a = slider.container.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : window.innerWidth; };
 function FullWidthPlugin(args) {
     return (slider) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const options = {
-            targetWidth: (_a = args === null || args === void 0 ? void 0 : args.targetWidth) !== null && _a !== void 0 ? _a : null,
+            targetWidth: (_a = args === null || args === void 0 ? void 0 : args.targetWidth) !== null && _a !== void 0 ? _a : undefined,
             addMarginBefore: (_b = args === null || args === void 0 ? void 0 : args.addMarginBefore) !== null && _b !== void 0 ? _b : true,
             addMarginAfter: (_c = args === null || args === void 0 ? void 0 : args.addMarginAfter) !== null && _c !== void 0 ? _c : true,
         };
+        if (typeof slider.options.targetWidth !== 'function') {
+            slider.options.targetWidth = (_d = options.targetWidth) !== null && _d !== void 0 ? _d : DEFAULT_TARGET_WIDTH;
+        }
+        const resolveTargetWidth = () => {
+            var _a;
+            if (typeof slider.options.targetWidth === 'function') {
+                return slider.options.targetWidth;
+            }
+            return (_a = options.targetWidth) !== null && _a !== void 0 ? _a : DEFAULT_TARGET_WIDTH;
+        };
         const update = () => {
             const slides = slider.container.querySelectorAll(slider.options.slidesSelector);
             if (!slides.length) {
                 return;
             }
+            const targetWidthFn = resolveTargetWidth();
+            const rawMargin = (window.innerWidth - targetWidthFn(slider)) / 2;
+            const marginAmount = Math.max(0, Math.floor(rawMargin));
+            const marginValue = marginAmount ? `${marginAmount}px` : '';
+            slides.forEach((slide) => {
+                const element = slide;
+                element.style.marginInlineStart = '';
+                element.style.marginInlineEnd = '';
+            });
             const firstSlide = slides[0];
             const lastSlide = slides[slides.length - 1];
-            const marginAmount = Math.floor((window.innerWidth - getTargetWidth()) / 2);
             if (options.addMarginBefore) {
-                firstSlide.style.marginInlineStart = `${marginAmount}px`;
+                firstSlide.style.marginInlineStart = marginValue;
+                slider.container.style.setProperty('scroll-padding-inline-start', marginValue || '0px');
             }
-            if (options.addMarginAfter) {
-                lastSlide.style.marginInlineEnd = `${marginAmount}px`;
+            else {
+                slider.container.style.removeProperty('scroll-padding-inline-start');
             }
-            slider.container.setAttribute('data-full-width-offset', marginAmount.toString());
-            setCSS();
-        };
-        const getTargetWidth = () => {
-            if (typeof options.targetWidth === 'function') {
-                return options.targetWidth(slider);
+            if (options.addMarginAfter) {
+                lastSlide.style.marginInlineEnd = marginValue;
+                slider.container.style.setProperty('scroll-padding-inline-end', marginValue || '0px');
             }
-            if (typeof slider.options.targetWidth === 'function') {
-                return slider.options.targetWidth(slider);
+            else {
+                slider.container.style.removeProperty('scroll-padding-inline-end');
             }
-            return DEFAULT_TARGET_WIDTH(slider);
+            slider.container.setAttribute('data-full-width-offset', `${marginAmount}`);
+            setCSS(targetWidthFn);
+            slider.emit('fullWidthPluginUpdate');
         };
-        const setCSS = () => {
-            if (typeof slider.options.targetWidth === 'function') {
-                slider.options.cssVariableContainer.style.setProperty('--slider-container-target-width', `${getTargetWidth()}px`);
-            }
+        const setCSS = (targetWidthFn) => {
+            const width = targetWidthFn(slider);
+            slider.options.cssVariableContainer.style.setProperty('--slider-container-target-width', `${width}px`);
         };
         update();
         slider.on('contentsChanged', update);

package/dist/plugins/full-width/index.min.js

@@ -1 +1 @@
-function t(t){return n=>{var e,i,o;const r={targetWidth:null!==(e=null==t?void 0:t.targetWidth)&&void 0!==e?e:null,addMarginBefore:null===(i=null==t?void 0:t.addMarginBefore)||void 0===i||i,addMarginAfter:null===(o=null==t?void 0:t.addMarginAfter)||void 0===o||o},d=()=>{const t=n.container.querySelectorAll(n.options.slidesSelector);if(!t.length)return;const e=t[0],i=t[t.length-1],o=Math.floor((window.innerWidth-a())/2);r.addMarginBefore&&(e.style.marginInlineStart=`${o}px`),r.addMarginAfter&&(i.style.marginInlineEnd=`${o}px`),n.container.setAttribute("data-full-width-offset",o.toString()),l()},a=()=>"function"==typeof r.targetWidth?r.targetWidth(n):"function"==typeof n.options.targetWidth?n.options.targetWidth(n):(t=>{var n,e;return null!==(e=null===(n=t.container.parentElement)||void 0===n?void 0:n.offsetWidth)&&void 0!==e?e:window.innerWidth})(n),l=()=>{"function"==typeof n.options.targetWidth&&n.options.cssVariableContainer.style.setProperty("--slider-container-target-width",`${a()}px`)};d(),n.on("contentsChanged",d),n.on("containerSizeChanged",d),window.addEventListener("resize",d)}}export{t as default};
+const t=t=>{var n,e;return null!==(e=null===(n=t.container.parentElement)||void 0===n?void 0:n.offsetWidth)&&void 0!==e?e:window.innerWidth};function n(n){return e=>{var i,r,o,d;const l={targetWidth:null!==(i=null==n?void 0:n.targetWidth)&&void 0!==i?i:void 0,addMarginBefore:null===(r=null==n?void 0:n.addMarginBefore)||void 0===r||r,addMarginAfter:null===(o=null==n?void 0:n.addMarginAfter)||void 0===o||o};"function"!=typeof e.options.targetWidth&&(e.options.targetWidth=null!==(d=l.targetWidth)&&void 0!==d?d:t);const a=()=>{const n=e.container.querySelectorAll(e.options.slidesSelector);if(!n.length)return;const i=(()=>{var n;return"function"==typeof e.options.targetWidth?e.options.targetWidth:null!==(n=l.targetWidth)&&void 0!==n?n:t})(),r=(window.innerWidth-i(e))/2,o=Math.max(0,Math.floor(r)),d=o?`${o}px`:"";n.forEach(t=>{const n=t;n.style.marginInlineStart="",n.style.marginInlineEnd=""});const a=n[0],c=n[n.length-1];l.addMarginBefore?(a.style.marginInlineStart=d,e.container.style.setProperty("scroll-padding-inline-start",d||"0px")):e.container.style.removeProperty("scroll-padding-inline-start"),l.addMarginAfter?(c.style.marginInlineEnd=d,e.container.style.setProperty("scroll-padding-inline-end",d||"0px")):e.container.style.removeProperty("scroll-padding-inline-end"),e.container.setAttribute("data-full-width-offset",`${o}`),s(i),e.emit("fullWidthPluginUpdate")},s=t=>{const n=t(e);e.options.cssVariableContainer.style.setProperty("--slider-container-target-width",`${n}px`)};a(),e.on("contentsChanged",a),e.on("containerSizeChanged",a),window.addEventListener("resize",a)}}export{n as default};

package/dist/plugins/scroll-indicator/index.d.ts

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type ScrollIndicatorOptions = {
     classNames: {

package/dist/plugins/skip-links/index.d.ts

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type SkipLinkOptions = {
     texts: {

package/dist/plugins/thumbnails/index.d.ts

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type ThumbnailsOptions = {
     mainSlider: Slider;

package/docs/assets/demo.css

@@ -625,6 +625,46 @@ h3:before {
 	height: 1.625rem !important;
 }
 
+.example-container-1-classname-opacity .example-item {
+	transition: .5s ease-in-out;
+}
+
+.example-container-1-classname-opacity .is-visible {
+	opacity: 1;
+}
+.example-container-1-classname-opacity .is-hidden {
+	opacity: 0;
+}
+
+.example-container-1-classname-partly {
+	width: 100vw;
+	margin-inline-start: calc(-50vw + 50%);
+	scroll-snap-type: x mandatory;
+}
+
+@media (min-width: 768px) {
+	.example-container-1-classname-partly .example-item {
+		width: calc( ( var( --slider-container-target-width ) / 4 ) - ( 3 / 4 * var( --slide-gap ) ) );
+	}
+
+.example-container-1-classname-partly .example-item {
+	transition: .2s ease-in-out;
+}
+
+.example-container-1-classname-partly .is-visible {
+	opacity: 1;
+	/* transform: scale(1); */
+}
+
+.example-container-1-classname-partly .is-partly-visible {
+	opacity: .5;
+	/* transform: scale(0.85); */
+}
+.example-container-1-classname-partly .is-hidden {
+	opacity: .2;
+	/* transform: scale(0); */
+}
+
 /* ===========================================================================
   Example 4: Filters
 =========================================================================== */
@@ -722,6 +762,7 @@ h3:before {
 .example-container-4-full-width {
 	width: 100vw;
 	margin-inline-start: calc(-50vw + 50%);
+	scroll-snap-type: x mandatory;
 }
 
 /* ===========================================================================
@@ -776,6 +817,7 @@ h3:before {
 .example-container-4-hero {
 	--slider-gap: 0;
 	gap: 0;
+	scroll-snap-type: x mandatory;
 }
 
 .example-container-4-hero > * {

package/docs/assets/demo.js

@@ -20,7 +20,8 @@ import DotsPlugin from '../dist/plugins/dots/index.esm.js';
 import FullWidthPlugin from '../dist/plugins/full-width/index.esm.js';
 import ThumbnailsPlugin from '../dist/plugins/thumbnails/index.esm.js';
 import FadePlugin from '../dist/plugins/fade/index.esm.js';
-// import InfiniteScrollPlugin from '../dist/plugins/infinite-scroll/index.esm.js';
+import ClassNamesPlugin from '../dist/plugins/classnames/index.esm.js';
+
 
 (function () {
 	const init = () => {
@@ -120,6 +121,24 @@ import FadePlugin from '../dist/plugins/fade/index.esm.js';
 		);
 		console.log( '1-dots', example1Dots );
 
+		const example1DotsView = new OverflowSlider(
+			document.querySelector( '.example-container-1-dots-view' ),
+			{
+				emulateScrollSnap: true,
+				rtl: document.documentElement.dir === 'rtl',
+			},
+			[
+				DragScrollingPlugin(),
+				SkipLinksPlugin(),
+				DotsPlugin(
+					{
+						type: 'view',
+					}
+				),
+			]
+		);
+		console.log( '1-dots-view', example1DotsView );
+
 		const example1Fade = new OverflowSlider(
 			document.querySelector( '.example-container-1-fade' ),
 			{
@@ -135,6 +154,43 @@ import FadePlugin from '../dist/plugins/fade/index.esm.js';
 		);
 		console.log( '1-fade', example1Fade );
 
+		const example1ClassNames = new OverflowSlider(
+			document.querySelector( '.example-container-1-classname-opacity' ),
+			{
+				emulateScrollSnap: true,
+				rtl: document.documentElement.dir === 'rtl',
+			},
+			[
+				DragScrollingPlugin(),
+				ClassNamesPlugin(),
+			]
+		);
+		console.log( '1-classname-opacity', example1ClassNames );
+
+		const example1ClassNamesPartly = new OverflowSlider(
+			document.querySelector( '.example-container-1-classname-partly' ),
+			{
+				emulateScrollSnap: true,
+				rtl: document.documentElement.dir === 'rtl',
+				targetWidth: (slider) => {
+					return slider.container.parentElement.clientWidth;
+				}
+			},
+			[
+				DragScrollingPlugin(),
+				FullWidthPlugin(),
+				ClassNamesPlugin(
+					{
+						classnames: {
+							partlyVisible: 'is-partly-visible',
+						},
+						freezeStateOnVisible: true,
+					}
+				),
+			]
+		);
+		console.log( '1-classname-partly', example1ClassNamesPartly );
+
 		const example1AutoplaySlide = new OverflowSlider(
 			document.querySelector( '.example-container-1-autoplay-slide' ),
 			{
@@ -163,25 +219,6 @@ import FadePlugin from '../dist/plugins/fade/index.esm.js';
 		);
 		console.log( '1-autoplay-view', example1AutoplayView );
 
-		// const example1Infinite = new OverflowSlider(
-		// 	document.querySelector( '.example-container-1-infinite' ),
-		// 	{
-		// 		emulateScrollSnap: true,
-		// 		rtl: document.documentElement.dir === 'rtl',
-		// 	},
-		// 	[
-		// 		DragScrollingPlugin(),
-		// 		AutoplayPlugin({
-		// 			movementType: 'slide',
-		// 			delayInMs: 1000,
-		// 			// loop: false, // infinite should loop it
-		// 		}),
-		// 		ScrollIndicatorPlugin(),
-		// 		InfiniteScrollPlugin(),
-		// 	]
-		// );
-		// console.log( '1-infinite', example1Infinite );
-
 		const example2PerfectFit = new OverflowSlider(
 			document.querySelector( '.example-container-2-perfect-fit' ),
 			{
@@ -288,17 +325,14 @@ import FadePlugin from '../dist/plugins/fade/index.esm.js';
 			document.querySelector( '.example-container-4-full-width' ),
 			{
 				rtl: document.documentElement.dir === 'rtl',
+				emulateScrollSnap: true,
+				targetWidth: (slider) => {
+					return slider.container.parentElement.clientWidth;
+				}
 			},
 			[
 				DragScrollingPlugin(),
-				FullWidthPlugin(
-					{
-						targetWidth: (slider) => {
-							// copy the width of the parent element
-							return slider.container.parentElement.clientWidth;
-						}
-					}
-				),
+				FullWidthPlugin(),
 				ScrollIndicatorPlugin(),
 			]
 		);

package/docs/dist/index.d.ts

@@ -1 +1 @@
-export { default as OverflowSlider } from './plugins/core/index.js';
+export { default as OverflowSlider } from './plugins/core/index.d2.ts';

package/docs/dist/index.esm.js

@@ -74,6 +74,16 @@ function getOutermostChildrenEdgeMarginSum(el) {
 function Slider(container, options, plugins) {
     let slider;
     let subs = {};
+    const overrideTransitions = () => {
+        slider.slides.forEach((slide) => {
+            slide.style.transition = 'none';
+        });
+    };
+    const restoreTransitions = () => {
+        slider.slides.forEach((slide) => {
+            slide.style.removeProperty('transition');
+        });
+    };
     function init() {
         slider.container = container;
         // ensure container has id
@@ -83,6 +93,8 @@ function Slider(container, options, plugins) {
             container.setAttribute('id', containerId);
         }
         setSlides();
+        // CSS transitions can cause delays for calculations
+        overrideTransitions();
         setDetails(true);
         setActiveSlideIdx();
         slider.on('contentsChanged', () => {
@@ -109,12 +121,20 @@ function Slider(container, options, plugins) {
             for (const plugin of plugins) {
                 plugin(slider);
             }
+            // plugins may mutate layout: refresh details and derived data after they run
+            // setTimeout( () => {
+            setDetails();
+            setActiveSlideIdx();
+            setCSSVariables();
+            slider.emit('pluginsLoaded');
+            // }, 250 );
         }
         slider.on('detailsChanged', () => {
             setDataAttributes();
             setCSSVariables();
         });
         slider.emit('created');
+        restoreTransitions();
         slider.container.setAttribute('data-ready', 'true');
     }
     function setDetails(isInit = false) {
@@ -515,14 +535,30 @@ function Slider(container, options, plugins) {
         // Get container rect once (includes any CSS transforms)
         const containerRect = container.getBoundingClientRect();
         const factor = rtl ? -1 : 1;
+        // Calculate target area offset if targetWidth is defined
+        let targetAreaOffset = 0;
+        if (typeof options.targetWidth === 'function') {
+            try {
+                const targetWidth = options.targetWidth(slider);
+                const containerWidth = containerRect.width;
+                if (Number.isFinite(targetWidth) && targetWidth > 0 && targetWidth < containerWidth) {
+                    targetAreaOffset = (containerWidth - targetWidth) / 2;
+                }
+            }
+            catch (error) {
+                // ignore errors, use default offset of 0
+            }
+        }
         // Build slide metadata
         const slideData = [...slides].map(slide => {
             const { width } = slide.getBoundingClientRect();
             const slideRect = slide.getBoundingClientRect();
-            // position relative to container’s left edge
+            // position relative to container's left edge
             const relativeStart = (slideRect.left - containerRect.left) + scrollPos;
-            const triggerPoint = Math.min(relativeStart + width / 2, relativeStart + emulateScrollSnapMaxThreshold);
-            return { start: relativeStart, trigger: triggerPoint };
+            // Adjust trigger point to align with target area start instead of container edge
+            const alignmentPoint = relativeStart - targetAreaOffset;
+            const triggerPoint = Math.min(alignmentPoint + width / 2, alignmentPoint + emulateScrollSnapMaxThreshold);
+            return { start: relativeStart - targetAreaOffset, trigger: triggerPoint };
         });
         // Pick the target start based on drag direction
         let targetStart = null;