Swiper: Clarifications and Examples for Virtual Slides would be helpful

Created on 31 May 2018 · 2Comments · Source: nolimits4web/swiper

This is a (multiple allowed):

[ ] bug
[x] enhancement
[ ] feature-discussion (RFC)

Swiper Version: 4.3.0
Platform/Target and Browser Versions: Cordova Windows (6.0) on Windows 10 -> Edge Browser
Live Link or JSFiddle/Codepen or website with isssue: http://idangero.us/swiper/api/#virtual

What you did

The Documentation for the Virtual slides are a bit lackluster:

It is not completely clear what the virtual.slides array can contain when used without the renderSlide or renderExternal functions. At the moment it can only hold Strings which are interpreted as HTML and added to the DOM as is. Enhancement: Would it be possible to also allow HTML Elements?
The renderSlide function has a small typo ("outter" instead of "outer"). Missing: Documentation about the expected HTML to return. Will you need a add certain classes to it? Does it have to have data attributes with the index?. Enhancement: It would also be great if you could return a HTML Element instead of an outerHTML string.
renderExternal would benefit greatly from an expanded documentation. Maybe even a small vuejs or angular example to show an expected use case would help a lot! From what I could gleam from the code and what I tested you will only get the documented parameters and have to manually mount your slides into the DOM under the 'swiper-wrapper' div. Missing: Documentation what the expected result after the execution of the function is (No return value, you just add the elements to the DOM at a certain spot, you have to clear the old slides from the DOM). Also specify what requirements the mounted elements need to fulfill (Do I need to manually add the 'swiper-slide' class or is this done for me? Do I have to add the 'data-swiper-slide-index' attribute? It seems not as it works without but when I add it, it does not seem to hurt. Did I understand correctly that I have to add the "left" css property myself using the supplied offset? Why is this necessary but the width is set automatically?) Enhancements: It would be great if the data object already contained a reference to the 'swiper-wrapper' element as you have to mount your elements there anyway. A simple vuejs/react/angular example would be helpful.