Hello all,
I have 4 tabs and inside of them an instance of Swiper.js slider. When I load the page the first open tab has a functional slider but the other 3 are not initialised, only when I refresh again.
Is there a way to preload all the content inside tabs? Or something similar that would help this issue?
Thanks a lot!
Hi and welcome to the forum
Start by sharing your Read only link 
Read only link doesn’t make a lot of sense since the Swiper only works in published mode.
link to that: https://sac-project.webflow.io/resources
Just to be clear - the white/colored dots are the tab links, I just styled them to look this way.
If someone could take a look - https://sac-project.webflow.io/news
The same thing happens there, the cards inside the tabs ‘Blog’ ‘Events’ and ‘Press’ also don’t load, only the first one. I put in a text block to try and this is being shown. It’s probably because I’m using Masonry.js to order the grid of cards.
If anyone has any ideas of how to force the content to load, I would really appreciate.
From what I understand, Swiper JS only creates an instance of itself to the first matched element of given selector. So for example, if you have 3 .gallery-top elements, Swiper JS will only create a slider on the first element among those 3 that appears in the DOM.
Try creating multiple instances of it, using ids for example instead of classes and creating an object that holds the options so you don’t need to keep repeating it over and over.
Thank you for your answer @Jeandcc. However, this does not fix the issue, the JS inside the tabs does not get loaded, only the first tab that is open. This is the same with my swiper and masonry grids.
I initialise them inside document.ready, is there another way to force them to reload when I click to open a new tab?