@evermade/overflow-slider 4.1.0 → 4.2.0

package/README.md

@@ -300,6 +300,7 @@ All options are optional.
 
 ```ts
 type DotsOptions = {
+	type: 'view' | 'slide';
 	texts: {
 		dotDescription: string;
 	},
@@ -561,6 +562,11 @@ Infinite scroll is not supported and likely never will be. It is not accessible
 
 ## Changelog
 
+### 4.2.0
+
+* Add: View mode in DotsPlugin in addition to previous "slide mode"
+* Fix: Remove forgotten console.log from ClassNamesPlugin
+
 ### 4.1.0
 
 * Add: ClassNamesPlugin to add classes to visible/partly visible/hidden slides.

package/dist/index.d.ts

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

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

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type ArrowsMovementTypes = 'view' | 'slide';
 type ArrowsOptions = {

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

@@ -1,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type AutoplayMovementTypes = 'view' | 'slide';
 type AutoplayPluginOptions = {

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

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

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

@@ -41,7 +41,6 @@ function ClassNamesPlugin(args) {
         };
         const update = () => {
             const { targetStart, targetEnd } = getTargetBounds();
-            console.log('targetStart:', targetStart, 'targetEnd:', targetEnd);
             slider.slides.forEach((slide) => {
                 const slideRect = slide.getBoundingClientRect();
                 const slideLeft = slideRect.left;

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

@@ -1 +1 @@
-const t={visible:"is-visible",partlyVisible:"is-partly-visible",hidden:"is-hidden"};function e(e){return n=>{var i,s;const a=null!==(i=null==e?void 0:e.classNames)&&void 0!==i?i:null==e?void 0:e.classnames,l={classNames:Object.assign(Object.assign({},t),null!=a?a:{}),freezeStateOnVisible:null!==(s=null==e?void 0:e.freezeStateOnVisible)&&void 0!==s&&s},r=new WeakMap,o=Array.from(new Set(Object.values(l.classNames).filter(t=>Boolean(t)))),c=()=>{const{targetStart:t,targetEnd:e}=(()=>{const t=n.container.getBoundingClientRect(),e=t.width;if(!e)return{targetStart:t.left,targetEnd:t.right};let i=0;if("function"==typeof n.options.targetWidth)try{i=n.options.targetWidth(n)}catch(t){i=0}(!Number.isFinite(i)||i<=0)&&(i=e);const s=(e-Math.min(i,e))/2,a=Math.max(s,0);return{targetStart:t.left+a,targetEnd:t.right-a}})();console.log("targetStart:",t,"targetEnd:",e),n.slides.forEach(n=>{const i=n.getBoundingClientRect(),s=i.left,a=i.right;let c="hidden";a-2>t&&s+2<e&&(c=s+2>=t&&a-2<=e?"visible":"partlyVisible");const d=r.get(n);if(l.freezeStateOnVisible&&"visible"===d)return;if(d===c)return;const g=l.classNames[c];if(d){const t=l.classNames[d];t!==g&&t&&n.classList.remove(t)}else o.forEach(t=>{t!==g&&n.classList.remove(t)});g&&!n.classList.contains(g)&&n.classList.add(g),r.set(n,c)})};n.on("created",c),n.on("pluginsLoaded",c),n.on("fullWidthPluginUpdate",c),n.on("contentsChanged",c),n.on("containerSizeChanged",c),n.on("detailsChanged",c),n.on("scrollEnd",c),n.on("scrollStart",c),requestAnimationFrame(()=>{requestAnimationFrame(()=>c())});let d=0;n.on("scroll",()=>{d&&window.cancelAnimationFrame(d),d=window.requestAnimationFrame(()=>{c()})})}}export{e as default};
+const t={visible:"is-visible",partlyVisible:"is-partly-visible",hidden:"is-hidden"};function e(e){return n=>{var i,s;const a=null!==(i=null==e?void 0:e.classNames)&&void 0!==i?i:null==e?void 0:e.classnames,l={classNames:Object.assign(Object.assign({},t),null!=a?a:{}),freezeStateOnVisible:null!==(s=null==e?void 0:e.freezeStateOnVisible)&&void 0!==s&&s},r=new WeakMap,o=Array.from(new Set(Object.values(l.classNames).filter(t=>Boolean(t)))),c=()=>{const{targetStart:t,targetEnd:e}=(()=>{const t=n.container.getBoundingClientRect(),e=t.width;if(!e)return{targetStart:t.left,targetEnd:t.right};let i=0;if("function"==typeof n.options.targetWidth)try{i=n.options.targetWidth(n)}catch(t){i=0}(!Number.isFinite(i)||i<=0)&&(i=e);const s=(e-Math.min(i,e))/2,a=Math.max(s,0);return{targetStart:t.left+a,targetEnd:t.right-a}})();n.slides.forEach(n=>{const i=n.getBoundingClientRect(),s=i.left,a=i.right;let c="hidden";a-2>t&&s+2<e&&(c=s+2>=t&&a-2<=e?"visible":"partlyVisible");const d=r.get(n);if(l.freezeStateOnVisible&&"visible"===d)return;if(d===c)return;const u=l.classNames[c];if(d){const t=l.classNames[d];t!==u&&t&&n.classList.remove(t)}else o.forEach(t=>{t!==u&&n.classList.remove(t)});u&&!n.classList.contains(u)&&n.classList.add(u),r.set(n,c)})};n.on("created",c),n.on("pluginsLoaded",c),n.on("fullWidthPluginUpdate",c),n.on("contentsChanged",c),n.on("containerSizeChanged",c),n.on("detailsChanged",c),n.on("scrollEnd",c),n.on("scrollStart",c),requestAnimationFrame(()=>{requestAnimationFrame(()=>c())});let d=0;n.on("scroll",()=>{d&&window.cancelAnimationFrame(d),d=window.requestAnimationFrame(()=>{c()})})}}export{e as default};

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

@@ -1,10 +1,12 @@
-type Slider<O = {}, C = {}, H extends string = string> = {
+import { SliderOptionArgs, SliderPlugin, SliderCallback, SliderOptions, SliderDetails } from './index.d2.ts';
+
+declare function OverflowSlider(container: HTMLElement, options?: SliderOptionArgs, plugins?: SliderPlugin[]): {
     container: HTMLElement;
     slides: HTMLElement[];
-    emit: (name: H | SliderHooks) => void;
-    moveToDirection: (direction: 'prev' | 'next') => void;
-    moveToSlideInDirection: (direction: 'prev' | 'next') => void;
-    snapToClosestSlide: (direction: 'prev' | 'next') => void;
+    emit: (name: string) => void;
+    moveToDirection: (direction: "prev" | "next") => void;
+    moveToSlideInDirection: (direction: "prev" | "next") => void;
+    snapToClosestSlide: (direction: "prev" | "next") => void;
     moveToSlide: (index: number) => void;
     canMoveToSlide: (index: number) => boolean;
     getInclusiveScrollWidth: () => number;
@@ -12,65 +14,10 @@ type Slider<O = {}, C = {}, H extends string = string> = {
     getScrollLeft: () => number;
     setScrollLeft: (value: number) => void;
     setActiveSlideIdx: () => void;
-    on: (name: H | SliderHooks, cb: SliderCallback) => void;
+    on: (name: string, cb: SliderCallback) => void;
     options: SliderOptions;
     details: SliderDetails;
     activeSlideIdx: number;
-} & C;
-type SliderCallback<O = {}, C = {}, H extends string = string> = (props: Slider<O, C, H>) => void;
-/**
- * Recursively makes all properties of T optional.
- * @see https://www.typescriptlang.org/docs/handbook/utility-types.html#mapped-types
- */
-type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
-};
-type SliderOptions = {
-    scrollBehavior: string;
-    scrollStrategy: string;
-    slidesSelector: string;
-    emulateScrollSnap: boolean;
-    emulateScrollSnapMaxThreshold?: number;
-    cssVariableContainer: HTMLElement;
-    rtl: boolean;
-    targetWidth?: (slider: Slider) => number;
-    [key: string]: unknown;
-};
-type SliderOptionArgs = {
-    scrollBehavior?: 'smooth' | 'auto';
-    scrollStrategy?: 'fullSlide' | 'partialSlide';
-    slidesSelector?: string;
-    emulateScrollSnap?: boolean;
-    emulateScrollSnapMaxThreshold?: number;
-    cssVariableContainer?: HTMLElement;
-    rtl?: boolean;
-    targetWidth?: (slider: Slider) => number;
-    [key: string]: unknown;
-};
-type SliderDetails = {
-    hasOverflow: boolean;
-    slideCount: number;
-    containerWidth: number;
-    containerHeight: number;
-    scrollableAreaWidth: number;
-    amountOfPages: number;
-    currentPage: number;
-};
-type SliderHooks = HOOK_CREATED | HOOK_CONTENTS_CHANGED | HOOK_DETAILS_CHANGED | HOOK_CONTAINER_SIZE_CHANGED | HOOK_ACTIVE_SLIDE_CHANGED | HOOK_SCROLL_START | HOOK_SCROLL | HOOK_SCROLL_END | HOOK_NATIVE_SCROLL_START | HOOK_NATIVE_SCROLL | HOOK_NATIVE_SCROLL_END | HOOK_PROGRAMMATIC_SCROLL_START | HOOK_PROGRAMMATIC_SCROLL | HOOK_PROGRAMMATIC_SCROLL_END;
-type HOOK_CREATED = 'created';
-type HOOK_DETAILS_CHANGED = 'detailsChanged';
-type HOOK_CONTENTS_CHANGED = 'contentsChanged';
-type HOOK_CONTAINER_SIZE_CHANGED = 'containerSizeChanged';
-type HOOK_ACTIVE_SLIDE_CHANGED = 'activeSlideChanged';
-type HOOK_SCROLL_START = 'scrollStart';
-type HOOK_SCROLL = 'scroll';
-type HOOK_SCROLL_END = 'scrollEnd';
-type HOOK_NATIVE_SCROLL_START = 'nativeScrollStart';
-type HOOK_NATIVE_SCROLL = 'nativeScroll';
-type HOOK_NATIVE_SCROLL_END = 'nativeScrollEnd';
-type HOOK_PROGRAMMATIC_SCROLL_START = 'programmaticScrollStart';
-type HOOK_PROGRAMMATIC_SCROLL = 'programmaticScroll';
-type HOOK_PROGRAMMATIC_SCROLL_END = 'programmaticScrollEnd';
-type SliderPlugin = (slider: Slider) => void;
+} | undefined;
 
-export type { DeepPartial, HOOK_ACTIVE_SLIDE_CHANGED, HOOK_CONTAINER_SIZE_CHANGED, HOOK_CONTENTS_CHANGED, HOOK_CREATED, HOOK_DETAILS_CHANGED, HOOK_NATIVE_SCROLL, HOOK_NATIVE_SCROLL_END, HOOK_NATIVE_SCROLL_START, HOOK_PROGRAMMATIC_SCROLL, HOOK_PROGRAMMATIC_SCROLL_END, HOOK_PROGRAMMATIC_SCROLL_START, HOOK_SCROLL, HOOK_SCROLL_END, HOOK_SCROLL_START, Slider, SliderCallback, SliderDetails, SliderHooks, SliderOptionArgs, SliderOptions, SliderPlugin };
+export { OverflowSlider as default };

package/dist/plugins/core/index.d2.ts

@@ -1,12 +1,10 @@
-import { SliderOptionArgs, SliderPlugin, SliderCallback, SliderOptions, SliderDetails } from './index.js';
-
-declare function OverflowSlider(container: HTMLElement, options?: SliderOptionArgs, plugins?: SliderPlugin[]): {
+type Slider<O = {}, C = {}, H extends string = string> = {
     container: HTMLElement;
     slides: HTMLElement[];
-    emit: (name: string) => void;
-    moveToDirection: (direction: "prev" | "next") => void;
-    moveToSlideInDirection: (direction: "prev" | "next") => void;
-    snapToClosestSlide: (direction: "prev" | "next") => void;
+    emit: (name: H | SliderHooks) => void;
+    moveToDirection: (direction: 'prev' | 'next') => void;
+    moveToSlideInDirection: (direction: 'prev' | 'next') => void;
+    snapToClosestSlide: (direction: 'prev' | 'next') => void;
     moveToSlide: (index: number) => void;
     canMoveToSlide: (index: number) => boolean;
     getInclusiveScrollWidth: () => number;
@@ -14,10 +12,65 @@ declare function OverflowSlider(container: HTMLElement, options?: SliderOptionAr
     getScrollLeft: () => number;
     setScrollLeft: (value: number) => void;
     setActiveSlideIdx: () => void;
-    on: (name: string, cb: SliderCallback) => void;
+    on: (name: H | SliderHooks, cb: SliderCallback) => void;
     options: SliderOptions;
     details: SliderDetails;
     activeSlideIdx: number;
-} | undefined;
+} & C;
+type SliderCallback<O = {}, C = {}, H extends string = string> = (props: Slider<O, C, H>) => void;
+/**
+ * Recursively makes all properties of T optional.
+ * @see https://www.typescriptlang.org/docs/handbook/utility-types.html#mapped-types
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+type SliderOptions = {
+    scrollBehavior: string;
+    scrollStrategy: string;
+    slidesSelector: string;
+    emulateScrollSnap: boolean;
+    emulateScrollSnapMaxThreshold?: number;
+    cssVariableContainer: HTMLElement;
+    rtl: boolean;
+    targetWidth?: (slider: Slider) => number;
+    [key: string]: unknown;
+};
+type SliderOptionArgs = {
+    scrollBehavior?: 'smooth' | 'auto';
+    scrollStrategy?: 'fullSlide' | 'partialSlide';
+    slidesSelector?: string;
+    emulateScrollSnap?: boolean;
+    emulateScrollSnapMaxThreshold?: number;
+    cssVariableContainer?: HTMLElement;
+    rtl?: boolean;
+    targetWidth?: (slider: Slider) => number;
+    [key: string]: unknown;
+};
+type SliderDetails = {
+    hasOverflow: boolean;
+    slideCount: number;
+    containerWidth: number;
+    containerHeight: number;
+    scrollableAreaWidth: number;
+    amountOfPages: number;
+    currentPage: number;
+};
+type SliderHooks = HOOK_CREATED | HOOK_CONTENTS_CHANGED | HOOK_DETAILS_CHANGED | HOOK_CONTAINER_SIZE_CHANGED | HOOK_ACTIVE_SLIDE_CHANGED | HOOK_SCROLL_START | HOOK_SCROLL | HOOK_SCROLL_END | HOOK_NATIVE_SCROLL_START | HOOK_NATIVE_SCROLL | HOOK_NATIVE_SCROLL_END | HOOK_PROGRAMMATIC_SCROLL_START | HOOK_PROGRAMMATIC_SCROLL | HOOK_PROGRAMMATIC_SCROLL_END;
+type HOOK_CREATED = 'created';
+type HOOK_DETAILS_CHANGED = 'detailsChanged';
+type HOOK_CONTENTS_CHANGED = 'contentsChanged';
+type HOOK_CONTAINER_SIZE_CHANGED = 'containerSizeChanged';
+type HOOK_ACTIVE_SLIDE_CHANGED = 'activeSlideChanged';
+type HOOK_SCROLL_START = 'scrollStart';
+type HOOK_SCROLL = 'scroll';
+type HOOK_SCROLL_END = 'scrollEnd';
+type HOOK_NATIVE_SCROLL_START = 'nativeScrollStart';
+type HOOK_NATIVE_SCROLL = 'nativeScroll';
+type HOOK_NATIVE_SCROLL_END = 'nativeScrollEnd';
+type HOOK_PROGRAMMATIC_SCROLL_START = 'programmaticScrollStart';
+type HOOK_PROGRAMMATIC_SCROLL = 'programmaticScroll';
+type HOOK_PROGRAMMATIC_SCROLL_END = 'programmaticScrollEnd';
+type SliderPlugin = (slider: Slider) => void;
 
-export { OverflowSlider as default };
+export type { DeepPartial, HOOK_ACTIVE_SLIDE_CHANGED, HOOK_CONTAINER_SIZE_CHANGED, HOOK_CONTENTS_CHANGED, HOOK_CREATED, HOOK_DETAILS_CHANGED, HOOK_NATIVE_SCROLL, HOOK_NATIVE_SCROLL_END, HOOK_NATIVE_SCROLL_START, HOOK_PROGRAMMATIC_SCROLL, HOOK_PROGRAMMATIC_SCROLL_END, HOOK_PROGRAMMATIC_SCROLL_START, HOOK_SCROLL, HOOK_SCROLL_END, HOOK_SCROLL_START, Slider, SliderCallback, SliderDetails, SliderHooks, SliderOptionArgs, SliderOptions, SliderPlugin };

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

@@ -1,6 +1,7 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type DotsOptions = {
+    type: 'view' | 'slide';
     texts: {
         dotDescription: string;
     };

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,4 +1,4 @@
-import { DeepPartial, Slider } from '../core/index.js';
+import { DeepPartial, Slider } from '../core/index.d2.ts';
 
 type FullWidthOptions = {
     targetWidth?: (slider: Slider) => number;

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

@@ -817,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

@@ -121,6 +121,24 @@ import ClassNamesPlugin from '../dist/plugins/classnames/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' ),
 			{

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

@@ -41,7 +41,6 @@ function ClassNamesPlugin(args) {
         };
         const update = () => {
             const { targetStart, targetEnd } = getTargetBounds();
-            console.log('targetStart:', targetStart, 'targetEnd:', targetEnd);
             slider.slides.forEach((slide) => {
                 const slideRect = slide.getBoundingClientRect();
                 const slideLeft = slideRect.left;

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

@@ -1 +1 @@
-const t={visible:"is-visible",partlyVisible:"is-partly-visible",hidden:"is-hidden"};function e(e){return n=>{var i,s;const a=null!==(i=null==e?void 0:e.classNames)&&void 0!==i?i:null==e?void 0:e.classnames,l={classNames:Object.assign(Object.assign({},t),null!=a?a:{}),freezeStateOnVisible:null!==(s=null==e?void 0:e.freezeStateOnVisible)&&void 0!==s&&s},r=new WeakMap,o=Array.from(new Set(Object.values(l.classNames).filter(t=>Boolean(t)))),c=()=>{const{targetStart:t,targetEnd:e}=(()=>{const t=n.container.getBoundingClientRect(),e=t.width;if(!e)return{targetStart:t.left,targetEnd:t.right};let i=0;if("function"==typeof n.options.targetWidth)try{i=n.options.targetWidth(n)}catch(t){i=0}(!Number.isFinite(i)||i<=0)&&(i=e);const s=(e-Math.min(i,e))/2,a=Math.max(s,0);return{targetStart:t.left+a,targetEnd:t.right-a}})();console.log("targetStart:",t,"targetEnd:",e),n.slides.forEach(n=>{const i=n.getBoundingClientRect(),s=i.left,a=i.right;let c="hidden";a-2>t&&s+2<e&&(c=s+2>=t&&a-2<=e?"visible":"partlyVisible");const d=r.get(n);if(l.freezeStateOnVisible&&"visible"===d)return;if(d===c)return;const g=l.classNames[c];if(d){const t=l.classNames[d];t!==g&&t&&n.classList.remove(t)}else o.forEach(t=>{t!==g&&n.classList.remove(t)});g&&!n.classList.contains(g)&&n.classList.add(g),r.set(n,c)})};n.on("created",c),n.on("pluginsLoaded",c),n.on("fullWidthPluginUpdate",c),n.on("contentsChanged",c),n.on("containerSizeChanged",c),n.on("detailsChanged",c),n.on("scrollEnd",c),n.on("scrollStart",c),requestAnimationFrame(()=>{requestAnimationFrame(()=>c())});let d=0;n.on("scroll",()=>{d&&window.cancelAnimationFrame(d),d=window.requestAnimationFrame(()=>{c()})})}}export{e as default};
+const t={visible:"is-visible",partlyVisible:"is-partly-visible",hidden:"is-hidden"};function e(e){return n=>{var i,s;const a=null!==(i=null==e?void 0:e.classNames)&&void 0!==i?i:null==e?void 0:e.classnames,l={classNames:Object.assign(Object.assign({},t),null!=a?a:{}),freezeStateOnVisible:null!==(s=null==e?void 0:e.freezeStateOnVisible)&&void 0!==s&&s},r=new WeakMap,o=Array.from(new Set(Object.values(l.classNames).filter(t=>Boolean(t)))),c=()=>{const{targetStart:t,targetEnd:e}=(()=>{const t=n.container.getBoundingClientRect(),e=t.width;if(!e)return{targetStart:t.left,targetEnd:t.right};let i=0;if("function"==typeof n.options.targetWidth)try{i=n.options.targetWidth(n)}catch(t){i=0}(!Number.isFinite(i)||i<=0)&&(i=e);const s=(e-Math.min(i,e))/2,a=Math.max(s,0);return{targetStart:t.left+a,targetEnd:t.right-a}})();n.slides.forEach(n=>{const i=n.getBoundingClientRect(),s=i.left,a=i.right;let c="hidden";a-2>t&&s+2<e&&(c=s+2>=t&&a-2<=e?"visible":"partlyVisible");const d=r.get(n);if(l.freezeStateOnVisible&&"visible"===d)return;if(d===c)return;const u=l.classNames[c];if(d){const t=l.classNames[d];t!==u&&t&&n.classList.remove(t)}else o.forEach(t=>{t!==u&&n.classList.remove(t)});u&&!n.classList.contains(u)&&n.classList.add(u),r.set(n,c)})};n.on("created",c),n.on("pluginsLoaded",c),n.on("fullWidthPluginUpdate",c),n.on("contentsChanged",c),n.on("containerSizeChanged",c),n.on("detailsChanged",c),n.on("scrollEnd",c),n.on("scrollStart",c),requestAnimationFrame(()=>{requestAnimationFrame(()=>c())});let d=0;n.on("scroll",()=>{d&&window.cancelAnimationFrame(d),d=window.requestAnimationFrame(()=>{c()})})}}export{e as default};

package/docs/dist/plugins/dots/index.d.ts

@@ -1,6 +1,7 @@
 import { DeepPartial, Slider } from '../core/index.js';
 
 type DotsOptions = {
+    type: 'view' | 'slide';
     texts: {
         dotDescription: string;
     };

package/docs/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/docs/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/docs/index.html

@@ -158,7 +158,7 @@
 
 							<div class="entry__item">
 								<h3>Dots</h3>
-								<p>Display dots indicator. Uses DotsPlugin.</p>
+								<p>Display dots indicator (by slide). 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>
@@ -167,6 +167,19 @@
 									<a href="#5" class="example-item example-item--5">5</a>
 									<a href="#6" class="example-item example-item--6">6</a>
 								</div>
+								<p style="margin-top:1.5rem;">Display dots indicator (by view).</p>
+								<div class="overflow-slider example-container example-container-1-dots-view">
+									<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">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evermade/overflow-slider",
-	"version": "4.1.0",
+	"version": "4.2.0",
 	"description": "Accessible slider that is powered by overflow: auto.",
 	"type": "module",
 	"main": "dist/index.js",

package/src/plugins/classnames/index.ts

@@ -70,8 +70,6 @@ export default function ClassNamesPlugin( args?: DeepPartial<ClassnameOptions> )
 		const update = () => {
 			const { targetStart, targetEnd } = getTargetBounds();
 
-			console.log( 'targetStart:', targetStart, 'targetEnd:', targetEnd );
-
 			slider.slides.forEach( ( slide ) => {
 				const slideRect = slide.getBoundingClientRect();
 				const slideLeft = slideRect.left;

package/src/plugins/dots/index.ts

@@ -1,6 +1,7 @@
 import { Slider, DeepPartial } from '../../core/types';
 
 export type DotsOptions = {
+	type: 'view' | 'slide';
 	texts: {
 		dotDescription: string;
 	},
@@ -23,6 +24,7 @@ const DEFAULT_CLASS_NAMES = {
 export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 	return ( slider: Slider ) => {
 		const options = <DotsOptions>{
+			type: args?.type ?? 'slide',
 			texts: {
 				...DEFAULT_TEXTS,
 				...args?.texts || []
@@ -45,20 +47,20 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 
 			const dotsList = document.createElement( 'ul' );
 
-			const pages = slider.details.slideCount;
-			const currentItem = slider.activeSlideIdx;
+			const count = options.type === 'view' ? slider.details.amountOfPages : slider.details.slideCount;
+			const currentIndex = options.type === 'view' ? slider.details.currentPage : slider.activeSlideIdx;
 
-			if ( pages <= 1 ) {
+			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 );
@@ -71,23 +73,23 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 					}
 					const currentItem = parseInt( currentItemItem.getAttribute( 'data-item' ) ?? '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 ) {
 								( <HTMLElement>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 ) {
 								( <HTMLElement>matchingDot ).focus();
 							}
-							activateDot( nextPage );
+							activateDot( nextIndex );
 						}
 					}
 				} );
@@ -104,8 +106,17 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 			}
 		};
 
-		const activateDot = ( item: number ) => {
-			slider.moveToSlide( item - 1 );
+		const activateDot = ( index: number ) => {
+			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 as ScrollBehavior
+				});
+			} else {
+				slider.moveToSlide( index - 1 );
+			}
 		};
 
 		buildDots();
@@ -119,5 +130,6 @@ export default function DotsPlugin( args?: DeepPartial<DotsOptions> ) {
 		slider.on( 'scrollEnd', buildDots );
 		slider.on( 'contentsChanged', buildDots );
 		slider.on( 'containerSizeChanged', buildDots );
+		slider.on( 'detailsChanged', buildDots );
 	};
 };