Fix #475.

dist/js/splide.cjs.js

@@ -1029,7 +1029,7 @@ function Layout(Splide2, Components2, options) {
   }
   function cssPadding(right) {
     const { padding } = options;
-    const prop = resolve(right ? "right" : "left", true);
+    const prop = resolve(right ? "right" : "left");
     return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
   }
   function cssTrackHeight() {
@@ -1078,7 +1078,7 @@ function Layout(Splide2, Components2, options) {
     return Slide && parseFloat(style(Slide.slide, resolve("marginRight"))) || 0;
   }
   function getPadding(right) {
-    return parseFloat(style(track, resolve(`padding${right ? "Right" : "Left"}`, true))) || 0;
+    return parseFloat(style(track, resolve(`padding${right ? "Right" : "Left"}`))) || 0;
   }
   return {
     mount,

dist/js/splide.esm.js

@@ -1025,7 +1025,7 @@ function Layout(Splide2, Components2, options) {
   }
   function cssPadding(right) {
     const { padding } = options;
-    const prop = resolve(right ? "right" : "left", true);
+    const prop = resolve(right ? "right" : "left");
     return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
   }
   function cssTrackHeight() {
@@ -1074,7 +1074,7 @@ function Layout(Splide2, Components2, options) {
     return Slide && parseFloat(style(Slide.slide, resolve("marginRight"))) || 0;
   }
   function getPadding(right) {
-    return parseFloat(style(track, resolve(`padding${right ? "Right" : "Left"}`, true))) || 0;
+    return parseFloat(style(track, resolve(`padding${right ? "Right" : "Left"}`))) || 0;
   }
   return {
     mount,

dist/js/splide.js

@@ -1198,7 +1198,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function cssPadding(right) {
       var padding = options.padding;
-      var prop = resolve(right ? "right" : "left", true);
+      var prop = resolve(right ? "right" : "left");
       return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
     }
 
@@ -1262,7 +1262,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function getPadding(right) {
-      return parseFloat(style(track, resolve("padding" + (right ? "Right" : "Left"), true))) || 0;
+      return parseFloat(style(track, resolve("padding" + (right ? "Right" : "Left")))) || 0;
     }
 
     return {

dist/types/components/Layout/Layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["Layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,QAAQ,IAAI,MAAM,CAAC;IACnB,SAAS,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzD,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC1D,UAAU,CAAE,KAAK,EAAE,OAAO,GAAI,MAAM,CAAC;CACtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAgNlG"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["Layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,QAAQ,IAAI,MAAM,CAAC;IACnB,SAAS,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzD,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC1D,UAAU,CAAE,KAAK,EAAE,OAAO,GAAI,MAAM,CAAC;CACtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAiNlG"}

src/js/components/Layout/Layout.ts

@@ -96,7 +96,7 @@ export function Layout( Splide: Splide, Components: Components, options: Options
    */
   function cssPadding( right: boolean ): string {
     const { padding } = options;
-    const prop = resolve( right ? 'right' : 'left', true );
+    const prop = resolve( right ? 'right' : 'left' );
     return padding && unit( padding[ prop ] || ( isObject( padding ) ? 0 : padding ) ) || '0px';
   }
 
@@ -221,13 +221,14 @@ export function Layout( Splide: Splide, Components: Components, options: Options
 
   /**
    * Returns the padding value.
+   * This method resolves the difference of the direction.
    *
    * @param right - Determines whether to get `paddingRight/Bottom` or `paddingLeft/Top`.
    *
    * @return The padding value in pixel.
    */
   function getPadding( right: boolean ): number {
-    return parseFloat( style( track, resolve( `padding${ right ? 'Right' : 'Left' }`, true ) ) ) || 0;
+    return parseFloat( style( track, resolve( `padding${ right ? 'Right' : 'Left' }` ) ) ) || 0;
   }
 
   return {

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

@@ -21,16 +21,15 @@ $settings = get_settings();
       var splide = new Splide( '#splide01', {
         type   : 'slide',
         perPage: 3,
-        // direction: 'ttb',
-        // height: 1000,
         perMove: 2,
         rewind: true,
-        // focus: 0,
+        padding: {
+          right: 0,
+          left: 40,
+        },
         breakpoints: {
           1000: {
             destroy: true,
-            // type   : 'fade',
-            // perPage: 1,
           },
         },
       } );
@@ -62,7 +61,7 @@ $settings = get_settings();
   </style>
 </head>
 <body>
-2
+
 <?php render(); ?>
 
 <pre></pre>

src/js/test/php/examples/rtl.php

@@ -0,0 +1,46 @@
+<?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>RTL</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 () {
+      var splide = new Splide( '#splide01', {
+        type     : 'slide',
+        perPage  : 3,
+        direction: 'rtl',
+        rewind   : true,
+        padding  : {
+          left: 40,
+          right: 0,
+        },
+      } );
+
+      splide.mount();
+    } );
+  </script>
+
+  <style>
+  </style>
+</head>
+<body>
+
+<?php render(); ?>
+
+<pre></pre>
+
+</body>
+</html>