jquery Full-screen scrolling plugin fullpage.js problems encountered in use

What is 1.fullpage.js?

Fullpage.js is a plugin based on jQuery that is used to make full-screen web sites.

2. Compatibility:

-jquery compatible: compatible with jquery 1.7+

-Browser compatible: Ie8+,chrome,firefox

3. Question:

Based on the use of the document, it is easy to achieve full-screen, but when in a certain screen, the internal sub-elements need to implement the sliding carousel effect, at the beginning, I directly in the $ (document). Ready () write the method, but on the page except the button can change color, there is no sliding effect. After debugging, it is found that the button click event is in, but it is the feeling to realize the slide that piece of code has no effect.

First, re-look at the API, found that there is a screen sub-screen function, only need to add style slide can, finally slide, however, but found that the button click is not accurate, if there are 3 screen, when clicked on the 1th button, and did not prompt what, click on the 2nd, only prompt index 1, Causes the last screen to always fail to display, which means that the page is deferred. Research for a long time, did not find a solution. Originally, this effect with fullpage self-slide implementation is not appropriate. Because the sliding element does not occupy a single screen, it is only displayed when the button is switched.

Later, I searched for fullpage related issues through StackOverflow, and found that there was a problem similar to mine, "My other plugins don ' t worked when using fullpage.js", the answer describes a URL, https ://github.com/alvarotrigo/fullpage.js/wiki/faq---frequently-answered-questions, from which I finally understood the reason. Presumably, Fullpage.js will wrap these elements in an element that can change its position at any time, so these elements become dynamically added elements, and most plug-ins require that the target element be initially kept in place for normal execution.

So the workaround is to initialize the plugin or jquery event in Fullpage.js's AfterRender callback method.

Not all plugins or jquery events have to be initialized in the Fullpage.js AfterRender, which involves changing the location.

jquery Full-screen scrolling plugin fullpage.js problems encountered in use