Change the arrow position.

dist/js/splide.cjs.js

@@ -2756,14 +2756,14 @@ class SplideRenderer {
       html += `<div class="splide__slider">`;
     }
     html += beforeTrack || "";
+    if (arrows) {
+      html += this.renderArrows();
+    }
     html += `<div class="splide__track">`;
     html += `<${listTag} class="splide__list">`;
     html += this.renderSlides();
     html += `</${listTag}>`;
     html += `</div>`;
-    if (arrows) {
-      html += this.renderArrows();
-    }
     html += afterTrack || "";
     if (slider) {
       html += `</div>`;

dist/js/splide.esm.js

@@ -2752,14 +2752,14 @@ class SplideRenderer {
       html += `<div class="splide__slider">`;
     }
     html += beforeTrack || "";
+    if (arrows) {
+      html += this.renderArrows();
+    }
     html += `<div class="splide__track">`;
     html += `<${listTag} class="splide__list">`;
     html += this.renderSlides();
     html += `</${listTag}>`;
     html += `</div>`;
-    if (arrows) {
-      html += this.renderArrows();
-    }
     html += afterTrack || "";
     if (slider) {
       html += `</div>`;

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -698,6 +698,10 @@ export class SplideRenderer {
 
     html += beforeTrack || '';
 
+    if ( arrows ) {
+      html += this.renderArrows();
+    }
+
     html += `<div class="splide__track">`;
     html += `<${ listTag } class="splide__list">`;
 
@@ -706,10 +710,6 @@ export class SplideRenderer {
     html += `</${ listTag }>`;
     html += `</div>`; // .track
 
-    if ( arrows ) {
-      html += this.renderArrows();
-    }
-
     html += afterTrack || '';
 
     if ( slider ) {

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

@@ -54,5 +54,9 @@ $settings = get_settings();
 
 <?php render(); ?>
 
+<div aria-hidden="true">
+  <input>
+</div>
+
 </body>
 </html>

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

@@ -102,9 +102,9 @@ $settings = get_settings();
       wrapper.innerHTML = renderer.html();
 
       setTimeout( () => {
-        // var splide = new Splide( wrapper.firstElementChild, options );
-        // SplideRenderer.clean( splide );
-        // splide.mount();
+        var splide = new Splide( wrapper.firstElementChild, options );
+        SplideRenderer.clean( splide );
+        splide.mount();
       }, 2000 );
     } );
   </script>