feat(virtual): renderSlide to support slide outer HTML and HTML ele…

…ment
nolimits4web · Dec 14, 2022 · fdcd644 · fdcd644
1 parent 7697a83
commit fdcd644
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/modules/virtual/virtual.js b/src/modules/virtual/virtual.js
@@ -25,26 +25,31 @@ export default function Virtual({ swiper, extendParams, on, emit }) {
     slidesGrid: [],
   };
 
+  const tempDOM = document.createElement('div');
+
   function renderSlide(slide, index) {
     const params = swiper.params.virtual;
     if (params.cache && swiper.virtual.cache[index]) {
       return swiper.virtual.cache[index];
     }
     // eslint-disable-next-line
     let slideEl;
-    if (params.renderSlide) slideEl = params.renderSlide.call(swiper, slide, index);
-    else if (swiper.isElement) {
+    if (params.renderSlide) {
+      slideEl = params.renderSlide.call(swiper, slide, index);
+      if (typeof slideEl === 'string') {
+        tempDOM.innerHTML = slideEl;
+        slideEl = tempDOM.children[0];
+      }
+    } else if (swiper.isElement) {
       slideEl = createElement('swiper-slide');
     } else {
       slideEl = createElement('div', swiper.params.slideClass);
     }
+    slideEl.setAttribute('data-swiper-slide-index', index);
     if (!params.renderSlide) {
-      slideEl.setAttribute('data-swiper-slide-index', index);
       slideEl.textContent = slide;
     }
 
-    if (!slideEl.getAttribute('data-swiper-slide-index'))
-      slideEl.setAttribute('data-swiper-slide-index', index);
     if (params.cache) swiper.virtual.cache[index] = slideEl;
     return slideEl;
   }

diff --git a/src/types/modules/virtual.d.ts b/src/types/modules/virtual.d.ts
@@ -110,7 +110,7 @@ export interface VirtualOptions {
    */
   addSlidesAfter?: number;
   /**
-   * Function to render slide. As an argument it accepts current slide item for `slides` array and index number of the current slide. Function must return an outter HTML of the swiper slide.
+   * Function to render slide. As an argument it accepts current slide item for `slides` array and index number of the current slide. Function must return an outer HTML of the swiper slide or slide HTML element.
    *
    * @default null
    */