Swiper it is possible to create swiper carousel including its html code to render it on the fly?

1

The reason it is because I am using inside expandable cards swiper carousel as the cover image with one image in a list then when I open the card I need to load more images in the swiper carousel and destroy it when card is closed.

The problem I am having it is that when I have already opened more than 10 cards with their images loaded after opened and closed then when returning to the list the browsing it is slow and impossible to browse anymore any other card expandable anymore.

So I wonder if there is a mode using swiper.create to create the swiper carousel on the fly including also the html code than has handlebars so I do not have to have the html code inside the cards before but only when the card is opened and so I can clean the div container containing the carousel when closed entirely and destroy it easily.

is this possible? I tried many things but nothing seems to work properly and memory is full after browsing more than 10 cards…

thanks for any ideas!

2

You can try with ** Virtual Slides**.

http://idangero.us/swiper/api/#virtual

create a function to render your slides.

also, you can make the user to open only one card. son if he opens card1. and click con card2. you close and destroy swiper con card 1, and create swiper on card 2.

1 Like
3

thanks I will try that

4

It worked almost perfectly that way big thanks bro! :sunglasses: