The renderer can render the slider element.

dist/js/splide.cjs.js

@@ -2736,14 +2736,23 @@ class SplideRenderer {
     return html;
   }
   renderArrow(prev) {
-    const { classes } = this.options;
-    return `<button class="${classes.arrow} ${prev ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${this.options.arrowPath || PATH}" /></svg></button>`;
+    const { classes, i18n } = this.options;
+    const attrs = {
+      class: `${classes.arrow} ${prev ? classes.prev : classes.next}`,
+      type: "button",
+      ariaLabel: prev ? i18n.prev : i18n.next
+    };
+    return `<button ${this.buildAttrs(attrs)}><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${this.options.arrowPath || PATH}" /></svg></button>`;
   }
   html() {
-    const { rootClass, listTag, arrows, beforeTrack, afterTrack } = this.config;
+    const { rootClass, listTag, arrows, beforeTrack, afterTrack, slider, beforeSlider, afterSlider } = this.config;
     let html = "";
     html += `<div id="${this.id}" class="${this.buildClasses()} ${rootClass || ""}">`;
     html += `<style>${this.Style.build()}</style>`;
+    if (slider) {
+      html += beforeSlider || "";
+      html += `<div class="splide__slider">`;
+    }
     html += beforeTrack || "";
     html += `<div class="splide__track">`;
     html += `<${listTag} class="splide__list">`;
@@ -2754,6 +2763,10 @@ class SplideRenderer {
       html += this.renderArrows();
     }
     html += afterTrack || "";
+    if (slider) {
+      html += `</div>`;
+      html += afterSlider || "";
+    }
     html += `</div>`;
     return html;
   }

dist/js/splide.esm.js

@@ -2732,14 +2732,23 @@ class SplideRenderer {
     return html;
   }
   renderArrow(prev) {
-    const { classes } = this.options;
-    return `<button class="${classes.arrow} ${prev ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${this.options.arrowPath || PATH}" /></svg></button>`;
+    const { classes, i18n } = this.options;
+    const attrs = {
+      class: `${classes.arrow} ${prev ? classes.prev : classes.next}`,
+      type: "button",
+      ariaLabel: prev ? i18n.prev : i18n.next
+    };
+    return `<button ${this.buildAttrs(attrs)}><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${this.options.arrowPath || PATH}" /></svg></button>`;
   }
   html() {
-    const { rootClass, listTag, arrows, beforeTrack, afterTrack } = this.config;
+    const { rootClass, listTag, arrows, beforeTrack, afterTrack, slider, beforeSlider, afterSlider } = this.config;
     let html = "";
     html += `<div id="${this.id}" class="${this.buildClasses()} ${rootClass || ""}">`;
     html += `<style>${this.Style.build()}</style>`;
+    if (slider) {
+      html += beforeSlider || "";
+      html += `<div class="splide__slider">`;
+    }
     html += beforeTrack || "";
     html += `<div class="splide__track">`;
     html += `<${listTag} class="splide__list">`;
@@ -2750,6 +2759,10 @@ class SplideRenderer {
       html += this.renderArrows();
     }
     html += afterTrack || "";
+    if (slider) {
+      html += `</div>`;
+      html += afterSlider || "";
+    }
     html += `</div>`;
     return html;
   }

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

@@ -280,6 +280,7 @@ export declare class SplideRenderer {
     private renderArrows;
     /**
      * Generates an arrow HTML.
+     * Some attributes are temporary, and Splide changes them after mount.
      *
      * @param prev - Options for each breakpoint.
      *

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

@@ -43,6 +43,14 @@ export interface RendererConfig {
      * Determines whether to render arrows or not.
      */
     arrows?: boolean;
+    /**
+     * The additional HTML rendered before the slider element.
+     */
+    beforeSlider?: string;
+    /**
+     * The additional HTML rendered after the slider element.
+     */
+    afterSlider?: string;
     /**
      * The additional HTML rendered before the track element.
      */
@@ -55,5 +63,9 @@ export interface RendererConfig {
      * Keeps the slider hidden.
      */
     hidden?: boolean;
+    /**
+     * Determines whether to wrap the track by the slider element or not.
+     */
+    slider?: boolean;
 }
 //# sourceMappingURL=../../../../src/js/renderer/types/types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAEzC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CACnD;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAEzC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CACnD;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -657,14 +657,21 @@ export class SplideRenderer {
 
   /**
    * Generates an arrow HTML.
+   * Some attributes are temporary, and Splide changes them after mount.
    *
    * @param prev - Options for each breakpoint.
    *
    * @return The HTML for the prev or next arrow.
    */
   private renderArrow( prev: boolean ): string {
-    const { classes } = this.options;
-    return `<button class="${ classes.arrow } ${ prev ? classes.prev : classes.next }" type="button">`
+    const { classes, i18n } = this.options;
+    const attrs = {
+      class    : `${ classes.arrow } ${ prev ? classes.prev : classes.next }`,
+      type     : 'button',
+      ariaLabel: prev ? i18n.prev : i18n.next,
+    };
+
+    return `<button ${ this.buildAttrs( attrs ) }>`
       +	`<svg xmlns="${ XML_NAME_SPACE }" viewBox="0 0 ${ SIZE } ${ SIZE }" width="${ SIZE }" height="${ SIZE }">`
       + `<path d="${ this.options.arrowPath || PATH }" />`
       + `</svg>`
@@ -677,13 +684,18 @@ export class SplideRenderer {
    * @return The generated HTML.
    */
   html(): string {
-    const { rootClass, listTag, arrows, beforeTrack, afterTrack } = this.config;
+    const { rootClass, listTag, arrows, beforeTrack, afterTrack, slider, beforeSlider, afterSlider } = this.config;
 
     let html = '';
 
     html += `<div id="${ this.id }" class="${ this.buildClasses() } ${ rootClass || '' }">`;
     html += `<style>${ this.Style.build() }</style>`;
 
+    if ( slider ) {
+      html += beforeSlider || '';
+      html += `<div class="splide__slider">`;
+    }
+
     html += beforeTrack || '';
 
     html += `<div class="splide__track">`;
@@ -692,14 +704,20 @@ export class SplideRenderer {
     html += this.renderSlides();
 
     html += `</${ listTag }>`;
-    html += `</div>`;
+    html += `</div>`; // .track
 
     if ( arrows ) {
       html += this.renderArrows();
     }
 
     html += afterTrack || '';
-    html += `</div>`;
+
+    if ( slider ) {
+      html += `</div>`;
+      html += afterSlider || '';
+    }
+
+    html += `</div>`; // .splide
 
     return html;
   }

src/js/renderer/types/types.ts

@@ -51,6 +51,26 @@ export interface RendererConfig {
    */
   arrows?: boolean;
 
+  /**
+   * Keeps the slider hidden.
+   */
+  hidden?: boolean;
+
+  /**
+   * Determines whether to wrap the track by the slider element or not.
+   */
+  slider?: boolean;
+
+  /**
+   * The additional HTML rendered before the slider element.
+   */
+  beforeSlider?: string;
+
+  /**
+   * The additional HTML rendered after the slider element.
+   */
+  afterSlider?: string;
+
   /**
    * The additional HTML rendered before the track element.
    */
@@ -60,9 +80,4 @@ export interface RendererConfig {
    * The additional HTML rendered after the track element.
    */
   afterTrack?: string;
-
-  /**
-   * Keeps the slider hidden.
-   */
-  hidden?: boolean;
 }

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

@@ -94,7 +94,7 @@ $settings = get_settings();
         {
           id: 'test',
           arrows: true,
-          // hidden: true,
+          slider: true,
         }
       );