Swiper slide not working on tab


#1
slide1
slide2

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

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


#2

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


#3

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


#4

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


#5

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


#6

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


#7

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.


#8

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


#9

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();

}


#10

Thanks for this answer