Add rendering options.

dist/js/splide.cjs.js

@@ -2404,6 +2404,11 @@ let Splide = _Splide;
 Splide.defaults = {};
 Splide.STATES = STATES;
 
+const RENDERING_DEFAULT_OPTIONS = {
+  listTag: "ul",
+  slideTag: "li"
+};
+
 class Style {
   constructor(id, options) {
     this.styles = {};
@@ -2458,34 +2463,22 @@ class SplideRenderer {
     assert(this.contents.length, "Provide at least 1 content.");
     this.init();
   }
+  static clean(splide) {
+    const { on } = EventInterface(splide);
+    const { root } = splide;
+    const clones = queryAll(root, `.${CLASS_CLONE}`);
+    on(EVENT_MOUNTED, () => {
+      remove(child(root, "style"));
+    });
+    remove(clones);
+  }
   init() {
     this.parseBreakpoints();
-    this.generateSlides();
     this.registerRootStyles();
     this.registerTrackStyles();
     this.registerSlideStyles();
     this.registerListStyles();
   }
-  generateSlides() {
-    this.slides = this.contents.map((content, index) => {
-      return `<li class="${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}">${content}</li>`;
-    });
-    if (this.isLoop()) {
-      this.generateClones();
-    }
-  }
-  generateClones() {
-    const { classes } = this.options;
-    const count = this.getCloneCount();
-    const contents = this.contents.slice();
-    while (contents.length < count) {
-      push(contents, contents);
-    }
-    push(contents.slice(-count).reverse(), contents.slice(0, count)).forEach((content, index) => {
-      const html = `<li class="${classes.slide} ${classes.clone}">${content}</li>`;
-      index < count ? this.slides.unshift(html) : this.slides.push(html);
-    });
-  }
   getCloneCount() {
     if (this.isLoop()) {
       const { options } = this;
@@ -2651,27 +2644,59 @@ class SplideRenderer {
       CLASS_INITIALIZED
     ].filter(Boolean).join(" ");
   }
-  html() {
+  renderSlides(renderingOptions) {
+    const { slideTag } = renderingOptions;
+    const slides = this.contents.map((content, index) => {
+      const classes = `${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}`;
+      return `<${slideTag} class="${classes}">${content}</${slideTag}>`;
+    });
+    if (this.isLoop()) {
+      this.generateClones(slides, renderingOptions);
+    }
+    return slides.join("");
+  }
+  generateClones(slides, renderingOptions) {
+    const { slideTag } = renderingOptions;
+    const { classes } = this.options;
+    const count = this.getCloneCount();
+    const contents = this.contents.slice();
+    while (contents.length < count) {
+      push(contents, contents);
+    }
+    push(contents.slice(-count).reverse(), contents.slice(0, count)).forEach((content, index) => {
+      const html = `<${slideTag} class="${classes.slide} ${classes.clone}">${content}</${slideTag}>`;
+      index < count ? slides.unshift(html) : slides.push(html);
+    });
+  }
+  renderArrows() {
     let html = "";
-    html += `<div id="${this.id}" class="${this.buildClasses()}">`;
+    html += `<div class="${this.options.classes.arrows}">`;
+    html += this.renderArrow(true);
+    html += this.renderArrow(false);
+    html += `</div>`;
+    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>`;
+  }
+  html(renderingOptions = {}) {
+    renderingOptions = assign({}, RENDERING_DEFAULT_OPTIONS, renderingOptions);
+    const { rootClass, listTag, arrows } = renderingOptions;
+    let html = "";
+    html += `<div id="${this.id}" class="${this.buildClasses()} ${rootClass || ""}">`;
     html += `<style>${this.Style.build()}</style>`;
     html += `<div class="splide__track">`;
-    html += `<ul class="splide__list">`;
-    html += this.slides.join("");
-    html += `</ul>`;
+    html += `<${listTag} class="splide__list">`;
+    html += this.renderSlides(renderingOptions);
+    html += `</${listTag}>`;
     html += `</div>`;
+    if (arrows) {
+      html += this.renderArrows();
+    }
     html += `</div>`;
     return html;
   }
-  clean(splide) {
-    const { on } = EventInterface(splide);
-    const { root } = splide;
-    const clones = queryAll(root, `.${CLASS_CLONE}`);
-    on(EVENT_MOUNTED, () => {
-      remove(child(root, "style"));
-    });
-    remove(clones);
-  }
 }
 
 exports.CLASSES = CLASSES;

dist/js/splide.esm.js

@@ -2400,6 +2400,11 @@ let Splide = _Splide;
 Splide.defaults = {};
 Splide.STATES = STATES;
 
+const RENDERING_DEFAULT_OPTIONS = {
+  listTag: "ul",
+  slideTag: "li"
+};
+
 class Style {
   constructor(id, options) {
     this.styles = {};
@@ -2454,34 +2459,22 @@ class SplideRenderer {
     assert(this.contents.length, "Provide at least 1 content.");
     this.init();
   }
+  static clean(splide) {
+    const { on } = EventInterface(splide);
+    const { root } = splide;
+    const clones = queryAll(root, `.${CLASS_CLONE}`);
+    on(EVENT_MOUNTED, () => {
+      remove(child(root, "style"));
+    });
+    remove(clones);
+  }
   init() {
     this.parseBreakpoints();
-    this.generateSlides();
     this.registerRootStyles();
     this.registerTrackStyles();
     this.registerSlideStyles();
     this.registerListStyles();
   }
-  generateSlides() {
-    this.slides = this.contents.map((content, index) => {
-      return `<li class="${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}">${content}</li>`;
-    });
-    if (this.isLoop()) {
-      this.generateClones();
-    }
-  }
-  generateClones() {
-    const { classes } = this.options;
-    const count = this.getCloneCount();
-    const contents = this.contents.slice();
-    while (contents.length < count) {
-      push(contents, contents);
-    }
-    push(contents.slice(-count).reverse(), contents.slice(0, count)).forEach((content, index) => {
-      const html = `<li class="${classes.slide} ${classes.clone}">${content}</li>`;
-      index < count ? this.slides.unshift(html) : this.slides.push(html);
-    });
-  }
   getCloneCount() {
     if (this.isLoop()) {
       const { options } = this;
@@ -2647,27 +2640,59 @@ class SplideRenderer {
       CLASS_INITIALIZED
     ].filter(Boolean).join(" ");
   }
-  html() {
+  renderSlides(renderingOptions) {
+    const { slideTag } = renderingOptions;
+    const slides = this.contents.map((content, index) => {
+      const classes = `${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}`;
+      return `<${slideTag} class="${classes}">${content}</${slideTag}>`;
+    });
+    if (this.isLoop()) {
+      this.generateClones(slides, renderingOptions);
+    }
+    return slides.join("");
+  }
+  generateClones(slides, renderingOptions) {
+    const { slideTag } = renderingOptions;
+    const { classes } = this.options;
+    const count = this.getCloneCount();
+    const contents = this.contents.slice();
+    while (contents.length < count) {
+      push(contents, contents);
+    }
+    push(contents.slice(-count).reverse(), contents.slice(0, count)).forEach((content, index) => {
+      const html = `<${slideTag} class="${classes.slide} ${classes.clone}">${content}</${slideTag}>`;
+      index < count ? slides.unshift(html) : slides.push(html);
+    });
+  }
+  renderArrows() {
     let html = "";
-    html += `<div id="${this.id}" class="${this.buildClasses()}">`;
+    html += `<div class="${this.options.classes.arrows}">`;
+    html += this.renderArrow(true);
+    html += this.renderArrow(false);
+    html += `</div>`;
+    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>`;
+  }
+  html(renderingOptions = {}) {
+    renderingOptions = assign({}, RENDERING_DEFAULT_OPTIONS, renderingOptions);
+    const { rootClass, listTag, arrows } = renderingOptions;
+    let html = "";
+    html += `<div id="${this.id}" class="${this.buildClasses()} ${rootClass || ""}">`;
     html += `<style>${this.Style.build()}</style>`;
     html += `<div class="splide__track">`;
-    html += `<ul class="splide__list">`;
-    html += this.slides.join("");
-    html += `</ul>`;
+    html += `<${listTag} class="splide__list">`;
+    html += this.renderSlides(renderingOptions);
+    html += `</${listTag}>`;
     html += `</div>`;
+    if (arrows) {
+      html += this.renderArrows();
+    }
     html += `</div>`;
     return html;
   }
-  clean(splide) {
-    const { on } = EventInterface(splide);
-    const { root } = splide;
-    const clones = queryAll(root, `.${CLASS_CLONE}`);
-    on(EVENT_MOUNTED, () => {
-      remove(child(root, "style"));
-    });
-    remove(clones);
-  }
 }
 
 export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBus, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };

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

@@ -1,23 +1,29 @@
 import { Splide } from '../../core/Splide/Splide';
-import { Options } from '../../types';
+import { Options, RenderingOptions } from '../../types';
 /**
  * The class to generate static HTML of the slider for the first view.
  *
  * @since 3.0.0
  */
 export declare class SplideRenderer {
+    /**
+     * Removes a style element and clones.
+     *
+     * @param splide - A Splide instance.
+     */
+    static clean(splide: Splide): void;
     /**
      * Holds slide contents.
      */
-    private contents;
+    private readonly contents;
     /**
      * The Direction component.
      */
-    private Direction;
+    private readonly Direction;
     /**
      * Holds the Style instance.
      */
-    private Style;
+    private readonly Style;
     /**
      * Holds options.
      */
@@ -26,14 +32,10 @@ export declare class SplideRenderer {
      * The slider ID.
      */
     private readonly id;
-    /**
-     * An array with slide HTML strings.
-     */
-    private slides;
     /**
      * An array with options for each breakpoint.
      */
-    private breakpoints;
+    private readonly breakpoints;
     /**
      * The SplideRenderer constructor.
      *
@@ -47,14 +49,6 @@ export declare class SplideRenderer {
      * Initializes the instance.
      */
     private init;
-    /**
-     * Generates HTML of slides with inserting provided contents.
-     */
-    private generateSlides;
-    /**
-     * Generates clones.
-     */
-    private generateClones;
     /**
      * Returns the number of clones to generate.
      *
@@ -219,16 +213,37 @@ export declare class SplideRenderer {
      */
     private buildClasses;
     /**
-     * Returns the HTML of the slider.
+     * Generates HTML of slides with inserting provided contents.
      *
-     * @return The generated HTML.
+     * @param renderingOptions - Rendering options.
      */
-    html(): string;
+    private renderSlides;
     /**
-     * Removes a style element and clones.
+     * Generates clones.
      *
-     * @param splide - A Splide instance.
+     * @param slides           - An array with slides.
+     * @param renderingOptions - Rendering options.
+     */
+    private generateClones;
+    /**
+     * Generates arrows and the wrapper element.
+     *
+     * @return The HTML for arrows.
+     */
+    private renderArrows;
+    /**
+     * Generates an arrow HTML.
+     *
+     * @param prev - Options for each breakpoint.
+     *
+     * @return The HTML for the prev or next arrow.
+     */
+    private renderArrow;
+    /**
+     * Returns the HTML of the slider.
+     *
+     * @return The generated HTML.
      */
-    clean(splide: Splide): void;
+    html(renderingOptions?: RenderingOptions): string;
 }
 //# sourceMappingURL=../../../../src/js/renderer/SplideRenderer/SplideRenderer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplideRenderer.d.ts","sourceRoot":"","sources":["SplideRenderer.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAmBtC;;;;GAIG;AACH,qBAAa,cAAc;IACzB;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAW;IAE3B;;OAEG;IACH,OAAO,CAAC,SAAS,CAAqB;IAEtC;;OAEG;IACH,OAAO,CAAC,KAAK,CAAQ;IAErB;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAe;IAEvC;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAS;IAE5B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAW;IAEzB;;OAEG;IACH,OAAO,CAAC,WAAW,CAA6B;IAEhD;;;;;;;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;IASZ;;OAEG;IACH,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,OAAO,CAAC,cAAc;IAetB;;;;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,IAAI,IAAI,MAAM;IAiBd;;;;OAIG;IACH,KAAK,CAAE,MAAM,EAAE,MAAM,GAAI,IAAI;CAW9B"}
+{"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"}

dist/types/types/options.d.ts

@@ -286,4 +286,27 @@ export interface ResponsiveOptions {
      */
     destroy?: boolean | 'completely';
 }
+/**
+ * The interface for rendering options.
+ *
+ * @since 3.0.0
+ */
+export interface RenderingOptions {
+    /**
+     * The additional class for the root element.
+     */
+    rootClass?: string;
+    /**
+     * The tag used for the list element.
+     */
+    listTag?: string;
+    /**
+     * The tag used for each slide.
+     */
+    slideTag?: string;
+    /**
+     * Determines whether to render arrows or not.
+     */
+    arrows?: string;
+}
 //# sourceMappingURL=../../../src/js/types/options.d.ts.map

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -1,3 +1,4 @@
+import { PATH, SIZE, XML_NAME_SPACE } from '../../components/Arrows/path';
 import { Direction, DirectionComponent } from '../../components/Direction/Direction';
 import {
   CLASS_ACTIVE,
@@ -14,9 +15,10 @@ import { EVENT_MOUNTED } from '../../constants/events';
 import { LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
-import { Options } from '../../types';
+import { Options, RenderingOptions } from '../../types';
 import {
   assert,
+  assign,
   camelToKebab,
   child,
   forOwn,
@@ -30,6 +32,7 @@ import {
   uniqueId,
   unit,
 } from '../../utils';
+import { RENDERING_DEFAULT_OPTIONS } from '../constants/defaults';
 import { Style } from '../Style/Style';
 
 
@@ -39,20 +42,37 @@ import { Style } from '../Style/Style';
  * @since 3.0.0
  */
 export class SplideRenderer {
+  /**
+   * Removes a style element and clones.
+   *
+   * @param splide - A Splide instance.
+   */
+  static clean( splide: Splide ): void {
+    const { on } = EventInterface( splide );
+    const { root } = splide;
+    const clones = queryAll( root, `.${ CLASS_CLONE }` );
+
+    on( EVENT_MOUNTED, () => {
+      remove( child( root, 'style' ) );
+    } );
+
+    remove( clones );
+  }
+
   /**
    * Holds slide contents.
    */
-  private contents: string[];
+  private readonly contents: string[];
 
   /**
    * The Direction component.
    */
-  private Direction: DirectionComponent;
+  private readonly Direction: DirectionComponent;
 
   /**
    * Holds the Style instance.
    */
-  private Style: Style;
+  private readonly Style: Style;
 
   /**
    * Holds options.
@@ -64,15 +84,10 @@ export class SplideRenderer {
    */
   private readonly id: string;
 
-  /**
-   * An array with slide HTML strings.
-   */
-  private slides: string[];
-
   /**
    * An array with options for each breakpoint.
    */
-  private breakpoints: [ string, Options ][] = [];
+  private readonly breakpoints: [ string, Options ][] = [];
 
   /**
    * The SplideRenderer constructor.
@@ -101,44 +116,12 @@ export class SplideRenderer {
    */
   private init(): void {
     this.parseBreakpoints();
-    this.generateSlides();
     this.registerRootStyles();
     this.registerTrackStyles();
     this.registerSlideStyles();
     this.registerListStyles();
   }
 
-  /**
-   * Generates HTML of slides with inserting provided contents.
-   */
-  private generateSlides(): void {
-    this.slides = this.contents.map( ( content, index ) => {
-      return `<li class="${ this.options.classes.slide } ${ index === 0 ? CLASS_ACTIVE : '' }">${ content }</li>`;
-    } );
-
-    if ( this.isLoop() ) {
-      this.generateClones();
-    }
-  }
-
-  /**
-   * Generates clones.
-   */
-  private generateClones(): void {
-    const { classes } = this.options;
-    const count    = this.getCloneCount();
-    const contents = this.contents.slice();
-
-    while ( contents.length < count ) {
-      push( contents, contents );
-    }
-
-    push( contents.slice( -count ).reverse(), contents.slice( 0, count ) ).forEach( ( content, index ) => {
-      const html = `<li class="${ classes.slide } ${ classes.clone }">${ content }</li>`;
-      index < count ? this.slides.unshift( html ) : this.slides.push( html );
-    } );
-  }
-
   /**
    * Returns the number of clones to generate.
    *
@@ -499,41 +482,106 @@ export class SplideRenderer {
   }
 
   /**
-   * Returns the HTML of the slider.
+   * Generates HTML of slides with inserting provided contents.
    *
-   * @return The generated HTML.
+   * @param renderingOptions - Rendering options.
    */
-  html(): string {
-    let html = '';
+  private renderSlides( renderingOptions: RenderingOptions ): string {
+    const { slideTag } = renderingOptions;
 
-    html += `<div id="${ this.id }" class="${ this.buildClasses() }">`;
-    html += `<style>${ this.Style.build() }</style>`;
-    html += `<div class="splide__track">`;
-    html += `<ul class="splide__list">`;
+    const slides = this.contents.map( ( content, index ) => {
+      const classes = `${ this.options.classes.slide } ${ index === 0 ? CLASS_ACTIVE : '' }`;
+      return `<${ slideTag } class="${ classes }">${ content }</${ slideTag }>`;
+    } );
 
-    html += this.slides.join( '' );
+    if ( this.isLoop() ) {
+      this.generateClones( slides, renderingOptions );
+    }
 
-    html += `</ul>`;
-    html += `</div>`;
+    return slides.join( '' );
+  }
+
+  /**
+   * Generates clones.
+   *
+   * @param slides           - An array with slides.
+   * @param renderingOptions - Rendering options.
+   */
+  private generateClones( slides: string[], renderingOptions: RenderingOptions ): void {
+    const { slideTag } = renderingOptions;
+    const { classes } = this.options;
+    const count    = this.getCloneCount();
+    const contents = this.contents.slice();
+
+    while ( contents.length < count ) {
+      push( contents, contents );
+    }
+
+    push( contents.slice( -count ).reverse(), contents.slice( 0, count ) ).forEach( ( content, index ) => {
+      const html = `<${ slideTag } class="${ classes.slide } ${ classes.clone }">${ content }</${ slideTag }>`;
+      index < count ? slides.unshift( html ) : slides.push( html );
+    } );
+  }
+
+  /**
+   * Generates arrows and the wrapper element.
+   *
+   * @return The HTML for arrows.
+   */
+  private renderArrows(): string {
+    let html = '';
+
+    html += `<div class="${ this.options.classes.arrows }">`;
+    html += this.renderArrow( true );
+    html += this.renderArrow( false );
     html += `</div>`;
 
     return html;
   }
 
   /**
-   * Removes a style element and clones.
+   * Generates an arrow HTML.
    *
-   * @param splide - A Splide instance.
+   * @param prev - Options for each breakpoint.
+   *
+   * @return The HTML for the prev or next arrow.
    */
-  clean( splide: Splide ): void {
-    const { on } = EventInterface( splide );
-    const { root } = splide;
-    const clones = queryAll( root, `.${ CLASS_CLONE }` );
+  private renderArrow( prev: boolean ): string {
+    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>`
+  }
 
-    on( EVENT_MOUNTED, () => {
-      remove( child( root, 'style' ) );
-    } );
+  /**
+   * Returns the HTML of the slider.
+   *
+   * @return The generated HTML.
+   */
+  html( renderingOptions: RenderingOptions = {} ): string {
+    renderingOptions = assign( {}, RENDERING_DEFAULT_OPTIONS, renderingOptions );
+    const { rootClass, listTag, arrows } = renderingOptions;
 
-    remove( clones );
+    let html = '';
+
+    html += `<div id="${ this.id }" class="${ this.buildClasses() } ${ rootClass || '' }">`;
+    html += `<style>${ this.Style.build() }</style>`;
+    html += `<div class="splide__track">`;
+    html += `<${ listTag } class="splide__list">`;
+
+    html += this.renderSlides( renderingOptions );
+
+    html += `</${ listTag }>`;
+    html += `</div>`;
+
+    if ( arrows ) {
+      html += this.renderArrows();
+    }
+
+    html += `</div>`;
+
+    return html;
   }
 }

src/js/renderer/constants/defaults.ts

@@ -0,0 +1,12 @@
+import { RenderingOptions } from '../../types';
+
+
+/**
+ * Default options for generating static HTML.
+ *
+ * @since 3.0.0
+ */
+export const RENDERING_DEFAULT_OPTIONS: RenderingOptions = {
+  listTag : 'ul',
+  slideTag: 'li',
+};

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

@@ -56,11 +56,11 @@ $settings = get_settings();
       );
 
       var wrapper = document.getElementById( 'wrapper' );
-      wrapper.innerHTML = renderer.html();
+      wrapper.innerHTML = renderer.html( { arrows: true } );
 
       setTimeout( () => {
         var splide = new Splide( wrapper.firstElementChild, options );
-        renderer.clean( splide );
+        SplideRenderer.clean( splide );
         splide.mount();
       }, 2000 );
     } );

src/js/types/options.ts

@@ -333,3 +333,30 @@ export interface ResponsiveOptions {
    */
   destroy?: boolean | 'completely';
 }
+
+/**
+ * The interface for rendering options.
+ *
+ * @since 3.0.0
+ */
+export interface RenderingOptions {
+  /**
+   * The additional class for the root element.
+   */
+  rootClass?: string;
+
+  /**
+   * The tag used for the list element.
+   */
+  listTag?: string;
+
+  /**
+   * The tag used for each slide.
+   */
+  slideTag?: string;
+
+  /**
+   * Determines whether to render arrows or not.
+   */
+  arrows?: string;
+}