Swiper window width changes, page width height changes resulting in automatic sliding solutions

And it's swiper problem again.

Background:

PC-side project, REM layout, swiper as a step bar (previous step, next) functionality.

The change in the window size caused by drag on the screen, wide height change, will cause Swiper to automatically slide (to the next step).

When downloading the file link back slightly caused a slight change in width and height, resulting in a direct slide to the next step.

Chrome browsing when you close the download on the bottom will also cause sliding

Thinking:

1. At first I thought it was some place accidentally added the next operation, has been looking for

2. Then thought it was the download method caused, replaced a variety of download solutions

3. Really did not find out, ready to debugger when found that the screen changes will also cause sliding, ready to find relevant content

Let's go:

But helpless Swiper Chinese API too much do not want to one of the search, direct searching, filter out the following possible content of the contents ↓

Blog Links: 43193785

 Important: by calling the Swiper.resizefix () method, inform Swiper that the page size needs to be recalculated. 

Blog Link: https:// // Focus: Myswiper.destroy (removeresizeevent)  - Removes all bound event listeners (window resizing event "If the Removeresizeevent value is not equal to" false ", the container (wrapper) 's touch event, and the document's mouse event), is useful for adding/removing sliders, page to document, Ability to release browser memory. 

Results:

By the time I was ready to try the resize () way, I found that I had set it up at the beginning and had to turn to the next page every time I initialized it! Ah ah ah ah, not easy to copy the code directly in the demo!

1 varMyswiper = $ ('. Swiper-container ')). Swiper ({2Loopfalse,3Simulatetouch:false,//Invalid mouse4Followfinger:false,//Slide Slide When you release the mouse or finger after dragging5Keyboardcontrol:false,//when set to True, you can use the keyboard arrow keys to control the slide slide. 6Touchmovestoppropagation:false,//Block A bubble event when a tag jumps with the Iscoll plugin7Observertrue,//automatic initialization of swiper when modifying swiper itself or child elements8Observeparents:true,//automatically initializes swiper when modifying the parent element of a swiper9OnInit:function(swiper) {Ten             //Swiper.swipenext ()//IS here!!! Every time the init is redrawn, it jumps to the next page. One         } A});

Conclusion:

But original aim, if there is a type of situation, to exclude more than write jump to the next method, then it is definitely in repainting, re-init swiper the container when the problem, in this direction to find a certain result.

Reproduced annotated source, crab crab

Swiper window width changes, page width height changes resulting in automatic sliding solutions