Vue-awesome-swiper: Virtual Slides

Created on 29 Jan 2018 · 3Comments · Source: surmon-china/vue-awesome-swiper

Virtual Slides

Vue.js v2

What is Expected?

I'm doing this, a simple loop in an Object:

swiper(v-if="base.status", :options="views.options", ref="views", @slideChange="swipe", @slideNextTransitionEnd="next", @slidePrevTransitionEnd="prev")
  swiper-slide(v-for="(item, index) in base.data", :key="item.id", infinite-wrapper)
    h1 {{ item.title }}

And then I set virtual: true:

options: {
  autoHeight: true,
  loop: true,
  initialSlide: 1,
  virtual: true,
}

So I expected that it'll show only the first 3 DOM and then it change the slides while swiping as it look in the demo

What is actually happening?

But, I think I did something wrong cuz it doesn't work like I expected and it didn't allow me to swipe at all, and it shows in the DOM that whole Object data not only 3.

Is this the wrong way to do it ?

Source