Bug Fix: The gap offset calculation in the center mode was incorrect.

dist/js/splide.cjs.js

@@ -2527,7 +2527,7 @@ class SplideRenderer {
     values.push(this.cssOffsetGaps(options));
     if (this.isCenter(options)) {
       values.push(this.buildCssValue(orient(-50), "%"));
-      values.push(this.cssOffsetCenter(options));
+      values.push(...this.cssOffsetCenter(options));
     }
     return values.map((value) => `translate${resolve("X")}(${value})`).join(" ");
   }
@@ -2545,10 +2545,17 @@ class SplideRenderer {
     const { resolve, orient } = this.Direction;
     if (this.isFixedWidth(options)) {
       const { value, unit: unit2 } = this.parseCssValue(options[resolve("fixedWidth")]);
-      return this.buildCssValue(orient(value / 2), unit2);
+      return [this.buildCssValue(orient(value / 2), unit2)];
     }
-    const slidePercent = 100 / options.perPage;
-    return `${orient(slidePercent / 2)}%`;
+    const values = [];
+    const { perPage, gap } = options;
+    values.push(`${orient(50 / perPage)}%`);
+    if (gap) {
+      const { value, unit: unit2 } = this.parseCssValue(gap);
+      const gapOffset = (value / perPage - value) / 2;
+      values.push(this.buildCssValue(orient(gapOffset), unit2));
+    }
+    return values;
   }
   cssOffsetGaps(options) {
     const cloneCount = this.getCloneCount();

dist/js/splide.esm.js

@@ -2523,7 +2523,7 @@ class SplideRenderer {
     values.push(this.cssOffsetGaps(options));
     if (this.isCenter(options)) {
       values.push(this.buildCssValue(orient(-50), "%"));
-      values.push(this.cssOffsetCenter(options));
+      values.push(...this.cssOffsetCenter(options));
     }
     return values.map((value) => `translate${resolve("X")}(${value})`).join(" ");
   }
@@ -2541,10 +2541,17 @@ class SplideRenderer {
     const { resolve, orient } = this.Direction;
     if (this.isFixedWidth(options)) {
       const { value, unit: unit2 } = this.parseCssValue(options[resolve("fixedWidth")]);
-      return this.buildCssValue(orient(value / 2), unit2);
+      return [this.buildCssValue(orient(value / 2), unit2)];
     }
-    const slidePercent = 100 / options.perPage;
-    return `${orient(slidePercent / 2)}%`;
+    const values = [];
+    const { perPage, gap } = options;
+    values.push(`${orient(50 / perPage)}%`);
+    if (gap) {
+      const { value, unit: unit2 } = this.parseCssValue(gap);
+      const gapOffset = (value / perPage - value) / 2;
+      values.push(this.buildCssValue(orient(gapOffset), unit2));
+    }
+    return values;
   }
   cssOffsetGaps(options) {
     const cloneCount = this.getCloneCount();

dist/types/renderer/SplideRenderer/SplideRenderer.d.ts

@@ -91,6 +91,11 @@ export declare class SplideRenderer {
     /**
      * Returns offset for centering the active slide.
      *
+     * Note:
+     * ( 100% + gap ) / perPage - gap
+     * 100% / perPage + gap / perPage - gap;
+     * 50% / perPage + ( gap / perPage - gap ) / 2;
+     *
      * @param options - Options for each breakpoint.
      *
      * @return The offset.

dist/types/renderer/SplideRenderer/SplideRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplideRenderer.d.ts","sourceRoot":"","sources":["SplideRenderer.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAqBxD;;;;GAIG;AACH,qBAAa,cAAc;IACzB;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAE,MAAM,EAAE,MAAM,GAAI,IAAI;IAYpC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAW;IAEpC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAqB;IAE/C;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAQ;IAE9B;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAe;IAEvC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAS;IAE5B;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA6B;IAEzD;;;;;;;OAOG;gBACU,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,GAAE,OAAY;IAcvF;;OAEG;IACH,OAAO,CAAC,IAAI;IAQZ;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAerB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAetB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAavB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAYvB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAmBrB;;;;;;OAMG;IACH,OAAO,CAAC,OAAO;IAIf;;;;;;;OAOG;IACH,OAAO,CAAC,UAAU;IAMlB;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAYtB;;;;;;OAMG;IACH,OAAO,CAAC,SAAS;IAIjB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAQtB;;;;;;OAMG;IACH,OAAO,CAAC,YAAY;IAKpB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAIrB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAUrB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAId;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAchB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAIlB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAYpB;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAUlB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAgBpB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAgBtB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAWpB;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IASnB;;;;OAIG;IACH,IAAI,CAAE,gBAAgB,GAAE,gBAAqB,GAAI,MAAM;CA4BxD"}
+{"version":3,"file":"SplideRenderer.d.ts","sourceRoot":"","sources":["SplideRenderer.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAqBxD;;;;GAIG;AACH,qBAAa,cAAc;IACzB;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAE,MAAM,EAAE,MAAM,GAAI,IAAI;IAYpC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAW;IAEpC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAqB;IAE/C;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAQ;IAE9B;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAe;IAEvC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAS;IAE5B;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA6B;IAEzD;;;;;;;OAOG;gBACU,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,GAAE,OAAY;IAcvF;;OAEG;IACH,OAAO,CAAC,IAAI;IAQZ;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAerB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAetB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAavB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,eAAe;IAsBvB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAmBrB;;;;;;OAMG;IACH,OAAO,CAAC,OAAO;IAIf;;;;;;;OAOG;IACH,OAAO,CAAC,UAAU;IAMlB;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAYtB;;;;;;OAMG;IACH,OAAO,CAAC,SAAS;IAIjB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAQtB;;;;;;OAMG;IACH,OAAO,CAAC,YAAY;IAKpB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAIrB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAUrB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAId;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAchB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAIlB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAYpB;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAUlB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAgBpB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAgBtB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAWpB;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IASnB;;;;OAIG;IACH,IAAI,CAAE,gBAAgB,GAAE,gBAAqB,GAAI,MAAM;CA4BxD"}

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -207,7 +207,7 @@ export class SplideRenderer {
 
     if ( this.isCenter( options ) ) {
       values.push( this.buildCssValue( orient( -50 ), '%' ) );
-      values.push( this.cssOffsetCenter( options ) );
+      values.push( ...this.cssOffsetCenter( options ) );
     }
 
     return values.map( value => `translate${ resolve( 'X' ) }(${ value })` ).join( ' ' );
@@ -237,20 +237,35 @@ export class SplideRenderer {
   /**
    * Returns offset for centering the active slide.
    *
+   * Note:
+   * ( 100% + gap ) / perPage - gap
+   * 100% / perPage + gap / perPage - gap;
+   * 50% / perPage + ( gap / perPage - gap ) / 2;
+   *
    * @param options - Options for each breakpoint.
    *
    * @return The offset.
    */
-  private cssOffsetCenter( options: Options ): string {
+  private cssOffsetCenter( options: Options ): string[] {
     const { resolve, orient } = this.Direction;
 
     if ( this.isFixedWidth( options ) ) {
       const { value, unit } = this.parseCssValue( options[ resolve( 'fixedWidth' ) ] );
-      return this.buildCssValue( orient( value / 2 ), unit );
+      return [ this.buildCssValue( orient( value / 2 ), unit ) ];
+    }
+
+    const values = [];
+    const { perPage, gap } = options;
+
+    values.push( `${ orient( 50 / perPage ) }%` );
+
+    if ( gap ) {
+      const { value, unit } = this.parseCssValue( gap );
+      const gapOffset = ( value / perPage - value ) / 2;
+      values.push( this.buildCssValue( orient( gapOffset ), unit ) );
     }
 
-    const slidePercent = 100 / options.perPage;
-    return `${ orient( slidePercent / 2 ) }%`;
+    return values;
   }
 
   /**

src/js/test/php/examples/renderer.php

@@ -21,10 +21,10 @@ $settings = get_settings();
     document.addEventListener( 'DOMContentLoaded', function () {
       const options = {
         type: 'loop',
-        padding: '1rem',
-        // perPage: 2,
+        // padding: '1rem',
+        perPage: 3,
         // clones: 5,
-        gap: 10,
+        gap: 100,
         focus: 'center',
         // fixedWidth: '20rem',
         // fixedHeight: '20rem',