Refactoring.

dist/js/splide.cjs.js

@@ -1184,7 +1184,7 @@ const Move = (Splide, Components, options, event) => {
     if (!Components.Controller.isBusy()) {
       Components.Scroll.cancel();
       jump(Splide.index);
-      Components.Slides.update();
+      Slides.update();
     }
   }
   function move(dest, index, prev, callback) {
@@ -1703,8 +1703,9 @@ const Scroll = (Splide, Components, options, event) => {
     emit(EVENT_SCROLLED);
   }
   function update(from, to, noConstrain, rate) {
+    const { easingFunc = (t) => 1 - Math.pow(1 - t, 4) } = options;
     const position = getPosition();
-    const target = from + (to - from) * easing(rate);
+    const target = from + (to - from) * easingFunc(rate);
     const diff = (target - position) * friction;
     translate(position + diff);
     if (isSlide && !noConstrain && exceededLimit()) {
@@ -1725,10 +1726,6 @@ const Scroll = (Splide, Components, options, event) => {
       onEnd();
     }
   }
-  function easing(t) {
-    const { easingFunc } = options;
-    return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4);
-  }
   return {
     mount,
     destroy: clear,
@@ -2065,20 +2062,21 @@ const Pagination = (Splide, Components, options, event) => {
     const { length } = Splide;
     const { classes, i18n, perPage, paginationKeyboard = true } = options;
     const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
+    const dir = getDirection();
     list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
-    addClass(list, paginationClasses = `${CLASS_PAGINATION}--${getDirection()}`);
+    addClass(list, paginationClasses = `${CLASS_PAGINATION}--${dir}`);
     setAttribute(list, ROLE, "tablist");
     setAttribute(list, ARIA_LABEL, i18n.select);
-    setAttribute(list, ARIA_ORIENTATION, getDirection() === TTB ? "vertical" : "");
+    setAttribute(list, ARIA_ORIENTATION, dir === TTB ? "vertical" : "");
     for (let i = 0; i < max; i++) {
       const li = create("li", null, list);
       const button = create("button", { class: classes.page, type: "button" }, li);
       const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
       const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
-      bind(button, "click", apply(onClick, i));
-      if (paginationKeyboard) {
-        bind(button, "keydown", apply(onKeydown, i));
-      }
+      bind(button, "click", () => {
+        go(`>${i}`, true);
+      });
+      paginationKeyboard && bind(button, "keydown", apply(onKeydown, i));
       setAttribute(li, ROLE, "presentation");
       setAttribute(button, ROLE, "tab");
       setAttribute(button, ARIA_CONTROLS, controls.join(" "));
@@ -2087,9 +2085,6 @@ const Pagination = (Splide, Components, options, event) => {
       items.push({ li, button, page: i });
     }
   }
-  function onClick(page) {
-    go(`>${page}`, true);
-  }
   function onKeydown(page, e) {
     const { length } = items;
     const { key } = e;

dist/js/splide.esm.js

@@ -1180,7 +1180,7 @@ const Move = (Splide, Components, options, event) => {
     if (!Components.Controller.isBusy()) {
       Components.Scroll.cancel();
       jump(Splide.index);
-      Components.Slides.update();
+      Slides.update();
     }
   }
   function move(dest, index, prev, callback) {
@@ -1699,8 +1699,9 @@ const Scroll = (Splide, Components, options, event) => {
     emit(EVENT_SCROLLED);
   }
   function update(from, to, noConstrain, rate) {
+    const { easingFunc = (t) => 1 - Math.pow(1 - t, 4) } = options;
     const position = getPosition();
-    const target = from + (to - from) * easing(rate);
+    const target = from + (to - from) * easingFunc(rate);
     const diff = (target - position) * friction;
     translate(position + diff);
     if (isSlide && !noConstrain && exceededLimit()) {
@@ -1721,10 +1722,6 @@ const Scroll = (Splide, Components, options, event) => {
       onEnd();
     }
   }
-  function easing(t) {
-    const { easingFunc } = options;
-    return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4);
-  }
   return {
     mount,
     destroy: clear,
@@ -2061,20 +2058,21 @@ const Pagination = (Splide, Components, options, event) => {
     const { length } = Splide;
     const { classes, i18n, perPage, paginationKeyboard = true } = options;
     const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
+    const dir = getDirection();
     list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
-    addClass(list, paginationClasses = `${CLASS_PAGINATION}--${getDirection()}`);
+    addClass(list, paginationClasses = `${CLASS_PAGINATION}--${dir}`);
     setAttribute(list, ROLE, "tablist");
     setAttribute(list, ARIA_LABEL, i18n.select);
-    setAttribute(list, ARIA_ORIENTATION, getDirection() === TTB ? "vertical" : "");
+    setAttribute(list, ARIA_ORIENTATION, dir === TTB ? "vertical" : "");
     for (let i = 0; i < max; i++) {
       const li = create("li", null, list);
       const button = create("button", { class: classes.page, type: "button" }, li);
       const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
       const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
-      bind(button, "click", apply(onClick, i));
-      if (paginationKeyboard) {
-        bind(button, "keydown", apply(onKeydown, i));
-      }
+      bind(button, "click", () => {
+        go(`>${i}`, true);
+      });
+      paginationKeyboard && bind(button, "keydown", apply(onKeydown, i));
       setAttribute(li, ROLE, "presentation");
       setAttribute(button, ROLE, "tab");
       setAttribute(button, ARIA_CONTROLS, controls.join(" "));
@@ -2083,9 +2081,6 @@ const Pagination = (Splide, Components, options, event) => {
       items.push({ li, button, page: i });
     }
   }
-  function onClick(page) {
-    go(`>${page}`, true);
-  }
   function onKeydown(page, e) {
     const { length } = items;
     const { key } = e;

dist/js/splide.js

@@ -528,8 +528,7 @@
     ArrowRight: [ARROW_DOWN, ARROW_LEFT]
   };
   const Direction = (Splide2, Components2, options) => {
-    function resolve(prop, axisOnly, direction) {
-      direction = direction || options.direction;
+    function resolve(prop, axisOnly, direction = options.direction) {
       const index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
       return ORIENTATION_MAP[prop] && ORIENTATION_MAP[prop][index] || prop.replace(/width|left|right/i, (match, offset) => {
         const replacement = ORIENTATION_MAP[match.toLowerCase()][index] || match;
@@ -1180,7 +1179,7 @@
       if (!Components.Controller.isBusy()) {
         Components.Scroll.cancel();
         jump(Splide.index);
-        Components.Slides.update();
+        Slides.update();
       }
     }
     function move(dest, index, prev, callback) {
@@ -1699,8 +1698,9 @@
       emit(EVENT_SCROLLED);
     }
     function update(from, to, noConstrain, rate) {
+      const { easingFunc = (t) => 1 - Math.pow(1 - t, 4) } = options;
       const position = getPosition();
-      const target = from + (to - from) * easing(rate);
+      const target = from + (to - from) * easingFunc(rate);
       const diff = (target - position) * friction;
       translate(position + diff);
       if (isSlide && !noConstrain && exceededLimit()) {
@@ -1721,10 +1721,6 @@
         onEnd();
       }
     }
-    function easing(t) {
-      const { easingFunc } = options;
-      return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4);
-    }
     return {
       mount,
       destroy: clear,
@@ -2061,20 +2057,21 @@
       const { length } = Splide;
       const { classes, i18n, perPage, paginationKeyboard = true } = options;
       const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
+      const dir = getDirection();
       list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
-      addClass(list, paginationClasses = `${CLASS_PAGINATION}--${getDirection()}`);
+      addClass(list, paginationClasses = `${CLASS_PAGINATION}--${dir}`);
       setAttribute(list, ROLE, "tablist");
       setAttribute(list, ARIA_LABEL, i18n.select);
-      setAttribute(list, ARIA_ORIENTATION, getDirection() === TTB ? "vertical" : "");
+      setAttribute(list, ARIA_ORIENTATION, dir === TTB ? "vertical" : "");
       for (let i = 0; i < max; i++) {
         const li = create("li", null, list);
         const button = create("button", { class: classes.page, type: "button" }, li);
         const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
         const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
-        bind(button, "click", apply(onClick, i));
-        if (paginationKeyboard) {
-          bind(button, "keydown", apply(onKeydown, i));
-        }
+        bind(button, "click", () => {
+          go(`>${i}`, true);
+        });
+        paginationKeyboard && bind(button, "keydown", apply(onKeydown, i));
         setAttribute(li, ROLE, "presentation");
         setAttribute(button, ROLE, "tab");
         setAttribute(button, ARIA_CONTROLS, controls.join(" "));
@@ -2083,9 +2080,6 @@
         items.push({ li, button, page: i });
       }
     }
-    function onClick(page) {
-      go(`>${page}`, true);
-    }
     function onKeydown(page, e) {
       const { length } = items;
       const { key } = e;

src/js/components/Direction/Direction.ts

@@ -49,8 +49,11 @@ export const Direction: ComponentConstructor<DirectionComponent> = ( Splide: Spl
    * @param axisOnly  - Optional. If `ture`, returns the same property for LTR and RTL.
    * @param direction - Optional. Specify the direction. The default value is the `direction` option.
    */
-  function resolve<R extends string>( prop: string, axisOnly?: boolean, direction?: Options['direction'] ): R {
-    direction = direction || options.direction;
+  function resolve<R extends string>(
+    prop: string,
+    axisOnly?: boolean,
+    direction: Options['direction'] = options.direction
+  ): R {
     const index = direction === RTL && ! axisOnly ? 1 : direction === TTB ? 0 : -1;
 
     return ORIENTATION_MAP[ prop ] && ORIENTATION_MAP[ prop ][ index ]

src/js/components/Move/Move.ts

@@ -77,7 +77,7 @@ export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, o
     if ( ! Components.Controller.isBusy() ) {
       Components.Scroll.cancel();
       jump( Splide.index );
-      Components.Slides.update();
+      Slides.update();
     }
   }
 

src/js/components/Pagination/Pagination.ts

@@ -143,13 +143,14 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
     const { length } = Splide;
     const { classes, i18n, perPage, paginationKeyboard = true } = options;
     const max = hasFocus() ? Controller.getEnd() + 1 : ceil( length / perPage );
+    const dir = getDirection();
 
     list = placeholder || create( 'ul', classes.pagination, Elements.track.parentElement );
 
-    addClass( list, ( paginationClasses = `${ CLASS_PAGINATION }--${ getDirection() }` ) );
+    addClass( list, ( paginationClasses = `${ CLASS_PAGINATION }--${ dir }` ) );
     setAttribute( list, ROLE, 'tablist' );
     setAttribute( list, ARIA_LABEL, i18n.select );
-    setAttribute( list, ARIA_ORIENTATION, getDirection() === TTB ? 'vertical' : '' );
+    setAttribute( list, ARIA_ORIENTATION, dir === TTB ? 'vertical' : '' );
 
     for ( let i = 0; i < max; i++ ) {
       const li       = create( 'li', null, list );
@@ -157,11 +158,8 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
       const controls = Slides.getIn( i ).map( Slide => Slide.slide.id );
       const text     = ! hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
 
-      bind( button, 'click', apply( onClick, i ) );
-
-      if ( paginationKeyboard ) {
-        bind( button, 'keydown', apply( onKeydown, i ) );
-      }
+      bind( button, 'click', () => { go( `>${ i }`, true ) } );
+      paginationKeyboard && bind( button, 'keydown', apply( onKeydown, i ) );
 
       setAttribute( li, ROLE, 'presentation' );
       setAttribute( button, ROLE, 'tab' );
@@ -173,16 +171,6 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
     }
   }
 
-  /**
-   * Called when the user clicks each pagination dot.
-   * Moves the focus to the active slide for accessibility.
-   *
-   * @param page - A clicked page index.
-   */
-  function onClick( page: number ): void {
-    go( `>${ page }`, true );
-  }
-
   /**
    * Called when any key is pressed on the pagination.
    *
@@ -219,8 +207,10 @@ export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, C
 
   /**
    * Returns the latest direction for pagination.
+   *
+   * @return The direction for pagination.
    */
-  function getDirection(): Options['direction'] {
+  function getDirection(): Options[ 'direction' ] {
     return options.paginationDirection || options.direction;
   }
 

src/js/components/Scroll/Scroll.ts

@@ -114,8 +114,9 @@ export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Component
    * @param rate        - A current rate.
    */
   function update( from: number, to: number, noConstrain: boolean | undefined, rate: number ): void {
+    const { easingFunc = t => 1 - Math.pow( 1 - t, 4 ) } = options;
     const position = getPosition();
-    const target   = from + ( to - from ) * easing( rate );
+    const target   = from + ( to - from ) * easingFunc( rate );
     const diff     = ( target - position ) * friction;
 
     translate( position + diff );
@@ -148,18 +149,6 @@ export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Component
     }
   }
 
-  /**
-   * The easing function.
-   *
-   * @param t - A value to ease.
-   *
-   * @return An eased value.
-   */
-  function easing( t: number ): number {
-    const { easingFunc } = options;
-    return easingFunc ? easingFunc( t ) : 1 - Math.pow( 1 - t, 4 );
-  }
-
   return {
     mount,
     destroy: clear,

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

@@ -16,7 +16,7 @@ $settings = get_settings();
   <link rel="stylesheet" href="../../assets/css/styles.css">
   <script type="text/javascript" src="../../../../../dist/js/splide.js"></script>
 
-<!--	https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.12/dist/js/splide.min.js-->
+<!--	https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js-->
 
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
@@ -33,7 +33,7 @@ $settings = get_settings();
         // direction: 'ltr',
         // height: undefined,
         // gap: '30%',
-        // paginationDirection: 'ttb',
+        paginationDirection: 'ttb',
         // rewindSpeed: 2000,
         // role: '',
         label: 'Changed Label',

src/js/test/php/examples/lazyLoad.php

@@ -14,6 +14,14 @@ $settings = get_settings();
   <link rel="stylesheet" href="../../assets/css/styles.css">
   <script src="../../../../../dist/js/splide.js"></script>
 
+<!--  <style>-->
+<!--    .splide__slide img {-->
+<!--      width: 100%;-->
+<!--      height: 100%;-->
+<!--      object-fit: cover;-->
+<!--    }-->
+<!--  </style>-->
+
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide01 = new Splide( '#splide01', {