Create Horizontal Paging Website with jQuery horizonScroll

“Out of the box” thinking is a must for designers and developers if they want to create an appealing and rather different online experience.

Horizontally scrolling websites became popular in the last couple of years and they are preferred from a large part of the design/development community. I think that they will become even more popular because of their unique presentation of information.

Vertical scrolling is a classic way to convey messages and structure content but for some it is quite boring. Bearing in mind that there is a large percentage of users browsing through mobile devices such as tablets, horizontally scrolling websites are tempting for product or portfolio websites.

In my opinion, for certain types of websites; specifically, ones that require visual presentation of information, it is a brilliant and unusual solution that will help you stick out from the crowd.

Demo Download

Creating a horizontal website is not that difficult. In this article, I am presenting a quite simple solution you can adopt and implement if you are keen on trying this type of design.

How to implement horizontal scrolling:

First of all, you need to load the required jQuery library and the horizonScroll plugin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.horizonScroll.js"></script>

Next, you need to include the jQuery touchSwipe plugin for touch swipe and mouse drag support.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>

HTML structure

After setting up the required jQuery library and plugins, you need to create the HTML structure.

Creating the navigation:

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

Creating the sections:

<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>

Add the required CSS:

html,
body {
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 overflow: hidden;
}
 
section {
 float: left;
 display: block;
 height: 100%;
 padding: 0;
 margin: 0;
}
 
.horizon-prev,
.horizon-next {
 position: fixed;
 top: 50%;
 margin-top: -24px;
 z-index: 9999;
}
 
.horizon-prev { left: 20px; }
.horizon-next { right: 20px; }

Initialize the plugin with default options:

$('section').horizon();

Here are the default plugin options:

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

Have a look at the demo to see how it works. Click on the download button to start playing with it.

Demo Download