nataliem82 / jquery.horizontalblocks

jQuery Horizonal Blocks can change your website to scrollable horizontal blocks easily.

#jQuery HorizontalBlocks v1.2 - jQuery Horizonal Blocks can change your website to scrollable horizontal blocks easily.

Open source under the BSD License.
Copyright 2013 Kakurezatou <http://kakurezatou.com/>
All rights reserved.

Demo Page ##How to use Loading jQuery and Horizonal Blocks,

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.HorizontalBlocks.1.0.js" type="text/javascript"></script>

then write below html tags. It must be under the body tag.

<ul id="blocks">
    <li>Block1 Contents</li>
    <li>Block2 Contents</li>
    <li>Block2 Contents</li>
</ul>
<a id="nextBlock" href="#">Next</a>
<a id="prevBlock" href="#">Prev</a>

Finally, write below script.

$(document).HorizontalBlocks();  

##Options Horizonal Blocks has some options. Default params are displayed below.

$(document).HorizontalBlocks({
    parentBox: "#box", //parent blocks tag
    block:"#blocks li", //blocks terget
    firstBlock: 1, // first displayed block number
    scrollOption:"swing", //set scroll type
    scrollSpeed: "normal", //set scroll speed.value(ms) or "normal", "slow", "fast"
    horizontalMenu: "nav a", // jump link terget
    nextId: "#nextBlock", //Id for Next Block
    prevId: "#prevBlock" //Id for Prev Block
});

If you loaded jQuery easing plugin, you could use more scroll option. jQuery easing plugin can download here.
##revealed probrem

• collupse layout when access small display

##Release note 2013/02/23 Publish v1.2

• fix scrolling performance on iOS and Android.
• add swipe scrolling when access touch devices.

2013/02/09 Publish v1.0