[Vuejs]-SwiperJS virtual slider displays blank slides for renderExternal with vueJS

It looks like Vue and Swipe are fighting each other over rendering DOM inside swiper container when SwiperElement (web component) is used.

I’ve tried using both virtual.renderExternal and virtual.renderSlide to delegate rendering to Vue from SwiperElement, without much success. After all attempts, I’ve come to the conclusion that what you tried should have worked (because it does work when using same logic with React).

I was able to achieve the result you’re looking for using the Vue components provided by swiper/vue. I know they’re planned for deprecation in some future release, in favour of the web component API but, until the rendering issues with the virtual module are fixed, the Vue components seem to provide what you need.

Demo here.

Update:

Swiper’s author answered the issue here, providing an example.

I’ve tweaked it a bit here.

Relevant details:

• :left property on the slide element, using offset
• initialSlide moved outside of virtual

You should able to fix the issue by add the style with top or left with the given offset.

For vertical:

<li class="swiper-slide" style={`top: ${offset}px`}>
...
</li>

For default:

<li class="swiper-slide" style={`left: ${offset}px`}>
...
</li>