Horizontally.js NPM

Horizontally.js

Horizontally.js is a lightweight JavaScript library that creates full page, responsive, slideshow/carousel web applications with mouse and touch scroll support.

For further instructions and examples make sure to read our documentation web page.

Take a look at our CodePen demo

Personal License

Horizontally.js is released under the GNU General Public License v3 for open-source personal projects.

This means you are free to modify and distribute under the GPL license if the copyright and credits notices remain untouched.

View this resource for more information on the GPL License.

Commercial License

For commercial uses such as non open-source sites, website templates, and other types of web applications a commercial license is needed.

Usage

To use Horizontally.js you must include the css and javascript files, add the correct HTML structure, and initialize the project.

Including CSS and Javascript files:

<link rel="stylesheet" type="text/css" href="horizontally.css" />

<script type="text/javascript" src="horizontally.js"></script>

HTML structure:

<div id="horizontally">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Initialize project:

new horizontally({
    wrapper: "#horizontally",
    speed: 1000,
    arrowButtons: true,
    pageSelector: true,
});

Add CSS styles:

If this is your first time using horizontally.js, you may want to add CSS styles to the sections to visually represent them.

.section:nth-child(1) {
    background: #2196f3;
}

.section:nth-child(2) {
    background: #4caf50;
}

.section:nth-child(3) {
    background: #ffc107;
}

NPM Usage

Horizontally.js is also available on NPM and can be installed via the command line.

npm install horizontally.js

CDN

Alternatively, it is possible to use our CDN.

https://cdn.jsdelivr.net/gh/MatthewBleUK/horizontally.js@latest/src/css/horizontally.css

https://cdn.jsdelivr.net/gh/MatthewBleUK/horizontally.js@latest/src/js/horizontally.js

Options

Horizontally can be used with four options.

The wrapper option changes the HTML ID name of the wrapper. The default option is #horizontally.

wrapper: "#horizontally";

The speed option changes the scroll milliseconds duration. To prevent users from accidentally scrolling twice, a speed above 300ms is a good choice. The default scroll speed is set to 1000ms.