This jQuery plugin is a full web page slider for navigating between net pages. For instance, you could possibly have your house web page on one slide, contact web page on one other, and so forth. It’s responsive and works in all main browsers, together with Web Explorer 6 ( ) and cell browsers.
Because the title suggests, you possibly can put something inside a slide (different jQuery content material, movies, and what-not), and every slide will scroll to view overflow similar to any regular web page. There’s nothing I do know of that can break the slider, and you may add an infinite quantity of slides. That is precisely what it’s worthwhile to boost your web site!
Though that is designed for full window content material, you possibly can simply as simply use this as a conventional jQuery content material slider. Actually, the pageAnimate might be higher than different sliders since it really works fantastically in Web Explorer 6!
Be aware: When you view the CodeCanyon preview in a cell browser, CodeCanyon’s rendering received’t work in any respect. It’s essential go to http://creativewebsites.me/pageAnimate/preview to see it in motion.
Model 1.1 UPDATE
Model 1.1 comes with two new options: the flexibility to provide every slide a novel URL (with the usage of hash) and an auto advancing perform in order that the slider mechanically cycles via all slides constantly. Each can’t be enabled on the identical time (I can’t consider anybody that will need that anyway).
When you have the earlier model put in and also you replace to this model, just remember to hardcode the ‘data-slide=”zero”’ attribute into the div that has a category of .pageAnimate. Like so:
<div class="pageAnimate" data-slide="zero"> </div>
Additionally, you have to so as to add the next class to all of the slide triggers: .pageAnimate_trigger
Does the pageAnimate slider pull Content material from different Internet-Pages?
No, the plugin itself doesn’t pull content material from different web-pages. Though you could possibly do this with just a few strains of Ajax or PHP code, the script itself doesn’t have that performance and every slide’s/web page’s content material have to be added manually. To drag content material out of your web-server with Ajax, simply use this code:
(Simply change #slide_id_or_class” to the CSS id or class of the pageAnimate slide that you simply need to add to)
So how do I make the Slider go to a Slide?
It couldn’t be simpler – simply add this code:
<a category="pageAnimate_trigger pageAnimate_trigger1">This article is going to go to slip 2</a>
Do I’ve to Manually add a hyperlink to Each Slide?
Under no circumstances – the script does all of the be just right for you.
How do I make this into a traditional Content material Slider and never a Internet-Web page Slider?
Straightforward – all you do is change a single line within the ‘settings’ of the jQuery script. You have to to have a div (or one other related tag) as a container for the pageAnimate slider. Merely outline that div within the script.
Are there any Issues or Bugs?
- When the browser window is zoomed in or out in IE eight, the slides don’t mechanically resize to change into full-screen. I’ve tried for ages to discover a answer, however can’t. Nonetheless, they DO resize when the precise window is dragged smaller or bigger. That is distinctive to IE eight. This shouldn’t be a giant deal since there received’t be too many individuals zooming out and in on IE8.
- When utilizing jQuery 1.eight.1, Firefox freezes when many triggers are clicked in fast succession. Works nice with jQuery 1.7.2.
- The slider’s navigation fully breaks down once you zoom in on a smartphone. This may be mounted by including this code to the <head> part of your HTML doc:
<meta title="viewport" content material="width=device-width; initial-scale=1; maximum-scale=1">
- The slider’s animation could be slightly jumpy on previous smartphones – although it’s not too dangerous.