jQuery Fullscreen Page Slider Plugin - Project Preview

Project Preview is a jQuery plugin that creates a control bar sticky at the bottom of the page to slide between page sections with a fade animation. Useful for one page website that allows to showcase the designs/products as like on a real website.

How to use it:

1. Include the jQuery javascript and other necessary resources in the document.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<!-- styles -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="css/project-preview.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.1/modernizr.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include the jQuery Project Preview plugin's javascript and CSS after jQuery library.

<link rel="stylesheet" href="css/project-preview.css">
<script src="js/jquery.project-preview.js"></script>

3. Create contents for the page slider. The plugin will turn the page into a collection of screens based on article tag. Use data-title attribute to display the image captions in the bottom bar.

<section id="wrapper">
<article class="visible" data-title="Title 1"> <img src="1" alt="Alt 1" title="Title 1"> </article>
<article class="" data-title="Title 2"> <img src="2" alt="Alt 2" title="Title 2"> </article>
<article class="" data-title="Title 3"> <img src="3" alt="Alt 3" title="Title 3"> </article>
...
</section>

4. Create the Html for the bottom control bar.

<footer>
<button data-prev=""><i class="fa fa-angle-left"></i></button>
<p class="title"></p>
<ul class="pagging">
<li class="active"></li>
<li class=""></li>
<li class=""></li>
...
</ul>
<button data-next=""><i class="fa fa-angle-right"></i></button>
</footer>

5. Call the plugin on the wrapper. That's it.

<script>
$(function() {
$('#wrapper').projectPreview();
});
</script>

6. All the available options.

• $articles: 'article': slide selector
• $buttonNext: '[data-next]',: next button selector
• $buttonPrev: '[data-prev]',: prev button selector
• $pagging: 'footer ul.pagging li': pagging selector
• $title: 'footer p.title': title selector
• isLeft: false: the slides are centred by default
• isLeftClass: 'is-left',: class for not centring
• visibleClassSlide: "visible": class for the visible slide
• visibleClassPagging: "active"  : class for the current pagging item   
• animationShow: "fadeIn": animation class for showing from animate.css
• animationHide: "fadeOut": animation class for hidding from animate.css

Change log:

2014-08-04

• Added animate.css support.

---

This awesome jQuery plugin is developed by tobaiasjl. For more Advanced Usages, please check the demo page or visit the official website.