Add the `trackSize()` method. Fix incorrect gap calculation.

dist/js/splide.js

@@ -543,7 +543,8 @@
       resolve,
       orient,
       left: apply(resolve, "left"),
-      right: apply(resolve, "right")
+      right: apply(resolve, "right"),
+      width: apply(resolve, "width")
     };
   };
 
@@ -743,7 +744,7 @@
     const { Components, root, options } = Splide2;
     const { isNavigation, updateOnMove, i18n, pagination, slideFocus } = options;
     const { Elements } = Components;
-    const { resolve, orient } = Components.Direction;
+    const { resolve } = Components.Direction;
     const styles = getAttribute(slide, "style");
     const label = getAttribute(slide, ARIA_LABEL);
     const isClone = slideIndex > -1;
@@ -851,9 +852,6 @@
       }
       return diff <= distance;
     }
-    function size() {
-      return rect(slide)[resolve("width")];
-    }
     const self = {
       index,
       slideIndex,
@@ -863,7 +861,6 @@
       mount,
       destroy,
       update,
-      size,
       style: style$1,
       isVisible,
       isWithin
@@ -987,7 +984,7 @@
   const Layout = (Splide, Components, options, event) => {
     const { on, bind, emit } = event;
     const { Slides } = Components;
-    const { resolve, left, right } = Components.Direction;
+    const { resolve, left, right, width } = Components.Direction;
     const { root, track, list } = Components.Elements;
     const { getAt, style: styleSlides } = Slides;
     let vertical;
@@ -1048,18 +1045,20 @@
       const gap = unit(options.gap);
       return `calc((100%${gap && ` + ${gap}`})/${options.perPage || 1}${gap && ` - ${gap}`})`;
     }
-    function listSize() {
-      return rect(list)[resolve("width")];
+    function trackSize() {
+      return rect(track)[width()];
+    }
+    function listSize(full) {
+      return full ? list[resolve("scrollWidth")] : rect(list)[width()];
     }
     function slideSize(index = 0, withoutGap) {
-      const Slide = getAt(index);
-      return (Slide ? Slide.size() : 0) + (withoutGap ? 0 : getGap());
+      const slide = getAt(index);
+      return (slide ? rect(slide.slide)[width()] : 0) + (withoutGap ? 0 : getGap());
     }
     function totalSize(index, withoutGap) {
       const first = Components.Slides.get()[0];
       const target = getAt(index);
-      const gap = withoutGap ? 0 : getGap();
-      return first && target ? rect(target.slide)[right()] - rect(first.slide)[left()] + gap : 0;
+      return first && target ? abs(rect(target.slide)[right()] - rect(first.slide)[left()]) + (withoutGap ? 0 : getGap()) : 0;
     }
     function sliderSize(withoutGap) {
       return totalSize(Splide.length - 1) - totalSize(0) + slideSize(0, withoutGap);
@@ -1067,7 +1066,11 @@
     function getGap() {
       const first = getAt(0);
       const second = getAt(1);
-      return first && second ? rect(second.slide)[left()] - rect(first.slide)[right()] : 0;
+      if (first && second) {
+        const firstRect = rect(first.slide);
+        return abs(rect(second.slide)[left()] - firstRect[left()]) - firstRect[width()];
+      }
+      return 0;
     }
     function getPadding(right2) {
       return parseFloat(style(
@@ -1081,6 +1084,7 @@
     return {
       mount,
       resize,
+      trackSize,
       listSize,
       slideSize,
       sliderSize,
@@ -1093,7 +1097,7 @@
   const MULTIPLIER = 2;
   const Clones = (Splide, Components, options, event) => {
     const { on } = event;
-    const { Elements, Slides, Layout: { resize } } = Components;
+    const { Elements, Slides, Layout: { resize, trackSize } } = Components;
     const { resolve } = Components.Direction;
     const clones = [];
     let cloneCount;
@@ -1152,7 +1156,7 @@
         clones2 = 0;
       } else if (isUndefined(clones2)) {
         const fixedSize = options[resolve("fixedWidth")] && Components.Layout.slideSize(0);
-        const fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
+        const fixedCount = fixedSize && ceil(trackSize() / fixedSize);
         clones2 = fixedCount || options[resolve("autoWidth")] && Splide.length || options.perPage * MULTIPLIER;
       }
       return clones2;
@@ -1167,7 +1171,7 @@
     const { on, emit } = event;
     const { set } = Splide.state;
     const { Slides } = Components;
-    const { slideSize, getPadding, listSize, sliderSize, totalSize } = Components.Layout;
+    const { slideSize, getPadding, listSize, sliderSize, totalSize, trackSize } = Components.Layout;
     const { resolve, orient } = Components.Direction;
     const { list, track } = Components.Elements;
     let Transition;
@@ -1285,7 +1289,7 @@
     function canShift(backwards) {
       const padding = getPadding(false);
       const shifted = orient(shift(getPosition(), backwards));
-      return backwards ? shifted >= padding : shifted <= list[resolve("scrollWidth")] - rect(track)[resolve("width")] + padding;
+      return backwards ? shifted >= padding : shifted <= listSize(true) - trackSize() + padding;
     }
     function exceededLimit(max, position = getPosition()) {
       const exceededMin = max !== true && orient(position) < orient(getLimit(false));

src/js/components/Clones/Clones.ts

@@ -1,7 +1,7 @@
 import { EVENT_REFRESH, EVENT_RESIZE, EVENT_UPDATED } from '../../constants/events';
 import { LOOP } from '../../constants/types';
 import { BaseComponent, ComponentConstructor } from '../../types';
-import { addClass, append, before, ceil, empty, isUndefined, pad, push, rect, removeNode } from '@splidejs/utils';
+import { addClass, append, before, ceil, empty, isUndefined, pad, push, removeNode } from '@splidejs/utils';
 
 
 /**
@@ -33,7 +33,7 @@ export const MULTIPLIER = 2;
  */
 export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Components, options, event ) => {
   const { on } = event;
-  const { Elements, Slides, Layout: { resize } } = Components;
+  const { Elements, Slides, Layout: { resize, trackSize } } = Components;
   const { resolve } = Components.Direction;
 
   /**
@@ -145,7 +145,7 @@ export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Component
       clones = 0;
     } else if ( isUndefined( clones ) ) {
       const fixedSize  = options[ resolve( 'fixedWidth' ) ] && Components.Layout.slideSize( 0 );
-      const fixedCount = fixedSize && ceil( rect( Elements.track )[ resolve( 'width' ) ] / fixedSize );
+      const fixedCount = fixedSize && ceil( trackSize() / fixedSize );
       clones = fixedCount || ( options[ resolve( 'autoWidth' ) ] && Splide.length ) || options.perPage * MULTIPLIER;
     }
 

src/js/components/Direction/Direction.ts

@@ -15,6 +15,7 @@ export interface DirectionComponent extends BaseComponent {
   orient( value: number ): number;
   left(): string;
   right(): string;
+  width(): string;
 }
 
 /**
@@ -82,5 +83,6 @@ export const Direction: ComponentConstructor<DirectionComponent> = ( Splide: Spl
     orient,
     left: apply( resolve, 'left' ),
     right: apply( resolve, 'right' ),
+    width: apply( resolve, 'width' ),
   };
 };

src/js/components/Layout/Layout.ts

@@ -1,7 +1,7 @@
 import { TTB } from '../../constants/directions';
 import { EVENT_OVERFLOW, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';
 import { BaseComponent, ComponentConstructor } from '../../types';
-import { apply, isObject, rect, style, Throttle, toggleClass, unit } from '@splidejs/utils';
+import { abs, apply, isObject, rect, style, Throttle, toggleClass, unit } from '@splidejs/utils';
 import { assert } from '../../utils';
 import { FADE } from '../../constants/types';
 import { CLASS_OVERFLOW } from '../../constants/classes';
@@ -13,7 +13,8 @@ import { CLASS_OVERFLOW } from '../../constants/classes';
  * @since 3.0.0
  */
 export interface LayoutComponent extends BaseComponent {
-  listSize(): number;
+  trackSize(): number;
+  listSize( full?: boolean ): number;
   slideSize( index: number, withoutGap?: boolean ): number;
   sliderSize( withoutGap?: boolean ): number;
   totalSize( index?: number, withoutGap?: boolean ): number;
@@ -39,7 +40,7 @@ export interface LayoutComponent extends BaseComponent {
 export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Components, options, event ) => {
   const { on, bind, emit } = event;
   const { Slides } = Components;
-  const { resolve, left, right } = Components.Direction;
+  const { resolve, left, right, width } = Components.Direction;
   const { root, track, list } = Components.Elements;
   const { getAt, style: styleSlides } = Slides;
 
@@ -182,12 +183,21 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
   }
 
   /**
-   * Returns the list width for the horizontal slider, or the height for the vertical slider.
+   * Returns the track width for the horizontal carousel, or the height for the vertical one.
+   */
+  function trackSize(): number {
+    return rect( track )[ width() ];
+  }
+
+  /**
+   * Returns the list width for the horizontal carousel, or the height for the vertical one.
+   *
+   * @param full - Optional. If `true`, returns the width includes overflowed elements.
    *
    * @return The size of the list element in pixel.
    */
-  function listSize(): number {
-    return rect( list )[ resolve( 'width' ) ];
+  function listSize( full?: boolean ): number {
+    return full ? list[ resolve( 'scrollWidth' ) ] : rect( list )[ width() ];
   }
 
   /**
@@ -199,8 +209,8 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
    * @return The size of the specified slide element in pixel.
    */
   function slideSize( index = 0, withoutGap?: boolean ): number {
-    const Slide = getAt( index );
-    return ( Slide ? Slide.size() : 0 ) + ( withoutGap ? 0 : getGap() );
+    const slide = getAt( index );
+    return ( slide ? rect( slide.slide )[ width() ] : 0 ) + ( withoutGap ? 0 : getGap() );
   }
 
   /**
@@ -215,10 +225,8 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
   function totalSize( index: number, withoutGap?: boolean ): number {
     const first  = Components.Slides.get()[ 0 ];
     const target = getAt( index );
-    const gap    = withoutGap ? 0 : getGap();
-
     return first && target
-      ? rect( target.slide )[ right() ] - rect( first.slide )[ left() ] + gap
+      ? abs( rect( target.slide )[ right() ] - rect( first.slide )[ left() ] ) + ( withoutGap ? 0 : getGap() )
       : 0;
   }
 
@@ -244,7 +252,13 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
   function getGap(): number {
     const first  = getAt( 0 );
     const second = getAt( 1 );
-    return first && second ? rect( second.slide )[ left() ] - rect( first.slide )[ right() ] : 0;
+
+    if ( first && second ) {
+      const firstRect = rect( first.slide );
+      return abs( rect( second.slide )[ left() ] - firstRect[ left() ] ) - firstRect[ width() ];
+    }
+
+    return 0;
   }
 
   /**
@@ -275,6 +289,7 @@ export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Component
   return {
     mount,
     resize,
+    trackSize,
     listSize,
     slideSize,
     sliderSize,

src/js/components/Move/Move.ts

@@ -52,7 +52,7 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
   const { on, emit } = event;
   const { set } = Splide.state;
   const { Slides } = Components;
-  const { slideSize, getPadding, listSize, sliderSize, totalSize } = Components.Layout;
+  const { slideSize, getPadding, listSize, sliderSize, totalSize, trackSize } = Components.Layout;
   const { resolve, orient } = Components.Direction;
   const { list, track } = Components.Elements;
 
@@ -298,10 +298,7 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
   function canShift( backwards: boolean ): boolean {
     const padding = getPadding( false );
     const shifted = orient( shift( getPosition(), backwards ) );
-
-    return backwards
-      ? shifted >= padding
-      : shifted <= list[ resolve( 'scrollWidth' ) ] - rect( track )[ resolve( 'width' ) ] + padding;
+    return backwards ? shifted >= padding : shifted <= listSize( true ) - trackSize() + padding;
   }
 
   /**

src/js/components/Slides/Slide.ts

@@ -69,7 +69,6 @@ export interface  SlideComponent extends BaseComponent {
   readonly isClone: boolean;
 
   update(): void;
-  size(): number;
   style( prop: CSSProperties, value: string | number, useContainer?: boolean ): void
   isWithin( from: number, distance: number ): boolean;
   isVisible( partial?: boolean ): boolean;
@@ -93,7 +92,7 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
   const { Components, root, options } = Splide;
   const { isNavigation, updateOnMove, i18n, pagination, slideFocus } = options;
   const { Elements } = Components;
-  const { resolve, orient } = Components.Direction;
+  const { resolve } = Components.Direction;
   const styles    = getAttribute( slide, 'style' );
   const label     = getAttribute( slide, ARIA_LABEL );
   const isClone   = slideIndex > -1;
@@ -283,15 +282,6 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
     return diff <= distance;
   }
 
-  /**
-   * Returns width of the slide in a horizontal carousel, or height in a vertical one.
-   *
-   * @return Width of height of the slide.
-   */
-  function size(): number {
-    return rect( slide )[ resolve( 'width' ) ];
-  }
-
   const self = {
     index,
     slideIndex,
@@ -301,7 +291,6 @@ export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide:
     mount,
     destroy,
     update,
-    size,
     style,
     isVisible,
     isWithin,