Assign attributes to clones generated by the renderer.

dist/js/splide.cjs.js

@@ -2479,17 +2479,6 @@ class SplideRenderer {
     this.registerSlideStyles();
     this.registerListStyles();
   }
-  getCloneCount() {
-    if (this.isLoop()) {
-      const { options } = this;
-      if (options.clones) {
-        return options.clones;
-      }
-      const perPage = max(...this.breakpoints.map(([, options2]) => options2.perPage));
-      return perPage * ((options.flickMaxPages || 1) + 1);
-    }
-    return 0;
-  }
   registerRootStyles() {
     this.breakpoints.forEach(([width, options]) => {
       this.Style.rule(" ", "max-width", unit(options.width), width);
@@ -2660,29 +2649,46 @@ class SplideRenderer {
   }
   renderSlides(renderingOptions) {
     const { slideTag, slideAttrs = [] } = renderingOptions;
-    const slides = this.contents.map((content, index) => {
+    const data = this.contents.map((content, index) => {
       const classes = `${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}`;
       const attrs = slideAttrs[index] ? this.buildAttrs(slideAttrs[index]) : "";
-      return `<${slideTag} class="${classes}" ${attrs}>${content}</${slideTag}>`;
+      return {
+        tag: slideTag,
+        classes,
+        attrs,
+        content
+      };
     });
     if (this.isLoop()) {
-      this.generateClones(slides, renderingOptions);
+      this.generateClones(data, renderingOptions);
     }
-    return slides.join("");
+    return data.map((slide) => {
+      return `<${slide.tag} class="${slide.classes}" ${slide.attrs}>${slide.content}</${slide.tag}>`;
+    }).join("");
   }
-  generateClones(slides, renderingOptions) {
-    const { slideTag } = renderingOptions;
+  generateClones(data, renderingOptions) {
     const { classes } = this.options;
     const count = this.getCloneCount();
-    const contents = this.contents.slice();
-    while (contents.length < count) {
-      push(contents, contents);
+    const original = data.slice();
+    while (original.length < count) {
+      push(original, original);
     }
-    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);
+    push(original.slice(-count).reverse(), original.slice(0, count)).forEach((slide, index) => {
+      const clone = assign({}, slide, { classes: `${slide.classes} ${classes.clone}` });
+      index < count ? data.unshift(clone) : data.push(clone);
     });
   }
+  getCloneCount() {
+    if (this.isLoop()) {
+      const { options } = this;
+      if (options.clones) {
+        return options.clones;
+      }
+      const perPage = max(...this.breakpoints.map(([, options2]) => options2.perPage));
+      return perPage * ((options.flickMaxPages || 1) + 1);
+    }
+    return 0;
+  }
   renderArrows() {
     let html = "";
     html += `<div class="${this.options.classes.arrows}">`;

dist/js/splide.esm.js

@@ -2475,17 +2475,6 @@ class SplideRenderer {
     this.registerSlideStyles();
     this.registerListStyles();
   }
-  getCloneCount() {
-    if (this.isLoop()) {
-      const { options } = this;
-      if (options.clones) {
-        return options.clones;
-      }
-      const perPage = max(...this.breakpoints.map(([, options2]) => options2.perPage));
-      return perPage * ((options.flickMaxPages || 1) + 1);
-    }
-    return 0;
-  }
   registerRootStyles() {
     this.breakpoints.forEach(([width, options]) => {
       this.Style.rule(" ", "max-width", unit(options.width), width);
@@ -2656,29 +2645,46 @@ class SplideRenderer {
   }
   renderSlides(renderingOptions) {
     const { slideTag, slideAttrs = [] } = renderingOptions;
-    const slides = this.contents.map((content, index) => {
+    const data = this.contents.map((content, index) => {
       const classes = `${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}`;
       const attrs = slideAttrs[index] ? this.buildAttrs(slideAttrs[index]) : "";
-      return `<${slideTag} class="${classes}" ${attrs}>${content}</${slideTag}>`;
+      return {
+        tag: slideTag,
+        classes,
+        attrs,
+        content
+      };
     });
     if (this.isLoop()) {
-      this.generateClones(slides, renderingOptions);
+      this.generateClones(data, renderingOptions);
     }
-    return slides.join("");
+    return data.map((slide) => {
+      return `<${slide.tag} class="${slide.classes}" ${slide.attrs}>${slide.content}</${slide.tag}>`;
+    }).join("");
   }
-  generateClones(slides, renderingOptions) {
-    const { slideTag } = renderingOptions;
+  generateClones(data, renderingOptions) {
     const { classes } = this.options;
     const count = this.getCloneCount();
-    const contents = this.contents.slice();
-    while (contents.length < count) {
-      push(contents, contents);
+    const original = data.slice();
+    while (original.length < count) {
+      push(original, original);
     }
-    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);
+    push(original.slice(-count).reverse(), original.slice(0, count)).forEach((slide, index) => {
+      const clone = assign({}, slide, { classes: `${slide.classes} ${classes.clone}` });
+      index < count ? data.unshift(clone) : data.push(clone);
     });
   }
+  getCloneCount() {
+    if (this.isLoop()) {
+      const { options } = this;
+      if (options.clones) {
+        return options.clones;
+      }
+      const perPage = max(...this.breakpoints.map(([, options2]) => options2.perPage));
+      return perPage * ((options.flickMaxPages || 1) + 1);
+    }
+    return 0;
+  }
   renderArrows() {
     let html = "";
     html += `<div class="${this.options.classes.arrows}">`;

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

@@ -49,12 +49,6 @@ export declare class SplideRenderer {
      * Initializes the instance.
      */
     private init;
-    /**
-     * Returns the number of clones to generate.
-     *
-     * @return A number of clones.
-     */
-    private getCloneCount;
     /**
      * Registers styles for the root element.
      */
@@ -234,10 +228,16 @@ export declare class SplideRenderer {
     /**
      * Generates clones.
      *
-     * @param slides           - An array with slides.
+     * @param data           - An array with slides.
      * @param renderingOptions - Rendering options.
      */
     private generateClones;
+    /**
+     * Returns the number of clones to generate.
+     *
+     * @return A number of clones.
+     */
+    private getCloneCount;
     /**
      * Generates arrows and the wrapper element.
      *

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;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,eAAe;IAsBvB;;;;;;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"}
+{"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;;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;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,eAAe;IAsBvB;;;;;;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;IAwBpB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAkBtB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAerB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAWpB;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IASnB;;;;OAIG;IACH,IAAI,CAAE,gBAAgB,GAAE,gBAAqB,GAAI,MAAM;CA4BxD"}

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -122,26 +122,6 @@ export class SplideRenderer {
     this.registerListStyles();
   }
 
-  /**
-   * Returns the number of clones to generate.
-   *
-   * @return A number of clones.
-   */
-  private getCloneCount(): number {
-    if ( this.isLoop() ) {
-      const { options } = this;
-
-      if ( options.clones ) {
-        return options.clones;
-      }
-
-      const perPage = max( ...this.breakpoints.map( ( [ , options ] ) => options.perPage ) );
-      return perPage * ( ( options.flickMaxPages || 1 ) + 1 );
-    }
-
-    return 0;
-  }
-
   /**
    * Registers styles for the root element.
    */
@@ -521,41 +501,71 @@ export class SplideRenderer {
   private renderSlides( renderingOptions: RenderingOptions ): string {
     const { slideTag, slideAttrs = [] } = renderingOptions;
 
-    const slides = this.contents.map( ( content, index ) => {
+    const data = this.contents.map( ( content, index ) => {
       const classes = `${ this.options.classes.slide } ${ index === 0 ? CLASS_ACTIVE : '' }`;
       const attrs   = slideAttrs[ index ] ? this.buildAttrs( slideAttrs[ index ] ) : '';
-      return `<${ slideTag } class="${ classes }" ${ attrs }>${ content }</${ slideTag }>`;
+
+      return {
+        tag: slideTag,
+        classes,
+        attrs,
+        content,
+      }
     } );
 
     if ( this.isLoop() ) {
-      this.generateClones( slides, renderingOptions );
+      this.generateClones( data, renderingOptions );
     }
 
-    return slides.join( '' );
+    return data.map( slide => {
+      return `<${ slide.tag } class="${ slide.classes }" ${ slide.attrs }>${ slide.content }</${ slide.tag }>`;
+    } ).join( '' );
   }
 
   /**
    * Generates clones.
    *
-   * @param slides           - An array with slides.
+   * @param data           - An array with slides.
    * @param renderingOptions - Rendering options.
    */
-  private generateClones( slides: string[], renderingOptions: RenderingOptions ): void {
-    const { slideTag } = renderingOptions;
+  private generateClones(
+    data: { tag: string, classes: string, attrs: string, content: string }[],
+    renderingOptions: RenderingOptions
+  ): void {
     const { classes } = this.options;
     const count    = this.getCloneCount();
-    const contents = this.contents.slice();
+    const original = data.slice();
 
-    while ( contents.length < count ) {
-      push( contents, contents );
+    while ( original.length < count ) {
+      push( original, original );
     }
 
-    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 );
+    push( original.slice( -count ).reverse(), original.slice( 0, count ) ).forEach( ( slide, index ) => {
+      const clone = assign( {}, slide, { classes: `${ slide.classes } ${ classes.clone }` } );
+      index < count ? data.unshift( clone ) : data.push( clone );
     } );
   }
 
+  /**
+   * Returns the number of clones to generate.
+   *
+   * @return A number of clones.
+   */
+  private getCloneCount(): number {
+    if ( this.isLoop() ) {
+      const { options } = this;
+
+      if ( options.clones ) {
+        return options.clones;
+      }
+
+      const perPage = max( ...this.breakpoints.map( ( [ , options ] ) => options.perPage ) );
+      return perPage * ( ( options.flickMaxPages || 1 ) + 1 );
+    }
+
+    return 0;
+  }
+
   /**
    * Generates arrows and the wrapper element.
    *

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

@@ -22,7 +22,7 @@ $settings = get_settings();
       const options = {
         type: 'loop',
         // padding: '1rem',
-        perPage: 3,
+        perPage: 5,
         // clones: 5,
         gap: 100,
         focus: 'center',
@@ -55,8 +55,16 @@ $settings = get_settings();
         options
       );
 
+      var attrs = [
+        { dataTest: 1 },
+        { dataTest: 2 },
+        { dataTest: 3 },
+        { dataTest: 4 },
+        { dataTest: 5 },
+      ];
+
       var wrapper = document.getElementById( 'wrapper' );
-      wrapper.innerHTML = renderer.html( { arrows: true } );
+      wrapper.innerHTML = renderer.html( { arrows: true, slideAttrs: attrs } );
 
       setTimeout( () => {
         var splide = new Splide( wrapper.firstElementChild, options );