使用VueJS结合Swiper Element实现虚拟滑块时幻灯片空白问题

问题分析 #

你遇到的幻灯片滑动后消失的问题，核心原因有三点：

1. renderExternal中错误引用slide标识：Swiper虚拟数据里的slide.id是内部唯一标识，并非你自定义的slide索引/ID，用它映射你的slides数组会导致找不到对应内容，最终幻灯片为空。
2. 预加载幻灯片数量为0：addSlidesBefore和addSlidesAfter设为0，滑动时没有预渲染前后的幻灯片，导致切换后出现空白。
3. 手动维护渲染列表引发冲突：Swiper虚拟模式本身会自动管理需渲染的幻灯片，手动通过renderExternal更新数组容易和Swiper内部状态不同步。

修正方案（推荐） #

移除冗余的renderExternal配置，让Swiper自动处理虚拟渲染逻辑，同时调整预加载参数：

模板代码

<template>
  <div class="screen">
    <swiper-container init="false" ref="swiperEl">
      <!-- 直接循环所有slides，Swiper会自动只渲染可见及预加载项 -->
      <swiper-slide v-for="(q, i) in slides" :key="q.id">
        <div class="card">
          {{ q.content }}
        </div>
      </swiper-slide>
    </swiper-container>
  </div>
</template>

脚本代码

<script setup>
import { ref, onMounted } from "vue";

const slides = ref([]);

// 生成50个测试幻灯片
for (let i = 0; i < 50; i += 1) {
  slides.value.push({ id: i, content: `Slide ${i}` });
}

const swiperOpts = {
  slidesPerView: 1,
  speed: 400, // 原速度40过快，调整为合理值提升体验
  height: "100%",
  spaceBetween: 16,
  virtual: {
    slides: slides.value,
    addSlidesAfter: 1, // 预加载后1个幻灯片
    addSlidesBefore: 1, // 预加载前1个幻灯片
    initialSlide: 3,
    // 移除renderExternal，交由Swiper自动管理虚拟渲染
  },
};

const swiperEl = ref();

onMounted(() => {
  Object.assign(swiperEl.value, swiperOpts);
  swiperEl.value.initialize();
});
</script>

若需自定义renderExternal的正确写法 #

如果你确实需要自定义渲染逻辑，要改用slide的index属性映射数据，而非id：

virtual: {
  slides: slides.value,
  addSlidesAfter: 1,
  addSlidesBefore: 1,
  initialSlide: 3,
  renderExternal: (data) => {
    virtualSlides.value.slides = data.slides.map((s) => {
      // 使用s.index获取对应slide，而非s.id
      return slides.value[s.index];
    });
  },
},

模板中保持循环virtualSlides.slides即可，但这种方式需要确保数据与Swiper内部状态完全同步，不如默认自动管理稳定。

内容的提问来源于stack exchange，提问作者Sudhir N