jquery.horizonScroll.js - Horizontal Scrolling Websites

This is a jQuery plugin which allows for websites to page (scroll by set width) left and right horizontally. Horizontal scroll sites offer a new and unique way to develope sites! 

Source: github.com

1. INCLUDE JS FILES

<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.js"></script>
<script type="text/javascript" src="jquery.horizonScroll.js"></script>

2. HTML

<div class="horizon-prev"><img src="images/l-arrow.png"></div>
<div class="horizon-next"><img src="images/r-arrow.png"></div>

<section data-role="section" id="section-section1"></section>
<section data-role="section" id="section-section2"></section>
<section data-role="section" id="section-section3"></section>
<section data-role="section" id="section-section4"></section>

3. CSS

$('section').horizon();

If you do not want to use jquery.swipeTouch.js for swipe left and right:

$('selector').horizon({swipe: false});

Additional plugin options and their default values:

$.fn.horizon.defaults = {
    scrollTimeout: null,
    scrollEndDelay: 250,
    scrollDuration: 400,
    i: 0,
    limit: 0,
    docWidth: 0,
    sections: null,
    swipe: true,
    fnCallback: function (i) {}
};

You can invoke a left page scroll, right page scroll or page scroll to a page index. This helps if you would like to bind to additional elements on the page. The selector here is ignored.

$(document).horizon('scrollRight');
$(document).horizon('scrollLeft');
$(document).horizon('scrollTo', i);