Swiper Virtual Slides(虚拟slide) - virtual

开启虚拟Slide功能,可设置选项或设置为true则使用默认值。 虚拟Slide会在Dom结构中保持尽量少的Slide,只渲染当前可见的slide和前后的slide,而隐藏其他不可见的Slide,每次切换时就渲染新的Slide。当你的Slide很多的时候,尤其是Slide中有复杂的Dom树结构时,性能会有很大的提升。

virtual信息

类型:
object/boolean
启用版本:
4.0.0

效果演示

 
 
 
 

Slide 1 Slide 250 Slide 500

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper">
    <div class="swiper-wrapper"></div>
</div>
<script>
var mySwiper = new Swiper('.swiper', {
  virtual: {
    slides: (function () {
      var slides = [];
      for (var i = 0; i < 600; i += 1) {
        slides.push('Slide ' + (i + 1));
      }
      return slides;
    }()),
  },
  //或者 virtual: true,
});
</script>