The renderer accepts additional HTML.

dist/js/splide.cjs.js

@@ -2682,10 +2682,11 @@ class SplideRenderer {
   }
   html(renderingOptions = {}) {
     renderingOptions = assign({}, RENDERING_DEFAULT_OPTIONS, renderingOptions);
-    const { rootClass, listTag, arrows } = renderingOptions;
+    const { rootClass, listTag, arrows, beforeTrack, afterTrack } = renderingOptions;
     let html = "";
     html += `<div id="${this.id}" class="${this.buildClasses()} ${rootClass || ""}">`;
     html += `<style>${this.Style.build()}</style>`;
+    html += beforeTrack || "";
     html += `<div class="splide__track">`;
     html += `<${listTag} class="splide__list">`;
     html += this.renderSlides(renderingOptions);
@@ -2694,6 +2695,7 @@ class SplideRenderer {
     if (arrows) {
       html += this.renderArrows();
     }
+    html += afterTrack || "";
     html += `</div>`;
     return html;
   }

dist/js/splide.esm.js

@@ -2678,10 +2678,11 @@ class SplideRenderer {
   }
   html(renderingOptions = {}) {
     renderingOptions = assign({}, RENDERING_DEFAULT_OPTIONS, renderingOptions);
-    const { rootClass, listTag, arrows } = renderingOptions;
+    const { rootClass, listTag, arrows, beforeTrack, afterTrack } = renderingOptions;
     let html = "";
     html += `<div id="${this.id}" class="${this.buildClasses()} ${rootClass || ""}">`;
     html += `<style>${this.Style.build()}</style>`;
+    html += beforeTrack || "";
     html += `<div class="splide__track">`;
     html += `<${listTag} class="splide__list">`;
     html += this.renderSlides(renderingOptions);
@@ -2690,6 +2691,7 @@ class SplideRenderer {
     if (arrows) {
       html += this.renderArrows();
     }
+    html += afterTrack || "";
     html += `</div>`;
     return html;
   }

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;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAepB;;;;;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;CAwBxD"}
+{"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;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAepB;;;;;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"}

dist/types/renderer/constants/defaults.d.ts

@@ -0,0 +1,8 @@
+import { RenderingOptions } from '../../types';
+/**
+ * Default options for generating static HTML.
+ *
+ * @since 3.0.0
+ */
+export declare const RENDERING_DEFAULT_OPTIONS: RenderingOptions;
+//# sourceMappingURL=../../../../src/js/renderer/constants/defaults.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,gBAGvC,CAAC"}

dist/types/types/options.d.ts

@@ -308,5 +308,13 @@ export interface RenderingOptions {
      * Determines whether to render arrows or not.
      */
     arrows?: string;
+    /**
+     * The additional HTML rendered before the track element.
+     */
+    beforeTrack?: string;
+    /**
+     * The additional HTML rendered after the track element.
+     */
+    afterTrack?: string;
 }
 //# sourceMappingURL=../../../src/js/types/options.d.ts.map

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -562,12 +562,15 @@ export class SplideRenderer {
    */
   html( renderingOptions: RenderingOptions = {} ): string {
     renderingOptions = assign( {}, RENDERING_DEFAULT_OPTIONS, renderingOptions );
-    const { rootClass, listTag, arrows } = renderingOptions;
+    const { rootClass, listTag, arrows, beforeTrack, afterTrack } = renderingOptions;
 
     let html = '';
 
     html += `<div id="${ this.id }" class="${ this.buildClasses() } ${ rootClass || '' }">`;
     html += `<style>${ this.Style.build() }</style>`;
+
+    html += beforeTrack || '';
+
     html += `<div class="splide__track">`;
     html += `<${ listTag } class="splide__list">`;
 
@@ -580,6 +583,7 @@ export class SplideRenderer {
       html += this.renderArrows();
     }
 
+    html += afterTrack || '';
     html += `</div>`;
 
     return html;

src/js/types/options.ts

@@ -359,4 +359,14 @@ export interface RenderingOptions {
    * Determines whether to render arrows or not.
    */
   arrows?: string;
+
+  /**
+   * The additional HTML rendered before the track element.
+   */
+  beforeTrack?: string;
+
+  /**
+   * The additional HTML rendered after the track element.
+   */
+  afterTrack?: string;
 }