The renderer accepts attributes for each slide.

dist/js/splide.cjs.js

@@ -2644,11 +2644,19 @@ class SplideRenderer {
       CLASS_INITIALIZED
     ].filter(Boolean).join(" ");
   }
+  buildAttrs(attrs) {
+    let html = "";
+    forOwn(attrs, (value, key) => {
+      html += ` ${camelToKebab(key)}="${value}"`;
+    });
+    return html.trim();
+  }
   renderSlides(renderingOptions) {
-    const { slideTag } = renderingOptions;
+    const { slideTag, slideAttrs = [] } = renderingOptions;
     const slides = this.contents.map((content, index) => {
       const classes = `${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}`;
-      return `<${slideTag} class="${classes}">${content}</${slideTag}>`;
+      const attrs = slideAttrs[index] ? this.buildAttrs(slideAttrs[index]) : "";
+      return `<${slideTag} class="${classes}" ${attrs}>${content}</${slideTag}>`;
     });
     if (this.isLoop()) {
       this.generateClones(slides, renderingOptions);

dist/js/splide.esm.js

@@ -2640,11 +2640,19 @@ class SplideRenderer {
       CLASS_INITIALIZED
     ].filter(Boolean).join(" ");
   }
+  buildAttrs(attrs) {
+    let html = "";
+    forOwn(attrs, (value, key) => {
+      html += ` ${camelToKebab(key)}="${value}"`;
+    });
+    return html.trim();
+  }
   renderSlides(renderingOptions) {
-    const { slideTag } = renderingOptions;
+    const { slideTag, slideAttrs = [] } = renderingOptions;
     const slides = this.contents.map((content, index) => {
       const classes = `${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}`;
-      return `<${slideTag} class="${classes}">${content}</${slideTag}>`;
+      const attrs = slideAttrs[index] ? this.buildAttrs(slideAttrs[index]) : "";
+      return `<${slideTag} class="${classes}" ${attrs}>${content}</${slideTag}>`;
     });
     if (this.isLoop()) {
       this.generateClones(slides, renderingOptions);

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

@@ -212,6 +212,14 @@ export declare class SplideRenderer {
      * @return Classes for the root element as a single string.
      */
     private buildClasses;
+    /**
+     * Converts provided attributes into a single string.
+     *
+     * @param attrs - An object with attributes.
+     *
+     * @return A built string.
+     */
+    private buildAttrs;
     /**
      * Generates HTML of slides with inserting provided contents.
      *

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;CA4BxD"}
+{"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;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAUlB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAgBpB;;;;;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/types/options.d.ts

@@ -304,6 +304,10 @@ export interface RenderingOptions {
      * The tag used for each slide.
      */
     slideTag?: string;
+    /**
+     * Attributes for each slide.
+     */
+    slideAttrs?: Array<Record<string, string | number | boolean>>;
     /**
      * Determines whether to render arrows or not.
      */

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -481,17 +481,35 @@ export class SplideRenderer {
     ].filter( Boolean ).join( ' ' );
   }
 
+  /**
+   * Converts provided attributes into a single string.
+   *
+   * @param attrs - An object with attributes.
+   *
+   * @return A built string.
+   */
+  private buildAttrs( attrs: Record<string, string | number | boolean> ): string {
+    let html = '';
+
+    forOwn( attrs, ( value, key ) => {
+      html += ` ${ camelToKebab( key ) }="${ value }"`;
+    } );
+
+    return html.trim();
+  }
+
   /**
    * Generates HTML of slides with inserting provided contents.
    *
    * @param renderingOptions - Rendering options.
    */
   private renderSlides( renderingOptions: RenderingOptions ): string {
-    const { slideTag } = renderingOptions;
+    const { slideTag, slideAttrs = [] } = renderingOptions;
 
     const slides = this.contents.map( ( content, index ) => {
       const classes = `${ this.options.classes.slide } ${ index === 0 ? CLASS_ACTIVE : '' }`;
-      return `<${ slideTag } class="${ classes }">${ content }</${ slideTag }>`;
+      const attrs   = slideAttrs[ index ] ? this.buildAttrs( slideAttrs[ index ] ) : '';
+      return `<${ slideTag } class="${ classes }" ${ attrs }>${ content }</${ slideTag }>`;
     } );
 
     if ( this.isLoop() ) {

src/js/types/options.ts

@@ -355,6 +355,11 @@ export interface RenderingOptions {
    */
   slideTag?: string;
 
+  /**
+   * Attributes for each slide.
+   */
+  slideAttrs?: Array<Record<string, string | number | boolean>>;
+
   /**
    * Determines whether to render arrows or not.
    */