Testing the translate3d property.

dist/js/splide.cjs.js

@@ -1230,7 +1230,9 @@ function Move(Splide2, Components2, options) {
   function translate(position) {
     position = loop(position);
     shouldSnap = canSnap(position);
-    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${100 * position / listSize()}%)`);
+    const isVertical = options.direction === TTB;
+    const percent = 100 * position / listSize();
+    Components2.Style.ruleBy(list, "transform", `translate3d( ${isVertical ? 0 : percent}%, ${isVertical ? percent : 0}%, 0 )`);
   }
   function loop(position) {
     if (!waiting && Splide2.is(LOOP)) {

dist/js/splide.esm.js

@@ -1226,7 +1226,9 @@ function Move(Splide2, Components2, options) {
   function translate(position) {
     position = loop(position);
     shouldSnap = canSnap(position);
-    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${100 * position / listSize()}%)`);
+    const isVertical = options.direction === TTB;
+    const percent = 100 * position / listSize();
+    Components2.Style.ruleBy(list, "transform", `translate3d( ${isVertical ? 0 : percent}%, ${isVertical ? percent : 0}%, 0 )`);
   }
   function loop(position) {
     if (!waiting && Splide2.is(LOOP)) {

dist/js/splide.js

@@ -1460,7 +1460,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function translate(position) {
       position = loop(position);
       shouldSnap = canSnap(position);
-      Components2.Style.ruleBy(list, "transform", "translate" + resolve("X") + "(" + 100 * position / listSize() + "%)");
+      var isVertical = options.direction === TTB;
+      var percent = 100 * position / listSize();
+      Components2.Style.ruleBy(list, "transform", "translate3d( " + (isVertical ? 0 : percent) + "%, " + (isVertical ? percent : 0) + "%, 0 )");
     }
 
     function loop(position) {

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

@@ -1 +1 @@
-{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAK9E;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,GAAI,IAAI,CAAC;IACpC,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAmQ9F"}
+{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAK9E;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,GAAI,IAAI,CAAC;IACpC,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAsQ9F"}

src/js/components/Move/Move.ts

@@ -1,3 +1,4 @@
+import { TTB } from '../../constants/directions';
 import { EVENT_MOVE, EVENT_MOVED, EVENT_REFRESH, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';
 import { DEFAULT_EVENT_PRIORITY } from '../../constants/priority';
 import { IDLE, MOVING } from '../../constants/states';
@@ -126,10 +127,13 @@ export function Move( Splide: Splide, Components: Components, options: Options )
     position   = loop( position );
     shouldSnap = canSnap( position );
 
+    const isVertical = options.direction === TTB;
+    const percent    = 100 * position / listSize();
+
     Components.Style.ruleBy(
       list,
       'transform',
-      `translate${ resolve( 'X' ) }(${ 100 * position / listSize() }%)`
+      `translate3d( ${ isVertical ? 0 : percent }%, ${ isVertical ? percent : 0 }%, 0 )`,
     );
   }
 

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

@@ -20,7 +20,7 @@ $settings = get_settings();
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
         type   : 'loop',
-        perPage: 1,
+        perPage: 3,
         perMove: 1,
         gap    : '1.5rem',
         height : 400,

src/js/test/php/settings.php

@@ -1,6 +1,6 @@
 <?php
 function get_settings() {
   return [
-    'theme' => 'skyblue',
+    'theme' => 'default',
   ];
 }