Swiper slide not working on tab

slide1
slide2

Instance you can use the app.swiper.get app method:

var swiper = app.swiper.get(’.swiper-container’);
swiper.slideNext();

1 Like

Because it was initialized in hidden tab, you need to set Swiper’s observer: true and observeParents: true parameters to make it reint on tab show

2 Likes

how can i fix it? can you send me script code please?

It is well explained in docs on how to set swiper parameters http://framework7.io/docs/swiper.html#swiper-auto-initialization

And this is list of all parameters http://idangero.us/swiper/api/#parameters

Hi, do you have the example of it or edit script?

I’m having a lot of trouble getting Swiper to do much. I think the problem here is that the docs and working examples of swiper all assume the reader is a very competent web developer.

I, for one, am not. I’m somewhat past the ‘script kiddie’ level, but not far enough that I can make sense of sophisticated docs. Even the kitchen sink isn’t much use for swiper because the example is just too sophisticated for non-experts to understand.

Even with the tips on setting the observer params I stil can’t get it to work with tabs. I can’t get it to paginate correctly. The best I’ve been able to do is get it to work at a very basic level on a standalone page.

I am using the Vue implementation.

I’m sure it works exactly as the docs say. But several simple and complete working examples to examine would really help.

When I start to display with swiper silde then I resize it window as swiper slide is working! Weird!! what can we solve it?

Try to zoom out anf in as it is working. It is weird! here is code below

pageInit: function (e, page) {

		var swiper = new Swiper('.swiper-container', {
			parallax: true,
			autoHeight: true,
			setWrapperSize: true,
			slidesPerView: 1,
			spaceBetween: 30,
			centeredSlides: true,
			autoplay: {
				delay: 2500,
				disableOnInteraction: false,
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			observer: true,
			observeParents: true,
			
		});
		
		swiper.init();

}

Thanks for this answer

Thank you!!! I resolved up to your answer!!! hooray !!! Your amazing!