@evermade/overflow-slider 3.2.0 → 3.3.0

package/README.md

@@ -33,7 +33,7 @@ npm install @evermade/overflow-slider
 
 Import the `OverflowSlider` along with plugins you want to use.
 
-```js
+```ts
 import { OverflowSlider } from '@evermade/overflow-slider';
 import DragScrollingPlugin from '@evermade/overflow-slider/plugins/drag-scrolling';
 import SkipLinksPlugin from '@evermade/overflow-slider/plugins/skip-links';
@@ -135,9 +135,9 @@ Usage:
 	--gap: 1.5rem;
 	gap: var(--gap);
 	> * {
-		--slidesPerView: 3;
+		--slides-per-view: 3;
 		@include slideWidth(
-			var(--slidesPerView),
+			var(--slides-per-view),
 			var(--gap),
 			var(--slider-container-width)
 		);
@@ -149,7 +149,280 @@ Note that if you are using FullWidthPlugin, you should use container width from
 
 ## Plugins
 
-TBA
+### DragScrollingPlugin
+
+This plugin allows you to scroll the slider by dragging with a mouse. This works with items that have links or are links themselves.
+
+```ts
+import DragScrollingPlugin from '@evermade/overflow-slider/plugins/drag-scrolling';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		DragScrollingPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type DragScrollingOptions = {
+	draggedDistanceThatPreventsClick: number, // default 10, how much user can drag before it's considered a drag and not a click in case of links
+};
+```
+
+### ArrowsPlugin
+
+This plugin adds previous and next arrows to the slider. You can customize the text, icons and class names.
+
+```ts
+import ArrowsPlugin from '@evermade/overflow-slider/plugins/arrows';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		ArrowsPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type ArrowsOptions = {
+	texts: {
+		buttonPrevious: string;
+		buttonNext: string;
+	},
+	icons: {
+		prev: string; // SVG or other HTML
+		next: string; // SVG or other HTML
+	},
+	classNames: {
+		navContainer: string;
+		prevButton: string;
+		nextButton: string;
+	},
+	container: HTMLElement | null, // container for both arrows
+	containerPrev: HTMLElement | null, // container for previous arrow
+	containerNext: HTMLElement | null, // container for next arrow
+};
+```
+
+### ScrollIndicatorPlugin
+
+This plugin adds a scroll indicator to the slider. The indicator is a bar that shows how much of the slider is scrolled. Scroll indicator is like a custom scrollbar that is always visible.
+
+```ts
+import ScrollIndicatorPlugin from '@evermade/overflow-slider/plugins/scroll-indicator';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		ScrollIndicatorPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type ScrollIndicatorOptions = {
+	classNames: {
+		scrollIndicator: string;
+		scrollIndicatorBar: string;
+		scrollIndicatorButton: string;
+	},
+	container: HTMLElement | null, // container for the scroll indicator
+};
+```
+
+### DotsPlugin
+
+This plugin adds dots to the slider. Dots are like pagination that shows how many slides there are and which one is active. For usability, scroll indicator is preferable.
+
+```ts
+import DotsPlugin from '@evermade/overflow-slider/plugins/dots';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		DotsPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type DotsOptions = {
+	texts: {
+		dotDescription: string;
+	},
+	classNames: {
+		dotsContainer: string;
+		dotsItem: string;
+	},
+	container: HTMLElement | null,
+};
+```
+
+### SkipLinksPlugin
+
+This plugin adds skip links to the slider for keyboard users. Skip links are links that allow users to skip the whole slider and land after it. This is useful for accessibility.
+
+```ts
+import SkipLinksPlugin from '@evermade/overflow-slider/plugins/skip-links';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		SkipLinksPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type SkipLinkOptions = {
+	texts: {
+		skipList: string;
+	},
+	classNames: {
+		skipLink: string;
+		skipLinkTarget: string;
+	},
+	containerBefore: HTMLElement | null,
+	containerAfter: HTMLElement | null,
+};
+```
+
+### FullWidthPlugin
+
+This plugin allows you to make the slider full width but have the start of the sliders aligned to your content width. They are scrollable to the full width but the slides are aligned to the content width for the start and end.
+
+```ts
+import FullWidthPlugin from '@evermade/overflow-slider/plugins/full-width';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		FullWidthPlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type FullWidthOptions = {
+	targetWidth: ( slider: Slider ) => number,
+	addMarginBefore: boolean,
+	addMarginAfter: boolean,
+};
+```
+
+Example of `targetWidth` function:
+
+```ts
+const sliderElement = document.querySelector( '.slider-container-here' );
+const sliderWrapper = document.querySelector( '.slider-wrapper' );
+if ( !sliderElement || !sliderWrapper ) {
+	throw new Error( 'Slider element or wrapper not found' );
+}
+const slider = new OverflowSlider(
+	sliderElement,
+	{},
+	[
+		FullWidthPlugin({
+			targetWidth: ( slider ) => {
+				return sliderWrapper.offsetWidth;
+			},
+		}),
+	]
+);
+```
+
+### FadePlugin
+
+This plugin adds a hint that there are more slides to scroll to. It fades the slides at the start and end of the slider to hint that there are more slides to scroll to.
+
+```ts
+import FadePlugin from '@evermade/overflow-slider/plugins/fade';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		FadePlugin(), // add options here or don't
+	]
+);
+```
+
+All options are optional.
+
+```ts
+type FadeOptions = {
+	classNames: {
+		fadeItem: string;
+		fadeItemStart: string;
+		fadeItemEnd: string;
+	},
+	container: HTMLElement | null,
+	containerStart: HTMLElement | null,
+	containerEnd: HTMLElement | null,
+};
+```
+
+### ThumbnailsPlugin
+
+This plugin adds synchronized thumbnails to the slider. Thumbnails are like dots but they are images of the slides. They are synchronized with the main slider.
+
+```ts
+import ThumbnailsPlugin from '@evermade/overflow-slider/plugins/thumbnails';
+
+const slider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+	{},
+	[
+		ThumbnailsPlugin(), // add options here or don't
+	]
+);
+```
+
+You need to set mainSlider reference.
+
+```ts
+type ThumbnailsOptions = {
+	mainSlider: Slider,
+}
+```
+
+Example:
+
+```ts
+const mainSlider = new OverflowSlider(
+	document.querySelector( '.slider-container-here' ),
+);
+
+const thumbnailsSlider = new OverflowSlider(
+	document.querySelector( '.thumbnails-container-here' ),
+	{},
+	[
+		ThumbnailsPlugin({
+			mainSlider: mainSlider,
+		}),
+	]
+);
+```
 
 ## Known issues
 
@@ -159,7 +432,7 @@ You can use use Overflow Slider within CSS grid but if you are using `fr` units
 
 ### CSS scroll-snap can be buggy
 
-If you are using `scroll-snap-type` CSS property, you might encounter some bugs like browser wants to snap to a slide regardless of margins.
+If you are using `scroll-snap-type` CSS property, you might encounter some bugs like browser wants to snap to a slide regardless of margins. It's most reliable when there's only one slide per view.
 
 ## Limitations
 
@@ -183,6 +456,18 @@ Auto-play is not supported at the moment but can probably be implemented as a pl
 
 ## Changelog
 
+### 3.3.0
+
+* Add: Ability to move each direction by one slide at a time via `moveToSlideInDirection` prev/next
+* Add: Support for ArrowsPlugin to move by one slide at a time (default is still one view at a time)
+* Fix: Remove console logs
+* Refactor: Plugin build paths to match import paths. Might fix some eslint warnings. If you are not using import but directly referencing the plugin files under `dist/` you might need to update your paths.
+
+### 3.2.1
+
+* Add: Documentation on plugins
+* Fix: Make types more strict and remove all "any" types
+
 ### 3.2.0
 
 * Add: RTL support

package/dist/core/slider.esm.js

@@ -78,7 +78,7 @@ function Slider(container, options, plugins) {
         let isScrolling = false;
         let isUserScrolling = false;
         let isProgrammaticScrolling = false;
-        // any scroll
+        // all types of scroll
         slider.container.addEventListener('scroll', () => {
             const newScrollLeft = slider.container.scrollLeft;
             if (Math.floor(scrollLeft) !== Math.floor(newScrollLeft)) {
@@ -267,7 +267,6 @@ function Slider(container, options, plugins) {
         }
         const oldActiveSlideIdx = slider.activeSlideIdx;
         slider.activeSlideIdx = activeSlideIdx;
-        // console.log('activeSlideIdx', activeSlideIdx);
         if (oldActiveSlideIdx !== activeSlideIdx) {
             slider.emit('activeSlideChanged');
         }
@@ -278,6 +277,19 @@ function Slider(container, options, plugins) {
             ensureSlideIsInView(slide);
         }
     }
+    function moveToSlideInDirection(direction) {
+        const activeSlideIdx = slider.activeSlideIdx;
+        if (direction === 'prev') {
+            if (activeSlideIdx > 0) {
+                moveToSlide(activeSlideIdx - 1);
+            }
+        }
+        else if (direction === 'next') {
+            if (activeSlideIdx < slider.slides.length - 1) {
+                moveToSlide(activeSlideIdx + 1);
+            }
+        }
+    }
     function getInclusiveScrollWidth() {
         return slider.container.scrollWidth + getOutermostChildrenEdgeMarginSum(slider.container);
     }
@@ -408,7 +420,6 @@ function Slider(container, options, plugins) {
                 rect: slide.getBoundingClientRect(),
             });
         }
-        console.log('slideReference', slideReference);
         let snapTarget = null;
         const scrollPosition = getScrollLeft();
         if (isMovingForward) {
@@ -463,14 +474,16 @@ function Slider(container, options, plugins) {
             });
         }
         const optionCallBack = (_a = slider === null || slider === void 0 ? void 0 : slider.options) === null || _a === void 0 ? void 0 : _a[name];
+        // Type guard to check if the option callback is a function
         if (typeof optionCallBack === 'function') {
-            optionCallBack(slider);
+            optionCallBack(slider); // Type assertion here
         }
     }
     slider = {
         emit,
         moveToDirection,
         moveToSlide,
+        moveToSlideInDirection,
         snapToClosestSlide,
         getInclusiveScrollWidth,
         getInclusiveClientWidth,

package/dist/core/slider.min.js

@@ -1 +1 @@
-import t from"./details.min.js";import{generateId as e,objectsAreEqual as o,getOutermostChildrenEdgeMarginSum as n}from"./utils.min.js";function l(l,i,r){let a,s={};function c(e=!1){const n=a.details,l=t(a);a.details=l,e||o(n,l)?e&&a.emit("detailsChanged"):a.emit("detailsChanged")}function f(){a.slides=Array.from(a.container.querySelectorAll(a.options.slidesSelector))}function d(){a.container.style.setProperty("--slider-container-width",`${a.details.containerWidth}px`),a.container.style.setProperty("--slider-scrollable-width",`${a.details.scrollableAreaWidth}px`),a.container.style.setProperty("--slider-slides-count",`${a.details.slideCount}`)}function h(){a.container.setAttribute("data-has-overflow",a.details.hasOverflow?"true":"false"),a.options.rtl&&a.container.setAttribute("dir","rtl")}function u(t,e=null){const o=e||a.options.scrollBehavior,n=t.getBoundingClientRect(),l=a.container.getBoundingClientRect(),i=a.container.offsetWidth,r=a.container.scrollLeft,s=n.left-l.left+r,c=s+n.width;let f=null;f=Math.floor(s)<Math.floor(r)?s:Math.floor(c)>Math.floor(r)+Math.floor(i)?c-i:0===Math.floor(s)?0:s,null!==f&&setTimeout((t=>{a.emit("programmaticScrollStart"),a.container.scrollTo({left:t,behavior:o})}),50,f)}function g(){const t=a.container.getBoundingClientRect(),e=a.getScrollLeft(),o=a.slides;let n=0,l=!1;if(a.options.rtl){const l=a.getInclusiveScrollWidth()-e-a.getInclusiveClientWidth(),i=[];for(let e=o.length-1;e>=0;e--){const n=o[e].getBoundingClientRect(),r=Math.abs(n.left)-Math.abs(t.left)+l;i.push({slide:o[e],slideEnd:r})}let r=null,s=null;for(let t=0;t<i.length;t++){const e=Math.abs(i[t].slideEnd-l);(null===s||e<s)&&(s=e,r=i[t].slide)}n=r?o.indexOf(r):o.length-1}else for(let i=0;i<o.length;i++){const r=o[i].getBoundingClientRect().left-t.left+e+M();if(Math.floor(r)>=Math.floor(e)){n=i;break}i===o.length-1&&(l=!0)}l&&(n=o.length-1);const i=a.activeSlideIdx;a.activeSlideIdx=n,i!==n&&a.emit("activeSlideChanged")}function m(){return a.options.rtl?Math.abs(a.container.scrollLeft):a.container.scrollLeft}function M(){let t=0;if(a.slides.length>1){const e=a.slides[0].getBoundingClientRect(),o=a.slides[1].getBoundingClientRect();t=a.options.rtl?Math.abs(Math.floor(o.right-e.left)):Math.floor(o.left-e.right)}return t}function p(){let t=0;const e=a.container.getAttribute("data-full-width-offset");return e&&(t=parseInt(e)),Math.floor(t)}return a={emit:function(t){var e;s&&s[t]&&s[t].forEach((t=>{t(a)}));const o=null===(e=null==a?void 0:a.options)||void 0===e?void 0:e[t];"function"==typeof o&&o(a)},moveToDirection:function(t="prev"){const e=a.options.scrollStrategy,o=a.container.scrollLeft,n=a.container.getBoundingClientRect(),l=a.container.offsetWidth;let i=o;const r=a.options.rtl?"prev"===t?"next":"prev":t;if("prev"===r?i=Math.max(0,o-a.container.offsetWidth):"next"===r&&(i=Math.min(a.getInclusiveScrollWidth(),o+a.container.offsetWidth)),"fullSlide"===e){let t=null;if(t="prev"===r?Math.max(0,i-M()):Math.min(a.getInclusiveScrollWidth(),i+M()),"next"===r){let e=!1;for(let l of a.slides){const r=l.getBoundingClientRect(),a=r.left-n.left+o,s=a+r.width;if(Math.floor(a)<Math.floor(i)&&Math.floor(s)>Math.floor(i)){t=a,e=!0;break}}if(e||(t=Math.min(i,a.getInclusiveScrollWidth()-a.container.offsetWidth)),t)if(Math.floor(t)>Math.floor(o)){const e=Math.floor(a.getInclusiveScrollWidth())-Math.floor(l);i=Math.min(t,e)}else i=Math.min(a.getInclusiveScrollWidth(),o+l)}else{let e=!1;for(let i of a.slides){const r=i.getBoundingClientRect(),a=r.left-n.left+o,s=a+r.width;if(Math.floor(a)<Math.floor(o)&&Math.floor(s)>Math.floor(o)){t=s-l,e=!0;break}}e||(t=Math.max(0,o-l)),t&&Math.floor(t)<Math.floor(o)&&(i=t)}}const s=i-p();Math.floor(s)>=0&&(i=s),a.emit("programmaticScrollStart"),a.container.style.scrollBehavior=a.options.scrollBehavior,a.container.scrollLeft=i,setTimeout((()=>a.container.style.scrollBehavior=""),50)},moveToSlide:function(t){const e=a.slides[t];e&&u(e)},snapToClosestSlide:function(t="prev"){const e=a.options.rtl?"prev"===t:"next"===t,o=[];for(let t=0;t<a.slides.length;t++){const e=a.slides[t],n=e.offsetWidth,l=a.options.rtl?Math.abs(e.offsetLeft+n-a.details.containerWidth):e.offsetLeft,i=l+n,r=l+n/2,s=Math.min(r,l+a.options.emulateScrollSnapMaxThreshold);o.push({start:l,middle:r,end:i,width:n,trigger:s,slide:e,offSetleft:e.offsetLeft,rect:e.getBoundingClientRect()})}console.log("slideReference",o);let n=null;const l=m();if(e)for(let t=0;t<o.length;t++){const e=o[t];if(0===t&&Math.floor(l)<=Math.floor(e.trigger)){n=0;break}if(Math.floor(m())<=Math.floor(e.trigger)){n=e.start;break}}else for(let t=o.length-1;t>=0;t--){const e=o[t];if(t===o.length-1&&Math.floor(l)>=Math.floor(e.trigger)){n=e.start;break}if(Math.floor(m())>=Math.floor(e.trigger)){n=e.start;break}}if(null!==n){const t=n-p();Math.floor(t)>=0&&(n=t);const e=a.options.scrollBehavior||"smooth";a.container.scrollTo({left:a.options.rtl?-n:n,behavior:e})}},getInclusiveScrollWidth:function(){return a.container.scrollWidth+n(a.container)},getInclusiveClientWidth:function(){return a.container.clientWidth+n(a.container)},getScrollLeft:m,setScrollLeft:function(t){a.container.scrollLeft=a.options.rtl?-t:t},on:function(t,e){s[t]||(s[t]=[]),s[t].push(e)},options:i},function(){a.container=l;let t=l.getAttribute("id");null===t&&(t=e("overflow-slider"),l.setAttribute("id",t)),f(),c(!0),g(),a.on("contentsChanged",(()=>{f(),c(),g()})),a.on("containerSizeChanged",(()=>c()));let o=0;if(a.on("scroll",(()=>{o&&window.cancelAnimationFrame(o),o=window.requestAnimationFrame((()=>{c(),g()}))})),function(){new MutationObserver((()=>a.emit("contentsChanged"))).observe(a.container,{childList:!0});let t,e,o;new ResizeObserver((()=>a.emit("containerSizeChanged"))).observe(a.container);let n=a.container.scrollLeft,l=a.container.scrollLeft,i=a.container.scrollLeft,r=!1,s=!1,c=!1;a.container.addEventListener("scroll",(()=>{const e=a.container.scrollLeft;Math.floor(n)!==Math.floor(e)&&(r||(r=!0,a.emit("scrollStart")),n=e,clearTimeout(t),t=setTimeout((()=>{r=!1,a.emit("scrollEnd")}),50),a.emit("scroll")),s&&f()}));const f=()=>{const t=a.container.scrollLeft;Math.floor(l)===Math.floor(t)||c||(s||(a.emit("nativeScrollStart"),s=!0),a.emit("nativeScroll"),l=t,clearTimeout(e),e=setTimeout((()=>{s=!1,a.emit("nativeScrollEnd"),i=l}),50))};a.container.addEventListener("touchmove",f),a.container.addEventListener("mousewheel",f),a.container.addEventListener("wheel",f),a.on("programmaticScrollStart",(()=>{c=!0})),a.container.addEventListener("scroll",(()=>{const t=a.container.scrollLeft;Math.floor(i)!==Math.floor(t)&&!s&&c&&(i=t,clearTimeout(o),o=setTimeout((()=>{c=!1,a.emit("programmaticScrollEnd"),l=i}),50),a.emit("programmaticScroll"))})),a.on("programmaticScrollStart",(()=>{a.container.style.scrollSnapType="none"})),a.on("nativeScrollStart",(()=>{a.container.style.scrollSnapType=""}));let d=!1;a.container.addEventListener("mousedown",(()=>{d=!0})),a.container.addEventListener("touchstart",(()=>{d=!0}),{passive:!0}),a.container.addEventListener("focusin",(t=>{if(!d){let e=t.target;for(;e.parentElement!==a.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}d=!1}))}(),h(),d(),r)for(const t of r)t(a);a.on("detailsChanged",(()=>{h(),d()})),a.emit("created"),a.container.setAttribute("data-ready","true")}(),a}export{l as default};
+import t from"./details.min.js";import{generateId as e,objectsAreEqual as o,getOutermostChildrenEdgeMarginSum as n}from"./utils.min.js";function l(l,i,r){let a,s={};function c(e=!1){const n=a.details,l=t(a);a.details=l,e||o(n,l)?e&&a.emit("detailsChanged"):a.emit("detailsChanged")}function f(){a.slides=Array.from(a.container.querySelectorAll(a.options.slidesSelector))}function d(){a.container.style.setProperty("--slider-container-width",`${a.details.containerWidth}px`),a.container.style.setProperty("--slider-scrollable-width",`${a.details.scrollableAreaWidth}px`),a.container.style.setProperty("--slider-slides-count",`${a.details.slideCount}`)}function h(){a.container.setAttribute("data-has-overflow",a.details.hasOverflow?"true":"false"),a.options.rtl&&a.container.setAttribute("dir","rtl")}function u(t,e=null){const o=e||a.options.scrollBehavior,n=t.getBoundingClientRect(),l=a.container.getBoundingClientRect(),i=a.container.offsetWidth,r=a.container.scrollLeft,s=n.left-l.left+r,c=s+n.width;let f=null;f=Math.floor(s)<Math.floor(r)?s:Math.floor(c)>Math.floor(r)+Math.floor(i)?c-i:0===Math.floor(s)?0:s,null!==f&&setTimeout((t=>{a.emit("programmaticScrollStart"),a.container.scrollTo({left:t,behavior:o})}),50,f)}function g(){const t=a.container.getBoundingClientRect(),e=a.getScrollLeft(),o=a.slides;let n=0,l=!1;if(a.options.rtl){const l=a.getInclusiveScrollWidth()-e-a.getInclusiveClientWidth(),i=[];for(let e=o.length-1;e>=0;e--){const n=o[e].getBoundingClientRect(),r=Math.abs(n.left)-Math.abs(t.left)+l;i.push({slide:o[e],slideEnd:r})}let r=null,s=null;for(let t=0;t<i.length;t++){const e=Math.abs(i[t].slideEnd-l);(null===s||e<s)&&(s=e,r=i[t].slide)}n=r?o.indexOf(r):o.length-1}else for(let i=0;i<o.length;i++){const r=o[i].getBoundingClientRect().left-t.left+e+v();if(Math.floor(r)>=Math.floor(e)){n=i;break}i===o.length-1&&(l=!0)}l&&(n=o.length-1);const i=a.activeSlideIdx;a.activeSlideIdx=n,i!==n&&a.emit("activeSlideChanged")}function m(t){const e=a.slides[t];e&&u(e)}function M(){return a.options.rtl?Math.abs(a.container.scrollLeft):a.container.scrollLeft}function v(){let t=0;if(a.slides.length>1){const e=a.slides[0].getBoundingClientRect(),o=a.slides[1].getBoundingClientRect();t=a.options.rtl?Math.abs(Math.floor(o.right-e.left)):Math.floor(o.left-e.right)}return t}function p(){let t=0;const e=a.container.getAttribute("data-full-width-offset");return e&&(t=parseInt(e)),Math.floor(t)}return a={emit:function(t){var e;s&&s[t]&&s[t].forEach((t=>{t(a)}));const o=null===(e=null==a?void 0:a.options)||void 0===e?void 0:e[t];"function"==typeof o&&o(a)},moveToDirection:function(t="prev"){const e=a.options.scrollStrategy,o=a.container.scrollLeft,n=a.container.getBoundingClientRect(),l=a.container.offsetWidth;let i=o;const r=a.options.rtl?"prev"===t?"next":"prev":t;if("prev"===r?i=Math.max(0,o-a.container.offsetWidth):"next"===r&&(i=Math.min(a.getInclusiveScrollWidth(),o+a.container.offsetWidth)),"fullSlide"===e){let t=null;if(t="prev"===r?Math.max(0,i-v()):Math.min(a.getInclusiveScrollWidth(),i+v()),"next"===r){let e=!1;for(let l of a.slides){const r=l.getBoundingClientRect(),a=r.left-n.left+o,s=a+r.width;if(Math.floor(a)<Math.floor(i)&&Math.floor(s)>Math.floor(i)){t=a,e=!0;break}}if(e||(t=Math.min(i,a.getInclusiveScrollWidth()-a.container.offsetWidth)),t)if(Math.floor(t)>Math.floor(o)){const e=Math.floor(a.getInclusiveScrollWidth())-Math.floor(l);i=Math.min(t,e)}else i=Math.min(a.getInclusiveScrollWidth(),o+l)}else{let e=!1;for(let i of a.slides){const r=i.getBoundingClientRect(),a=r.left-n.left+o,s=a+r.width;if(Math.floor(a)<Math.floor(o)&&Math.floor(s)>Math.floor(o)){t=s-l,e=!0;break}}e||(t=Math.max(0,o-l)),t&&Math.floor(t)<Math.floor(o)&&(i=t)}}const s=i-p();Math.floor(s)>=0&&(i=s),a.emit("programmaticScrollStart"),a.container.style.scrollBehavior=a.options.scrollBehavior,a.container.scrollLeft=i,setTimeout((()=>a.container.style.scrollBehavior=""),50)},moveToSlide:m,moveToSlideInDirection:function(t){const e=a.activeSlideIdx;"prev"===t?e>0&&m(e-1):"next"===t&&e<a.slides.length-1&&m(e+1)},snapToClosestSlide:function(t="prev"){const e=a.options.rtl?"prev"===t:"next"===t,o=[];for(let t=0;t<a.slides.length;t++){const e=a.slides[t],n=e.offsetWidth,l=a.options.rtl?Math.abs(e.offsetLeft+n-a.details.containerWidth):e.offsetLeft,i=l+n,r=l+n/2,s=Math.min(r,l+a.options.emulateScrollSnapMaxThreshold);o.push({start:l,middle:r,end:i,width:n,trigger:s,slide:e,offSetleft:e.offsetLeft,rect:e.getBoundingClientRect()})}let n=null;const l=M();if(e)for(let t=0;t<o.length;t++){const e=o[t];if(0===t&&Math.floor(l)<=Math.floor(e.trigger)){n=0;break}if(Math.floor(M())<=Math.floor(e.trigger)){n=e.start;break}}else for(let t=o.length-1;t>=0;t--){const e=o[t];if(t===o.length-1&&Math.floor(l)>=Math.floor(e.trigger)){n=e.start;break}if(Math.floor(M())>=Math.floor(e.trigger)){n=e.start;break}}if(null!==n){const t=n-p();Math.floor(t)>=0&&(n=t);const e=a.options.scrollBehavior||"smooth";a.container.scrollTo({left:a.options.rtl?-n:n,behavior:e})}},getInclusiveScrollWidth:function(){return a.container.scrollWidth+n(a.container)},getInclusiveClientWidth:function(){return a.container.clientWidth+n(a.container)},getScrollLeft:M,setScrollLeft:function(t){a.container.scrollLeft=a.options.rtl?-t:t},on:function(t,e){s[t]||(s[t]=[]),s[t].push(e)},options:i},function(){a.container=l;let t=l.getAttribute("id");null===t&&(t=e("overflow-slider"),l.setAttribute("id",t)),f(),c(!0),g(),a.on("contentsChanged",(()=>{f(),c(),g()})),a.on("containerSizeChanged",(()=>c()));let o=0;if(a.on("scroll",(()=>{o&&window.cancelAnimationFrame(o),o=window.requestAnimationFrame((()=>{c(),g()}))})),function(){new MutationObserver((()=>a.emit("contentsChanged"))).observe(a.container,{childList:!0});let t,e,o;new ResizeObserver((()=>a.emit("containerSizeChanged"))).observe(a.container);let n=a.container.scrollLeft,l=a.container.scrollLeft,i=a.container.scrollLeft,r=!1,s=!1,c=!1;a.container.addEventListener("scroll",(()=>{const e=a.container.scrollLeft;Math.floor(n)!==Math.floor(e)&&(r||(r=!0,a.emit("scrollStart")),n=e,clearTimeout(t),t=setTimeout((()=>{r=!1,a.emit("scrollEnd")}),50),a.emit("scroll")),s&&f()}));const f=()=>{const t=a.container.scrollLeft;Math.floor(l)===Math.floor(t)||c||(s||(a.emit("nativeScrollStart"),s=!0),a.emit("nativeScroll"),l=t,clearTimeout(e),e=setTimeout((()=>{s=!1,a.emit("nativeScrollEnd"),i=l}),50))};a.container.addEventListener("touchmove",f),a.container.addEventListener("mousewheel",f),a.container.addEventListener("wheel",f),a.on("programmaticScrollStart",(()=>{c=!0})),a.container.addEventListener("scroll",(()=>{const t=a.container.scrollLeft;Math.floor(i)!==Math.floor(t)&&!s&&c&&(i=t,clearTimeout(o),o=setTimeout((()=>{c=!1,a.emit("programmaticScrollEnd"),l=i}),50),a.emit("programmaticScroll"))})),a.on("programmaticScrollStart",(()=>{a.container.style.scrollSnapType="none"})),a.on("nativeScrollStart",(()=>{a.container.style.scrollSnapType=""}));let d=!1;a.container.addEventListener("mousedown",(()=>{d=!0})),a.container.addEventListener("touchstart",(()=>{d=!0}),{passive:!0}),a.container.addEventListener("focusin",(t=>{if(!d){let e=t.target;for(;e.parentElement!==a.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}d=!1}))}(),h(),d(),r)for(const t of r)t(a);a.on("detailsChanged",(()=>{h(),d()})),a.emit("created"),a.container.setAttribute("data-ready","true")}(),a}export{l as default};

package/dist/core/utils.esm.js

@@ -12,7 +12,8 @@ function objectsAreEqual(obj1, obj2) {
         return false;
     }
     for (let key of keys1) {
-        if (obj2.hasOwnProperty(key) === false || obj1[key] !== obj2[key]) {
+        // Use `Object.prototype.hasOwnProperty.call` for better safety
+        if (!Object.prototype.hasOwnProperty.call(obj2, key) || obj1[key] !== obj2[key]) {
             return false;
         }
     }

package/dist/core/utils.min.js

@@ -1 +1 @@
-function e(t,n=1){const r=`${t}-${n}`;return document.getElementById(r)?e(t,n+1):r}function t(e,t){const n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(let r of n)if(!1===t.hasOwnProperty(r)||e[r]!==t[r])return!1;return!0}function n(e){if(0===e.children.length)return 0;const t=e.children[0],n=getComputedStyle(t),r=parseFloat(n.marginLeft),o=e.children[e.children.length-1],l=getComputedStyle(o);return r+parseFloat(l.marginRight)}export{e as generateId,n as getOutermostChildrenEdgeMarginSum,t as objectsAreEqual};
+function t(e,n=1){const r=`${e}-${n}`;return document.getElementById(r)?t(e,n+1):r}function e(t,e){const n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(let r of n)if(!Object.prototype.hasOwnProperty.call(e,r)||t[r]!==e[r])return!1;return!0}function n(t){if(0===t.children.length)return 0;const e=t.children[0],n=getComputedStyle(e),r=parseFloat(n.marginLeft),o=t.children[t.children.length-1],l=getComputedStyle(o);return r+parseFloat(l.marginRight)}export{t as generateId,n as getOutermostChildrenEdgeMarginSum,e as objectsAreEqual};

package/dist/plugins/arrows/{arrows/index.esm.js → index.esm.js}

@@ -13,7 +13,7 @@ const DEFAULT_CLASS_NAMES = {
 };
 function ArrowsPlugin(args) {
     return (slider) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         const options = {
             texts: Object.assign(Object.assign({}, DEFAULT_TEXTS), (args === null || args === void 0 ? void 0 : args.texts) || []),
             icons: Object.assign(Object.assign({}, DEFAULT_ICONS), (args === null || args === void 0 ? void 0 : args.icons) || []),
@@ -21,6 +21,7 @@ function ArrowsPlugin(args) {
             container: (_a = args === null || args === void 0 ? void 0 : args.container) !== null && _a !== void 0 ? _a : null,
             containerPrev: (_b = args === null || args === void 0 ? void 0 : args.containerPrev) !== null && _b !== void 0 ? _b : null,
             containerNext: (_c = args === null || args === void 0 ? void 0 : args.containerNext) !== null && _c !== void 0 ? _c : null,
+            movementType: (_d = args === null || args === void 0 ? void 0 : args.movementType) !== null && _d !== void 0 ? _d : 'view',
         };
         const nav = document.createElement('div');
         nav.classList.add(options.classNames.navContainer);
@@ -28,24 +29,24 @@ function ArrowsPlugin(args) {
         prev.setAttribute('class', options.classNames.prevButton);
         prev.setAttribute('type', 'button');
         prev.setAttribute('aria-label', options.texts.buttonPrevious);
-        prev.setAttribute('aria-controls', (_d = slider.container.getAttribute('id')) !== null && _d !== void 0 ? _d : '');
+        prev.setAttribute('aria-controls', (_e = slider.container.getAttribute('id')) !== null && _e !== void 0 ? _e : '');
         prev.setAttribute('data-type', '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');
+                options.movementType === 'slide' ? slider.moveToSlideInDirection('prev') : slider.moveToDirection('prev');
             }
         });
         const next = document.createElement('button');
         next.setAttribute('class', options.classNames.nextButton);
         next.setAttribute('type', 'button');
         next.setAttribute('aria-label', options.texts.buttonNext);
-        next.setAttribute('aria-controls', (_e = slider.container.getAttribute('id')) !== null && _e !== void 0 ? _e : '');
+        next.setAttribute('aria-controls', (_f = slider.container.getAttribute('id')) !== null && _f !== void 0 ? _f : '');
         next.setAttribute('data-type', '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');
+                options.movementType === 'slide' ? slider.moveToSlideInDirection('next') : slider.moveToDirection('next');
             }
         });
         // insert buttons to the nav
@@ -69,7 +70,6 @@ function ArrowsPlugin(args) {
             else {
                 next.setAttribute('data-has-content', 'true');
             }
-            console.log('next', scrollLeft + clientWidth, scrollWidth);
         };
         if (options.containerNext && options.containerPrev) {
             options.containerPrev.appendChild(prev);
@@ -80,7 +80,7 @@ function ArrowsPlugin(args) {
                 options.container.appendChild(nav);
             }
             else {
-                (_f = slider.container.parentNode) === null || _f === void 0 ? void 0 : _f.insertBefore(nav, slider.container.nextSibling);
+                (_g = slider.container.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(nav, slider.container.nextSibling);
             }
         }
         update();

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

@@ -0,0 +1 @@
+const t={buttonPrevious:"Previous items",buttonNext:"Next items"},e={prev:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>'},n={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};function o(o){return i=>{var r,s,a,l,c,u,d;const v={texts:Object.assign(Object.assign({},t),(null==o?void 0:o.texts)||[]),icons:Object.assign(Object.assign({},e),(null==o?void 0:o.icons)||[]),classNames:Object.assign(Object.assign({},n),(null==o?void 0:o.classNames)||[]),container:null!==(r=null==o?void 0:o.container)&&void 0!==r?r:null,containerPrev:null!==(s=null==o?void 0:o.containerPrev)&&void 0!==s?s:null,containerNext:null!==(a=null==o?void 0:o.containerNext)&&void 0!==a?a:null,movementType:null!==(l=null==o?void 0:o.movementType)&&void 0!==l?l:"view"},b=document.createElement("div");b.classList.add(v.classNames.navContainer);const p=document.createElement("button");p.setAttribute("class",v.classNames.prevButton),p.setAttribute("type","button"),p.setAttribute("aria-label",v.texts.buttonPrevious),p.setAttribute("aria-controls",null!==(c=i.container.getAttribute("id"))&&void 0!==c?c:""),p.setAttribute("data-type","prev"),p.innerHTML=i.options.rtl?v.icons.next:v.icons.prev,p.addEventListener("click",(()=>{"true"===p.getAttribute("data-has-content")&&("slide"===v.movementType?i.moveToSlideInDirection("prev"):i.moveToDirection("prev"))}));const h=document.createElement("button");h.setAttribute("class",v.classNames.nextButton),h.setAttribute("type","button"),h.setAttribute("aria-label",v.texts.buttonNext),h.setAttribute("aria-controls",null!==(u=i.container.getAttribute("id"))&&void 0!==u?u:""),h.setAttribute("data-type","next"),h.innerHTML=i.options.rtl?v.icons.prev:v.icons.next,h.addEventListener("click",(()=>{"true"===h.getAttribute("data-has-content")&&("slide"===v.movementType?i.moveToSlideInDirection("next"):i.moveToDirection("next"))})),b.appendChild(p),b.appendChild(h);const m=()=>{const t=i.getScrollLeft(),e=i.getInclusiveScrollWidth(),n=i.getInclusiveClientWidth();0===Math.floor(t)?p.setAttribute("data-has-content","false"):p.setAttribute("data-has-content","true");Math.abs(Math.floor(t+n)-Math.floor(e))<=1?h.setAttribute("data-has-content","false"):h.setAttribute("data-has-content","true")};v.containerNext&&v.containerPrev?(v.containerPrev.appendChild(p),v.containerNext.appendChild(h)):v.container?v.container.appendChild(b):null===(d=i.container.parentNode)||void 0===d||d.insertBefore(b,i.container.nextSibling),m(),i.on("scrollEnd",m),i.on("contentsChanged",m),i.on("containerSizeChanged",m)}}export{o as default};

package/{docs/dist/plugins/skip-links → dist/plugins}/skip-links/index.esm.js

@@ -1,4 +1,4 @@
-import { generateId } from '../../../core/utils.esm.js';
+import { generateId } from '../../core/utils.esm.js';
 
 const DEFAULT_TEXTS = {
     skipList: 'Skip list'

package/dist/plugins/skip-links/index.min.js

@@ -0,0 +1 @@
+import{generateId as e}from"../../core/utils.min.js";const t={skipList:"Skip list"},n={skipLink:"screen-reader-text",skipLinkTarget:"overflow-slider__skip-link-target"};function i(i){return r=>{var o,s,a,l,c,d;const u={texts:Object.assign(Object.assign({},t),(null==i?void 0:i.texts)||[]),classNames:Object.assign(Object.assign({},n),(null==i?void 0:i.classNames)||[]),containerBefore:null!==(o=null==i?void 0:i.containerAfter)&&void 0!==o?o:null,containerAfter:null!==(s=null==i?void 0:i.containerAfter)&&void 0!==s?s:null},f=e("overflow-slider-skip"),p=document.createElement("a");p.setAttribute("href",`#${f}`),p.textContent=u.texts.skipList,p.classList.add(u.classNames.skipLink);const v=document.createElement("div");v.setAttribute("id",f),v.setAttribute("tabindex","-1"),u.containerBefore?null===(a=u.containerBefore.parentNode)||void 0===a||a.insertBefore(p,u.containerBefore):null===(l=r.container.parentNode)||void 0===l||l.insertBefore(p,r.container),u.containerAfter?null===(c=u.containerAfter.parentNode)||void 0===c||c.insertBefore(v,u.containerAfter.nextSibling):null===(d=r.container.parentNode)||void 0===d||d.insertBefore(v,r.container.nextSibling)}}export{i as default};

package/docs/assets/demo.js

@@ -11,14 +11,14 @@
  * import SkipLinksPlugin from '@overflow-slider/plugins/skip-links';
  */
 import { OverflowSlider } from '../dist/index.esm.js';
-import DragScrollingPlugin from '../dist/plugins/drag-scrolling/drag-scrolling/index.esm.js';
-import SkipLinksPlugin from '../dist/plugins/skip-links/skip-links/index.esm.js';
-import ArrowsPlugin from '../dist/plugins/arrows/arrows/index.esm.js';
-import ScrollIndicatorPlugin from '../dist/plugins/scroll-indicator/scroll-indicator/index.esm.js';
-import DotsPlugin from '../dist/plugins/dots/dots/index.esm.js';
-import FullWidthPlugin from '../dist/plugins/full-width/full-width/index.esm.js';
-import ThumbnailsPlugin from '../dist/plugins/thumbnails/thumbnails/index.esm.js';
-import FadePlugin from '../dist/plugins/fade/fade/index.esm.js';
+import DragScrollingPlugin from '../dist/plugins/drag-scrolling/index.esm.js';
+import SkipLinksPlugin from '../dist/plugins/skip-links/index.esm.js';
+import ArrowsPlugin from '../dist/plugins/arrows/index.esm.js';
+import ScrollIndicatorPlugin from '../dist/plugins/scroll-indicator/index.esm.js';
+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';
 
 (function () {
 	const init = () => {
@@ -76,6 +76,21 @@ import FadePlugin from '../dist/plugins/fade/fade/index.esm.js';
 		);
 		console.log( '1-arrows', example1Arrows );
 
+		const example1ArrowsBySlide = new OverflowSlider(
+			document.querySelector( '.example-container-1-arrows-by-slide' ),
+			{
+				rtl: document.documentElement.dir === 'rtl',
+			},
+			[
+				DragScrollingPlugin(),
+				SkipLinksPlugin(),
+				ArrowsPlugin({
+					movementType: 'slide',
+				}),
+			]
+		);
+		console.log( '1-arrows-by-slide', example1ArrowsBySlide );
+
 		const example1ScrollIndicator = new OverflowSlider(
 			document.querySelector( '.example-container-1-scroll-indicator' ),
 			{

package/docs/dist/core/slider.esm.js

@@ -78,7 +78,7 @@ function Slider(container, options, plugins) {
         let isScrolling = false;
         let isUserScrolling = false;
         let isProgrammaticScrolling = false;
-        // any scroll
+        // all types of scroll
         slider.container.addEventListener('scroll', () => {
             const newScrollLeft = slider.container.scrollLeft;
             if (Math.floor(scrollLeft) !== Math.floor(newScrollLeft)) {
@@ -267,7 +267,6 @@ function Slider(container, options, plugins) {
         }
         const oldActiveSlideIdx = slider.activeSlideIdx;
         slider.activeSlideIdx = activeSlideIdx;
-        // console.log('activeSlideIdx', activeSlideIdx);
         if (oldActiveSlideIdx !== activeSlideIdx) {
             slider.emit('activeSlideChanged');
         }
@@ -278,6 +277,19 @@ function Slider(container, options, plugins) {
             ensureSlideIsInView(slide);
         }
     }
+    function moveToSlideInDirection(direction) {
+        const activeSlideIdx = slider.activeSlideIdx;
+        if (direction === 'prev') {
+            if (activeSlideIdx > 0) {
+                moveToSlide(activeSlideIdx - 1);
+            }
+        }
+        else if (direction === 'next') {
+            if (activeSlideIdx < slider.slides.length - 1) {
+                moveToSlide(activeSlideIdx + 1);
+            }
+        }
+    }
     function getInclusiveScrollWidth() {
         return slider.container.scrollWidth + getOutermostChildrenEdgeMarginSum(slider.container);
     }
@@ -408,7 +420,6 @@ function Slider(container, options, plugins) {
                 rect: slide.getBoundingClientRect(),
             });
         }
-        console.log('slideReference', slideReference);
         let snapTarget = null;
         const scrollPosition = getScrollLeft();
         if (isMovingForward) {
@@ -463,14 +474,16 @@ function Slider(container, options, plugins) {
             });
         }
         const optionCallBack = (_a = slider === null || slider === void 0 ? void 0 : slider.options) === null || _a === void 0 ? void 0 : _a[name];
+        // Type guard to check if the option callback is a function
         if (typeof optionCallBack === 'function') {
-            optionCallBack(slider);
+            optionCallBack(slider); // Type assertion here
         }
     }
     slider = {
         emit,
         moveToDirection,
         moveToSlide,
+        moveToSlideInDirection,
         snapToClosestSlide,
         getInclusiveScrollWidth,
         getInclusiveClientWidth,