Framework7: Swiper slider inside tab does not work

[ecordani]

Hi,
my app has the main navigation done through a tab bar and in one specific tab I have added a Swiper slider but it doesn't work as expected. In fact if I try to swipe, the first slide return in his place...it seems like there's a sort of blocking anchor. Whereas if I put the slider inside a page-content div it works perfectly.

[nolimits4web]

Call Swiper's .update method when tab your tab becomes visible, otherwise there is no way to calculate swiper sizes in hidden tab, for example:

$('#my-tab').on('show', function(){
  $(this).find('.swiper-container')[0].swiper.update()
});

[ecordani]

Thank you, it works perfectly.

[ausiuming]

I have a similar problem. I've put the swiper in a popup instead of a tab, got a similar problem that the first slide return in its place. Have the same symdrome as #505 that works if resize the browser.

Test link: http://demo.medcomhk.net/f7-test/ (click question mark on upper right)

Added swiper.update(), still cannot solve the problem.

[nolimits4web]

@ausiuming there is no show event for popup, look in docs, it is open. And swiper.update() will work

[desmeit]

Hi, I have the same problem as ausiuming. I have a multiple Swiper within a popup but when I open the popup the swiper is not working. After resizing the browser it works. Could you give a complete example to solve this problem? I can't find some infos about that in your docs. In addition there is no explanation for swiper.update();

Unfortunately I have the feeling it is a little bit complicated to work with popups.

By the way: if I have multiple Swiper in tabs the first is working with your update function but the second (with 3 swipes) is only showing the first 2 pics.

[chunfai92]

Hi @nolimits4web , I have also encounter the same problem with the swiper slider. When i try to resizing the browser it works perfectly. Below are my code:

jioApp.swiper(".swiper-1", {
speed: 400,
spaceBetween: 10
});

Can i know where to add this code " swiper.update()" to resolve this issue?
Thank you

[TonyFeestneus]

fix by @nolimits4web works, but it selects the last bullet and shows the first slide. How to fix that then?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.