React-id-swiper: Virtual Slides & Dynamic Data

[Pixel-Daze]

HI，thank you for making this useful tool，I have some problems.
How can i use virtual slides in react-id-swiper
I have a lot of slides from dynamic data

[ninpeng0]

add params { shouldSwiperUpdate: true }
and show swiper component when data length > 0.
For example,

{ banners.length &&
  <Swiper {...params}>
    { banners.map((banner) => <div>{banner}</div>)}
}

[hatton]

I don't understand how this answer relates to the question. The answer, if I understand correctly, just shows how to update as banners grows. Instead, I think what is being asked is how to use the underlying Swiper components virtual capability. We need this too, because we have so many slides that if we dump them all into Swiper at once, it takes several minutes for the browser to display everything.

[hatton]

We ended up getting close enough to virtual by having each slide be an empty string, except for the current slide and the one before and after it. We arranged for a react state change whenever the page index changed, which then causes a re-render, and inside of the render, we do something like this (simplified here):

pages.map((slide, index) => { return {  {
    Math.abs(index - this.state.currentSwiperIndex) < 2 ? 
         ( <div dangerouslySetInnerHTML={{  __html: slide }} /> )
     : ( "" ) } 

This brought our loading time for a 100 page picture dictionary from 6 minutes to about a second.

[EricLambrecht]

I agree that this was not the right answer.

I would like to know what's the recommended way to use the virtual feature of SwiperJS.