pageAnimate Web-Page Slider

Last Update: 17 May 2013
Regular License: $6
Extended License: $30
Sales: 103

This jQuery plugin is a full page slider for navigating between web pages. For example, you could have your home page on one slide, contact page on another, and so on. It is responsive and works in all major browsers, including Internet Explorer 6 ( ) and mobile browsers.

As the name suggests, you can put anything inside a slide (other jQuery content, videos, and what-not), and each slide will scroll to view overflow just like any normal page. There is nothing I know of that will break the slider, and you can add an infinite amount of slides. This is exactly what you need to spice up your website!

Although this is designed for full window content, you can just as easily use this as a traditional jQuery content slider. In fact, the pageAnimate is probably better than other sliders since it works beautifully in Internet Explorer 6!

Note: If you view the CodeCanyon preview in a mobile browser, CodeCanyon’s rendering won’t work at all. You need to visit http://creativewebsites.me/pageAnimate/preview to see it in action.

Version 1.1 UPDATE Version 1.1 comes with two new features: the ability to give each slide a unique URL (with the use of hash) and an auto advancing function so that the slider automatically cycles through all slides continuously. Both cannot be enabled at the same time (I can’t think of anyone that would want that anyway).

If you have the previous version installed and you update to this version, make sure that you hardcode the ‘data-slide=”0”’ attribute into the div that has a class of .pageAnimate. Like so: <div class="pageAnimate" data-slide="0"> </div> Also, you will need to add the following class to all the slide triggers: .pageAnimate_trigger

What if JavaScript is Disabled? This plugin runs primarily on JavaScript – but what if JavaScript is disabled? Is the slider useless (and that means people can only see your homepage!). No, of course not. You can add a fallback ‘href’ link to the triggers that go to a slide. So when JavaScript is disabled, this trigger will not go to a slide in the pageAnimate, but will just proceed in the normal way to another page (which you defined in the ‘href’).

Does the pageAnimate slider pull Content from other Web-Pages? No, the plugin itself does not pull content from other web-pages. Although you could do that with only a few lines of Ajax or PHP code, the script itself does not have that functionality and each slide’s/page’s content must be added manually. To pull content from your web-server with Ajax, just use this code:

(Just change #slide_id_or_class” to the CSS id or class of the pageAnimate slide that you want to add to)

So how do I make the Slider go to a Slide? It couldn’t be easier – just add this code:

<a class="pageAnimate_trigger pageAnimate_trigger1">This text will go to slide 2</a>

Notice the number added to the end of the class name? That little number defines what slide will be animated to. But since everything in JavaScript is zero-based (bear with me here), we need to minus 1 off the slide number. So for example, if we want the slider to go to slide #4 when the text is clicked, we would add this class: “pageAnimate_trigger3”. If we want the slider to go to slide #6, we would add this class: “pageAnimate_trigger5”. As mentioned above, you can add a link to the anchor tag, which can only be followed when JavaScript is disabled. So that means visitors will still be able to view a cloned page elsewhere on your site if they have JavaScript disabled.

Do I have to Manually add a link to Every Slide? Not at all – the script does all the work for you.

How do I make this into a normal Content Slider and not a Web-Page Slider? Easy – all you do is change a single line in the ‘settings’ of the jQuery script. You will need to have a div (or another similar tag) as a container for the pageAnimate slider. Simply define that div in the script. Are there any Problems or Bugs?

When the browser window is zoomed in or out in IE 8, the slides do not automatically resize to become full-screen. I’ve tried for ages to find a solution, but can’t. However, they DO resize when the actual window is dragged smaller or larger. This is unique to IE 8. This shouldn’t be a big deal since there won’t be too many people zooming in and out on IE8.

When using jQuery 1.8.1, Firefox freezes when many triggers are clicked in quick succession. Works fine with jQuery 1.7.2.

The slider’s navigation completely breaks down when you zoom in on a smartphone. This can be fixed by adding this code to the <head> section of your HTML document: <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

The slider’s animation might be a little jumpy on old smartphones – though it’s not too bad.