jQuery Plugin For Horizontal One Page Scrolling Web Page - Horizontal Blocks

Horizontal Blocks is a jQuery plugin that turns a single page into a collection of scrollable horizontal blocks with keyboard, mouse wheel and thumbnails navigation.

How to use it:

1. Load the latest jQuery library and jQuery horizontal blocks plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.HorizontalBlocks.js" type="text/javascript">

2. Create scrollable horizontal blocks with navigation.

<div id="wrapper">
<ul id="pages">
<li> Block1 Contents </li>
<li> Block2 Contents </li>
<li> Block3 Contents </li>
...
</ul>
<a id="nextBlock" href="#">Next</a> 
<a id="prevBlock" href="#">Prev</a>
</div>

<a id="prev" href="#">
<div>▲</div>
</a>
<nav> <a id="vav" href="#">
<div class="window"></div>
</a> <a id="vav" href="#">
<div class="window"></div>
</a> <a id="vav" href="#">
<div class="window"></div>
</a> <a id="vav" href="#">
<div class="window"></div>
</a> </nav>
<a id="next" href="#">
<div>▲</div>
</a>

3. Call the plugin with options.

$(function(){
$(document).HorizontalBlocks({
parentBox: "#wrapper",
block:"#pages>li",
firstBlock: 1,
scrollOption:"swing",
scrollSpeed: "normal",
horizontalMenu: "nav a",
nextId: "#next",
prevId: "#prev"
});
});

---

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