Refactoring position calculation.

dist/js/splide.cjs.js

@@ -780,6 +780,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
     return diff <= distance;
   }
+  function position() {
+    return slide[resolve("offsetLeft")];
+  }
+  function size() {
+    return tn(slide)[resolve("width")];
+  }
   const self = {
     index,
     slideIndex,
@@ -789,6 +795,8 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     mount,
     destroy,
     update,
+    position,
+    size,
     style,
     isWithin
   };
@@ -975,18 +983,13 @@ function Layout(Splide2, Components2, options, event) {
   function listSize() {
     return tn(list)[resolve("width")];
   }
-  function slideSize(index, withoutGap) {
-    const Slide = getAt(index || 0);
-    return Slide ? tn(Slide.slide)[resolve("width")] + (withoutGap ? 0 : getGap()) : 0;
+  function slideSize(index = 0, withoutGap) {
+    const Slide = getAt(index);
+    return (Slide ? Slide.size() : 0) + (withoutGap ? 0 : getGap());
   }
   function totalSize(index, withoutGap) {
     const Slide = getAt(index);
-    if (Slide) {
-      const right = tn(Slide.slide)[resolve("right")];
-      const left = tn(list)[resolve("left")];
-      return un(right - left) + (withoutGap ? 0 : getGap());
-    }
-    return 0;
+    return Slide ? Slide.position() + Slide.size() + (withoutGap ? 0 : getGap()) : 0;
   }
   function sliderSize(withoutGap) {
     return totalSize(Splide2.length - 1) - totalSize(0) + slideSize(0, withoutGap);
@@ -996,10 +999,7 @@ function Layout(Splide2, Components2, options, event) {
     return Slide && parseFloat(nn(Slide.slide, resolve("marginRight"))) || 0;
   }
   function getPadding(right) {
-    return parseFloat(nn(
-      track,
-      resolve(`padding${right ? "Right" : "Left"}`)
-    )) || 0;
+    return list[`offset${right ? "Right" : "Left"}`];
   }
   function isOverflow() {
     return Splide2.is(FADE) || sliderSize(true) > listSize();
@@ -1090,13 +1090,13 @@ function Clones(Splide2, Components2, options, event) {
 function Move(Splide2, Components2, options, event) {
   const { on, emit } = event;
   const { set } = Splide2.state;
-  const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components2.Layout;
+  const { slideSize, getPadding, listSize, sliderSize } = Components2.Layout;
   const { resolve, orient } = Components2.Direction;
   const { list, track } = Components2.Elements;
   let Transition;
   function mount() {
     Transition = Components2.Transition;
-    on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
+    on([EVENT_RESIZED], reposition);
   }
   function reposition() {
     if (!Components2.Controller.isBusy()) {
@@ -1166,7 +1166,8 @@ function Move(Splide2, Components2, options, event) {
     return index;
   }
   function toPosition(index, trimming) {
-    const position = orient(totalSize(index - 1) - offset(index));
+    const Slide = Components2.Slides.getAt(index);
+    const position = Slide ? orient(Slide.position() - offset(index)) : 0;
     return trimming ? trim(position) : position;
   }
   function getPosition() {
@@ -1454,7 +1455,7 @@ function Arrows(Splide2, Components2, options, event) {
     !placeholder && yn(wrapper, track);
   }
   function createArrow(prev2) {
-    const arrow = `<button class="${classes.arrow} ${prev2 ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}" focusable="false"><path d="${options.arrowPath || PATH}" />`;
+    const arrow = `<button class="${classes.arrow} ${prev2 ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${options.arrowPath || PATH}" />`;
     return qn(arrow);
   }
   function update() {

dist/js/splide.esm.js

@@ -776,6 +776,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
     return diff <= distance;
   }
+  function position() {
+    return slide[resolve("offsetLeft")];
+  }
+  function size() {
+    return tn(slide)[resolve("width")];
+  }
   const self = {
     index,
     slideIndex,
@@ -785,6 +791,8 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     mount,
     destroy,
     update,
+    position,
+    size,
     style,
     isWithin
   };
@@ -971,18 +979,13 @@ function Layout(Splide2, Components2, options, event) {
   function listSize() {
     return tn(list)[resolve("width")];
   }
-  function slideSize(index, withoutGap) {
-    const Slide = getAt(index || 0);
-    return Slide ? tn(Slide.slide)[resolve("width")] + (withoutGap ? 0 : getGap()) : 0;
+  function slideSize(index = 0, withoutGap) {
+    const Slide = getAt(index);
+    return (Slide ? Slide.size() : 0) + (withoutGap ? 0 : getGap());
   }
   function totalSize(index, withoutGap) {
     const Slide = getAt(index);
-    if (Slide) {
-      const right = tn(Slide.slide)[resolve("right")];
-      const left = tn(list)[resolve("left")];
-      return un(right - left) + (withoutGap ? 0 : getGap());
-    }
-    return 0;
+    return Slide ? Slide.position() + Slide.size() + (withoutGap ? 0 : getGap()) : 0;
   }
   function sliderSize(withoutGap) {
     return totalSize(Splide2.length - 1) - totalSize(0) + slideSize(0, withoutGap);
@@ -992,10 +995,7 @@ function Layout(Splide2, Components2, options, event) {
     return Slide && parseFloat(nn(Slide.slide, resolve("marginRight"))) || 0;
   }
   function getPadding(right) {
-    return parseFloat(nn(
-      track,
-      resolve(`padding${right ? "Right" : "Left"}`)
-    )) || 0;
+    return list[`offset${right ? "Right" : "Left"}`];
   }
   function isOverflow() {
     return Splide2.is(FADE) || sliderSize(true) > listSize();
@@ -1086,13 +1086,13 @@ function Clones(Splide2, Components2, options, event) {
 function Move(Splide2, Components2, options, event) {
   const { on, emit } = event;
   const { set } = Splide2.state;
-  const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components2.Layout;
+  const { slideSize, getPadding, listSize, sliderSize } = Components2.Layout;
   const { resolve, orient } = Components2.Direction;
   const { list, track } = Components2.Elements;
   let Transition;
   function mount() {
     Transition = Components2.Transition;
-    on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
+    on([EVENT_RESIZED], reposition);
   }
   function reposition() {
     if (!Components2.Controller.isBusy()) {
@@ -1162,7 +1162,8 @@ function Move(Splide2, Components2, options, event) {
     return index;
   }
   function toPosition(index, trimming) {
-    const position = orient(totalSize(index - 1) - offset(index));
+    const Slide = Components2.Slides.getAt(index);
+    const position = Slide ? orient(Slide.position() - offset(index)) : 0;
     return trimming ? trim(position) : position;
   }
   function getPosition() {
@@ -1450,7 +1451,7 @@ function Arrows(Splide2, Components2, options, event) {
     !placeholder && yn(wrapper, track);
   }
   function createArrow(prev2) {
-    const arrow = `<button class="${classes.arrow} ${prev2 ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}" focusable="false"><path d="${options.arrowPath || PATH}" />`;
+    const arrow = `<button class="${classes.arrow} ${prev2 ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${options.arrowPath || PATH}" />`;
     return qn(arrow);
   }
   function update() {

dist/js/splide.js

@@ -664,6 +664,13 @@
   const LOOP = "loop";
   const FADE = "fade";
 
+  function define(object, getters) {
+    L(getters, (get, key) => {
+      Object.defineProperty(object, key, { get, enumerable: true });
+    });
+    return object;
+  }
+
   function Slide$1(Splide2, index, slideIndex, slide) {
     const event = Splide2.event.create();
     const { on, emit, bind } = event;
@@ -776,7 +783,13 @@
       }
       return diff <= distance;
     }
-    const self = {
+    function pos() {
+      return un(tn(slide)[resolve("left")] - tn(Components.Elements.list)[resolve("left")]);
+    }
+    function size() {
+      return tn(slide)[resolve("width")];
+    }
+    const self = define({
       index,
       slideIndex,
       slide,
@@ -787,7 +800,7 @@
       update,
       style,
       isWithin
-    };
+    }, { pos, size });
     return self;
   }
 
@@ -971,25 +984,21 @@
     function listSize() {
       return tn(list)[resolve("width")];
     }
-    function slideSize(index, withoutGap) {
-      const Slide = getAt(index || 0);
-      return Slide ? tn(Slide.slide)[resolve("width")] + (withoutGap ? 0 : getGap()) : 0;
+    function slideSize(index = 0, withoutGap) {
+      const Slide = getAt(index);
+      return (Slide ? Slide.size : 0) + (withoutGap ? 0 : getGap());
     }
     function totalSize(index, withoutGap) {
       const Slide = getAt(index);
-      if (Slide) {
-        const right = tn(Slide.slide)[resolve("right")];
-        const left = tn(list)[resolve("left")];
-        return un(right - left) + (withoutGap ? 0 : getGap());
-      }
-      return 0;
+      return Slide ? Slide.pos + Slide.size + (withoutGap ? 0 : getGap()) : 0;
     }
     function sliderSize(withoutGap) {
       return totalSize(Splide2.length - 1) - totalSize(0) + slideSize(0, withoutGap);
     }
     function getGap() {
-      const Slide = getAt(0);
-      return Slide && parseFloat(nn(Slide.slide, resolve("marginRight"))) || 0;
+      const first = getAt(0);
+      const second = getAt(1);
+      return first && second ? second.pos - first.pos - first.size : 0;
     }
     function getPadding(right) {
       return parseFloat(nn(
@@ -1086,7 +1095,8 @@
   function Move(Splide2, Components2, options, event) {
     const { on, emit } = event;
     const { set } = Splide2.state;
-    const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components2.Layout;
+    const { Slides } = Components2;
+    const { slideSize, getPadding, listSize, sliderSize } = Components2.Layout;
     const { resolve, orient } = Components2.Direction;
     const { list, track } = Components2.Elements;
     let Transition;
@@ -1146,11 +1156,11 @@
       Transition.cancel();
     }
     function toIndex(position) {
-      const Slides = Components2.Slides.get();
+      const slides = Slides.get();
       let index = 0;
       let minDistance = Infinity;
-      for (let i = 0; i < Slides.length; i++) {
-        const slideIndex = Slides[i].index;
+      for (let i = 0; i < slides.length; i++) {
+        const slideIndex = slides[i].index;
         const distance = un(toPosition(slideIndex, true) - position);
         if (distance <= minDistance) {
           minDistance = distance;
@@ -1162,7 +1172,8 @@
       return index;
     }
     function toPosition(index, trimming) {
-      const position = orient(totalSize(index - 1) - offset(index));
+      const Slide = Slides.getAt(index);
+      const position = Slide ? orient(Slide.pos - offset(index)) : 0;
       return trimming ? trim(position) : position;
     }
     function getPosition() {
@@ -1183,8 +1194,9 @@
       return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
     }
     function canShift(backwards) {
+      const padding = getPadding(false);
       const shifted = orient(shift(getPosition(), backwards));
-      return backwards ? shifted >= 0 : shifted <= list[resolve("scrollWidth")] - tn(track)[resolve("width")];
+      return backwards ? shifted >= padding : shifted <= list[resolve("scrollWidth")] - tn(track)[resolve("width")] + padding;
     }
     function exceededLimit(max, position) {
       position = Z(position) ? getPosition() : position;
@@ -1234,7 +1246,9 @@
       perMove = options.perMove;
       perPage = options.perPage;
       endIndex = getEnd();
-      const index = bn(currIndex, 0, omitEnd ? endIndex : slideCount - 1);
+      const end = omitEnd ? endIndex : slideCount - 1;
+      const index = bn(currIndex, 0, end);
+      prevIndex = bn(currIndex, 0, end);
       if (index !== currIndex) {
         currIndex = index;
         Move.reposition();
@@ -1450,7 +1464,7 @@
       !placeholder && yn(wrapper, track);
     }
     function createArrow(prev2) {
-      const arrow = `<button class="${classes.arrow} ${prev2 ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}" focusable="false"><path d="${options.arrowPath || PATH}" />`;
+      const arrow = `<button class="${classes.arrow} ${prev2 ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${options.arrowPath || PATH}" />`;
       return qn(arrow);
     }
     function update() {

dist/types/index.d.ts

@@ -173,6 +173,8 @@ interface SlideComponent extends BaseComponent {
     container: HTMLElement;
     isClone: boolean;
     update(): void;
+    position(): number;
+    size(): number;
     style(prop: CSSProperties, value: string | number, useContainer?: boolean): void;
     isWithin(from: number, distance: number): boolean;
 }

src/js/components/Controller/Controller.ts

@@ -117,7 +117,10 @@ export function Controller(
     perPage    = options.perPage;
     endIndex   = getEnd();
 
-    const index = clamp( currIndex, 0, omitEnd ? endIndex : slideCount - 1 );
+    const end   = omitEnd ? endIndex : slideCount - 1;
+    const index = clamp( currIndex, 0, end );
+
+    prevIndex = clamp( currIndex, 0, end );
 
     if ( index !== currIndex ) {
       currIndex = index;

src/js/components/Layout/Layout.ts

@@ -2,7 +2,7 @@ import { TTB } from '../../constants/directions';
 import { EVENT_OVERFLOW, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, apply, EventInterface, isObject, rect, style, Throttle, toggleClass, unit } from '@splidejs/utils';
+import { apply, EventInterface, isObject, rect, style, Throttle, toggleClass, unit } from '@splidejs/utils';
 import { assert } from '../../utils';
 import { FADE } from '../../constants/types';
 import { CLASS_OVERFLOW } from '../../constants/classes';
@@ -204,11 +204,9 @@ export function Layout(
    *
    * @return The size of the specified slide element in pixel.
    */
-  function slideSize( index?: number, withoutGap?: boolean ): number {
-    const Slide = getAt( index || 0 );
-    return Slide
-      ? rect( Slide.slide )[ resolve( 'width' ) ] + ( withoutGap ? 0 : getGap() )
-      : 0;
+  function slideSize( index = 0, withoutGap?: boolean ): number {
+    const Slide = getAt( index );
+    return ( Slide ? Slide.size : 0 ) + ( withoutGap ? 0 : getGap() );
   }
 
   /**
@@ -222,14 +220,7 @@ export function Layout(
    */
   function totalSize( index: number, withoutGap?: boolean ): number {
     const Slide = getAt( index );
-
-    if ( Slide ) {
-      const right = rect( Slide.slide )[ resolve( 'right' ) ];
-      const left  = rect( list )[ resolve( 'left' ) ];
-      return abs( right - left ) + ( withoutGap ? 0 : getGap() );
-    }
-
-    return 0;
+    return Slide ? Slide.pos + Slide.size + ( withoutGap ? 0 : getGap() ) : 0;
   }
 
   /**
@@ -245,19 +236,23 @@ export function Layout(
   }
 
   /**
-   * Returns the gap value in pixel by using the computed style of the first slide.
+   * Compute the gap by the first and second slides.
+   * This always returns 0 if the number of slides is less than 2.
    *
    * @return The gap value in pixel.
    */
   function getGap(): number {
-    const Slide = getAt( 0 );
-    return Slide && parseFloat( style( Slide.slide, resolve( 'marginRight' ) ) ) || 0;
+    const first  = getAt( 0 );
+    const second = getAt( 1 );
+    return first && second ? second.pos - first.pos - first.size : 0;
   }
 
   /**
    * Returns the padding value.
    * This method resolves the difference of the direction.
    *
+   * @todo
+   *
    * @param right - Determines whether to get `paddingRight/Bottom` or `paddingLeft/Top`.
    *
    * @return The padding value in pixel.

src/js/components/Move/Move.ts

@@ -55,7 +55,8 @@ export function Move(
 ): MoveComponent {
   const { on, emit } = event;
   const { set } = Splide.state;
-  const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components.Layout;
+  const { Slides } = Components;
+  const { slideSize, getPadding, listSize, sliderSize } = Components.Layout;
   const { resolve, orient } = Components.Direction;
   const { list, track } = Components.Elements;
 
@@ -177,18 +178,20 @@ export function Move(
   /**
    * Returns the closest index to the position.
    *
+   * @todo
+   *
    * @param position - A position to convert.
    *
    * @return The closest index to the position.
    */
   function toIndex( position: number ): number {
-    const Slides = Components.Slides.get();
+    const slides = Slides.get();
 
     let index       = 0;
     let minDistance = Infinity;
 
-    for ( let i = 0; i < Slides.length; i++ ) {
-      const slideIndex = Slides[ i ].index;
+    for ( let i = 0; i < slides.length; i++ ) {
+      const slideIndex = slides[ i ].index;
       const distance   = abs( toPosition( slideIndex, true ) - position );
 
       if ( distance <= minDistance ) {
@@ -211,7 +214,8 @@ export function Move(
    * @return The position corresponding with the index.
    */
   function toPosition( index: number, trimming?: boolean ): number {
-    const position = orient( totalSize( index - 1 ) - offset( index ) );
+    const Slide    = Slides.getAt( index );
+    const position = Slide ? orient( Slide.pos - offset( index ) ) : 0;
     return trimming ? trim( position ) : position;
   }
 
@@ -269,10 +273,12 @@ export function Move(
    * @return `true` if the slider can be shifted for the specified direction, or otherwise `false`.
    */
   function canShift( backwards: boolean ): boolean {
+    const padding = getPadding( false );
     const shifted = orient( shift( getPosition(), backwards ) );
+
     return backwards
-      ? shifted >= 0
-      : shifted <= list[ resolve( 'scrollWidth' ) ] - rect( track )[ resolve( 'width' ) ];
+      ? shifted >= padding
+      : shifted <= list[ resolve( 'scrollWidth' ) ] - rect( track )[ resolve( 'width' ) ] + padding;
   }
 
   /**

src/js/components/Pagination/test/general.test.ts

@@ -32,7 +32,7 @@ describe( 'Pagination', () => {
 
     expect( items.length ).not.toBe( splide.length );
     expect( items.length ).toBe( splide.Components.Controller.getEnd() + 1 );
-    expect( items.length ).toBe( 9 );
+    expect( items.length ).toBe( 8 );
   } );
 
   test( 'can move the slider when the item is clicked.', () => {

src/js/components/Slides/Slide.ts

@@ -54,6 +54,7 @@ import {
   style as _style,
   toggleClass,
 } from '@splidejs/utils';
+import { define } from '../../utils/define/define';
 
 
 /**
@@ -62,11 +63,14 @@ import {
  * @since 3.0.0
  */
 export interface  SlideComponent extends BaseComponent {
-  index: number;
-  slideIndex: number;
-  slide: HTMLElement;
-  container: HTMLElement;
-  isClone: boolean;
+  readonly index: number;
+  readonly slideIndex: number;
+  readonly slide: HTMLElement;
+  readonly container: HTMLElement;
+  readonly isClone: boolean;
+  readonly pos: number;
+  readonly size: number;
+
   update(): void;
   style( prop: CSSProperties, value: string | number, useContainer?: boolean ): void
   isWithin( from: number, distance: number ): boolean;
@@ -278,7 +282,25 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     return diff <= distance;
   }
 
-  const self = {
+  /**
+   * Returns the slide offset position that is relative to the list element.
+   *
+   * @return The slide position.
+   */
+  function pos(): number {
+    return abs( rect( slide )[ resolve( 'left' ) ] - rect( Components.Elements.list )[ resolve( 'left' ) ] );
+  }
+
+  /**
+   * 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 = define( {
     index,
     slideIndex,
     slide,
@@ -289,7 +311,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     update,
     style,
     isWithin,
-  };
+  }, { pos, size } );
 
   return self;
 }

src/js/test/php/examples/css.php

@@ -0,0 +1,95 @@
+<?php
+require_once '../parts.php';
+require_once '../settings.php';
+
+$settings = get_settings();
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>CSS</title>
+
+  <link rel="stylesheet" href="../../../../../dist/css/themes/splide-<?php echo $settings['theme'] ?>.min.css">
+  <link rel="stylesheet" href="../../assets/css/styles.css">
+  <script type="text/javascript" src="../../../../../dist/js/splide.js"></script>
+
+  <script>
+    document.addEventListener( 'DOMContentLoaded', function () {
+      const splide = new Splide( '.splide', {
+        autoWidth : true,
+        pagination: false,
+        type: 'loop',
+        drag: 'free',
+      } );
+
+      splide.mount();
+    } );
+  </script>
+
+  <style>
+    body {
+      margin: 50em 0;
+    }
+
+    .splide__list {
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: calc( (100% + 2rem) / 3 - 2rem );
+      grid-column-gap: 2rem;
+    }
+
+    .splide__slide {
+      /*flex-basis: calc( (100% + 2rem) / 3 - 2rem );*/
+      /*margin-right: 2rem;*/
+    }
+
+    @media screen and (max-width: 600px) {
+      /*.splide__slide {*/
+      /*  flex-basis: 100%;*/
+      /*  margin-right: 2rem;*/
+      /*}*/
+    }
+
+    .splide__slide img {
+      /*aspect-ratio: 16 / 9;*/
+    }
+  </style>
+</head>
+<body>
+
+<section class="splide" aria-label="Basic Structure Example">
+  <div class="splide__track">
+    <ul class="splide__list">
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide01.jpg" width="960" height="540" alt>
+      </li>
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide02.jpg" width="960" height="540" alt>
+      </li>
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide03.jpg" width="960" height="540" alt>
+      </li>
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide04.jpg" width="960" height="540" alt>
+      </li>
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide05.jpg" width="960" height="540" alt>
+      </li>
+      <li class="splide__slide">
+        <img src="../../assets/images/pics/slide06.jpg" width="960" height="540" alt>
+      </li>
+    </ul>
+  </div>
+
+  <p>
+    height
+  </p>
+</section>
+
+<pre></pre>
+
+</body>
+</html>

src/js/test/php/examples/default.php

@@ -23,16 +23,17 @@ $settings = get_settings();
       var splide = new Splide( '#splide01', {
         width: 800,
         // type        : 'loop',
-        perPage: 2,
+        perPage: 3,
         // perMove: 3,
         // rewind: true,
         // rewindByDrag: true,
-        padding: '3rem',
-        updateOnMove: true,
-        direction: 'ltr',
-        height: undefined,
+        // padding: '3rem',
+        // updateOnMove: true,
+        // direction: 'ltr',
+        // height: undefined,
+        // gap: '30%',
         // paginationDirection: 'ttb',
-        rewindSpeed: 2000,
+        // rewindSpeed: 2000,
         // role: '',
         label: 'Changed Label',
         focus: 0,
@@ -110,7 +111,11 @@ $settings = get_settings();
 </head>
 <body>
 
-<?php render( 'splide01', 5 ); ?>
+<?php render( 'splide01', 10 ); ?>
+
+<div>
+  <div style="margin-right: 1rem">a</div>
+</div>
 
 <pre></pre>
 

src/js/test/utils/utils.ts

@@ -115,6 +115,8 @@ export function setSlidesRect( slides: HTMLElement[], list: HTMLElement, width:
         height: height,
         left  : width * index + offsets.left,
         right : width * index + width + offsets.left,
+        top   : height * index + offsets.top,
+        bottom: height * index + width + offsets.top,
       } );
     };
   } );

src/js/utils/define/define.test.ts

@@ -0,0 +1,24 @@
+import { define } from './define';
+
+
+describe( 'define', () => {
+  test( 'can define getters into an object.', () => {
+    const object = define( {}, { a: () => 1, b: () => true } );
+
+    // `object.a` should be `number` by the type assertion.
+    expect( object.a ).toBe( 1 );
+    expect( object.b ).toBe( true );
+  } );
+
+  test( 'should define properties as `enumerable` but not `writable`.', () => {
+    const object = {};
+    define( object, { a: () => 1, b: () => true } );
+
+    const descriptor =  Object.getOwnPropertyDescriptor( object, 'a' );
+
+    expect( descriptor?.enumerable ).toBe( true );
+    expect( descriptor?.writable ).toBeUndefined();
+
+    expect( Object.keys( object ) ).toStrictEqual( [ 'a', 'b' ] );
+  } );
+} );

src/js/utils/define/define.ts

@@ -0,0 +1,24 @@
+import { forOwn } from '@splidejs/utils';
+
+
+/**
+ * Defines getters in the provided object.
+ * Properties will be enumerable but not writable.
+ *
+ * @param object  - An object where to define getters.
+ * @param getters - An object literal containing getters as a key and a function.
+ *
+ * @return A provided object with getters.
+ */
+export function define<T, G extends Record<PropertyKey, () => unknown>>(
+  object: T,
+  getters: G
+): T & Readonly<{
+  [ K in keyof G ]: ReturnType<G[ K ]>
+}> {
+  forOwn( getters, ( get, key ) => {
+    Object.defineProperty( object, key, { get, enumerable: true } );
+  } );
+
+  return object as any;
+}